jorge serve

Now that you have some default files in place, let’s see how the website looks. Run jorge serve on the project directory:

$ cd myblog
$ jorge serve
building site
wrote target/feed.xml
wrote target/blog/goodbye-markdown/index.html
wrote target/blog/hello-org/index/.html
wrote target/index.html
wrote target/blog/index.html
wrote target/blog/tags/index.html
done
serving at http://localhost:4001

As you can see, jorge reads the files located in your src/ directory and replicates them (with a few changes) at the target/ one. Open your browser at http://localhost:4001 you’ll see the website you just created.

Now open src/index.html in your editor. You should see something roughly matching what the browser displayed:

---
layout: default
---
<h2><a href="#about" class="title" id="about">About</a></h2>
<p>Welcome to {{ site.config.name }} by {{ site.config.author }}.</p>
<br/>

...

This file is a liquid template for an HTML file. jorge treats any file inside src/ that begins with --- as a template, regardless of its extension. This means that:

1. The contents of the --- header (called front matter by site generators like Jekyll and Hugo) will be parsed as YAML and interpreted as page metadata.
2. The rest of the file contents will be rendered according to the liquid template syntax.
3. If it’s an org-mode or markdown file, its contents will be converted to their corresponding HTML in the target.

In the example above, the layout: default instructs jorge to embed the index.html rendered output inside the layout defined at layouts/default.html. And the liquid variables expressed by {{ site.config.name }} and {{ site.config.author }} will be replaced by the values found at config.yml.

If you update the code in src/index.html, you should see your browser tab refresh automatically to show the changes. Try, for instance, changing the title in the first header:

<h2><a href="#home" class="title" id="home">Home sweet home</a></h2>

The new title should show up on the browser page.