Play with the template

Learn the syntax basics in 5 minutes: docs.ourbigbook.com/_obb/dist/editor.

First ensure that Node.js is installed in your computer. You should be able to successfully the following command successfully from a terminal:

node --version

Now let's play with an OurBigBook template locally:

git clone https://github.com/ourbigbook/template
cd template
npm install
npx ourbigbook .
firefox _out/html/index.html

That template can be seen rendered live at: cirosantilli.com/ourbigbook-generate-multifile/ Other templates are documented at: --generate.

To publish to GitHub Pages on your repository you can just fork the repository github.com/ourbigbook/template to your own github.com/johndoe/template and then:

git remote set-url origin git@github.com:johndoe/template.git
npx ourbigbook --publish

and it should now be visible at: johndoe.github.io/template

Then, every time you make a change you can publish the new version with:

git add .
git commit --message 'hacked stuff'
ourbigbook --publish .

or equivalently with the -P, --publish-commit <commit-message> shortcut:

ourbigbook --publish-commit 'hacked stuff'

If you want to publish to your root page johndoe.github.io instead of johndoe.github.io/template you need to rename the master branch to dev as mentioned at publish to GitHub pages root page:

git remote set-url origin git@github.com:johndoe/johndoe.github.io.git

# Rename master to dev, and delete the old master.
git checkout -b dev
git push origin dev:dev
git branch -D master
git push --delete origin master

npx ourbigbook --publish

The following files of the template control the global style of the output, and you are free to edit them:

ourbigbook.liquid.html: global HTML template in Liquid format. Available variables are documented at Section "--template"
main.scss: Sass file that gets converted to raw CSS main.css by npx ourbigbook ..
Sass is just much more convenient to write than raw CSS.
That file gets included into the global HTML template inside ourbigbook.liquid.html at:
```
<link rel="stylesheet" href="{{ root_relpath }}main.css">
```

Play with the template

 Ancestors (3)

 Incoming links (5)