Learn the syntax basics in 5 minutes: docs.ourbigbook.com/editor.
Play with a OurBigBook template locally:
git clone https://github.com/cirosantilli/ourbigbook-template
cd ourbigbook-template
npm install
npx ourbigbook .
firefox 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/cirosantilli/ourbigbook-template to your own github.com/johndoe/ourbigbook-template and then:
git remote set-url origin git@github.com:johndoe/ourbigbook-template.git
npx ourbigbook --publish
and it should now be visible at: johndoe.github.io/ourbigbook-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/ourbigbook-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:
  • main.liquid.html: global HTML template in Liquid format. Available variables are documented at --template, and it is being selected in that repository with :
    "template": "main.liquid.html"
    in the ourbigbook.json configuration file.
  • 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 main.liquid.html at:
    <link rel="stylesheet" href="{{ root_relpath }}main.css">

Ancestors