A Short Introduction to Zola

2021-01-28 | posted in Blog

What is Zola?

Zola is the software which creates this website. Zola is a ‘static site generator’ (SSG). In its most basic form, this SSG is a function which takes a bunch of markdown files, HTML templates, CSS, and some configuration as its input and which produces a directory of static HTML files (hence the name) which makes up the whole website. The end product can directly be served by any webserver, without the need of any additional software or service, like e.g. a database, a PHP or a Python interpreter. The simplicity of this setup is both the strength and the weakness of this approach. For an introduction to SSGs have a look at this article. The most critical strength of static websites is that they are blazingly fast. Since Zola is written in Rust, the periodic conversion process is also very fast.

Setup of the Zola System

To get a website up and running with Zola we first need to install Zola itself. Since it is released as a single binary, this means we only need to download it and put it somewhere where we can execute it.

Next we need to create all the files which Zola takes as its source material and which are not the actual website posts. Our templates, stylesheets, and configuration files. To get us started, Zola provides us with the handy zola init command. Let’s say the zola binary is in our current working directory and we want to create the skeleton of our soon-to-be blog in a folder named ‘my-blog’, then we could use

./zola init my-blog

This creates the directory ‘my-blog’ and with it a whole bunch of additional subfolders. Zola also includes a basic webserver for testing/development purposes. We start it with:

./zola serve

By default, it then serves our new blog on our local machine on the port 1111. Just visit ‘127.0.0.1:1111’ in your webbrowser to check it out!

However, this does not quite work yet. Firstly, we have not created any posts. And secondly, Zola does not know how to render our posts, because we have not provided any HTML templates and Zola does not include any by default (though this might change in the near future). There are three standard templates which Zola expects to exist at the bare minimum: index.html, section.html, and page.html. The index.html template is used for the starting page, the page.html template renders single posts, and the section.html is used for any collection of posts (like all the entries which are tagged with a certain label). These files should be placed inside the templates/ subfolder. Let’s create a super simple index page:

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
    <h1>It work's!</h1>
    <p>or does it?</p>
</html>

This is enough to have a somewhat working landing page. But it isn’t much of a template, since it is always the same. We will address this shortly, but first let us see how we can deploy our site as it currently is. We have called Zola a static site generator, but as of now, we actually did not “generate” anything. For that, Zola provides the ./zola build command. It will parse all the files we have written and generate a complete website from them which it then places inside the content/ folder. This folder can then be deployed to any location, which allows static files to be served: any web server like Apache or Nginx, or even a public dropbox folder or a github repo.

In the next post, we will have a look at the creation of proper templates and how we can start blogging writing simple markdown.