# Getting started

## Start a new project

By calling `one-default-new-project` command (preferably in an empty directory) we produce a new `one.el` project with the following structure:

    .
    ├── assets
    │   └── one.css
    └── one.org

Once done we can build the website under the directory `./public/` by calling `one-build` command while we are in the file `one.org`. Our project's structure is now:

    .
    ├── assets
    │   └── one.css
    ├── one.org
    └── public
        ├── blog
        │   ├── default
        │   │   └── index.html
        │   ├── default-home-list-pages
        │   │   └── index.html
        │   ├── one-default-doc
        │   │   └── index.html
        │   ├── one-default-with-sidebar
        │   │   └── index.html
        │   └── one-default-with-toc
        │       └── index.html
        ├── index.html
        └── one.css

## Modify the content with live reloading

To get our website up and running, we serve the files in `./public/` subdirectory using brower-sync (any webserver serving files is OK). Once we have it installed, to start a webserver with live reloading, we run the following commands (in a terminal):

    $ cd public
    $ browser-sync start -s -w --files "*"

Assuming the port `3000` isn't used we have our website served at `http://localhost:3000`.

Now we can modify the content of `one.org` file and see the changes reflected in the browser after we rebuild/re-render the whole website or part of it using the following commands `one-build`, `one-render-pages` and `one-render-page-at-point` or the asynchronous version of those commands `one-build-async`, `one-render-pages-async` and `one-render-page-at-point-async`.

## CSS style sheet

When we call `one-build` (or `one-build-async`) command the pages of the website are rendered in the directory `./public/` and the files in `./assets/` directory are copied into `./public/` subdirectory.

When we build a `one.el` website with the default render functions and the default CSS style sheet (this is the case if we used `one-default-new-project` as we did above) the style sheet that applies is `./public/one.css` file which is a copy of `./assets/one.css` file.

So in that case, to modify the website's layout we just have to modify the file `./assets/one.css` and copy it in `./public/` directory either with `one-build`, `one-build-async` or `one-copy-assets-to-public`.

### Modify the CSS style sheet with live reloading

To get the file `./assets/one.css` copied into `./public/` directory each time we modify it we can use entr utility like this (being at the root of our project):

    $ ls assets/one.css | entr -s 'cp assets/one.css public/'

Combined with `browser-sync` live reloading I think we get a decent programmer experience.

### Source blocks

When we use the default render functions and the default CSS style sheet, the org content is exported into HTML strings using `one-ox` org export backend. Consequently, `src-block` elements are highlighted using htmlize.

See one-ox | src-block for more information.