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.