jorge serve
Browse the site locally
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.html
wrote target/blog/hello-org.html
wrote target/index.html
wrote target/blog/index.html
wrote target/blog/tags.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:
- 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. - The rest of the file contents will be rendered according to the liquid template syntax.
- 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.