Install and use Zola static site generator

You can download this article in PDF format via the link below to support us.
Download the guide in PDF formatshut down

The Static Website Generator (SSG) is a tool that can generate a complete static HTML website based on raw data and a set of templates. Zola is a tool similar to Hugo, Pelican and Jekyll. It is written in Rust and uses the Tera template engine, which is similar to Jinja2, Django templates, Liquid and Twig. The content is written in CommonMark, which is a strictly defined and highly compatible specification of Markdown. source: Zola website

It should be noted that compared to other sites, static sites are very fast and do not require a database, so they are easy to host. In this guide, we will install and use Zola to create a simple static page. First, we should install it first, and then proceed to create and populate the static site.

Install Zola Apple System on Linux

The Zola team did an excellent job by ensuring that Zola is easily accessible to many distributions and operating systems. We can install Zola on various platforms as follows.

Apple system

If you are using a Mac, you can grab Zola from Brew, so:

brew install zola

Arch Linux

When we inform them that Zola is available in the official Arch Linux repository, devoted Arch Linux users will have something to say. A simple command is sufficient to download and install. Run the following command to complete it.

sudo pacman -S zola

Alpine Linux

For those who like Alpine Linux, Zola is available in the official Alpine Linux repository, only on the edge version. Therefore, you can install it as follows:

apk add zola --repository http://dl-cdn.alpinelinux.org/alpine/edge/community/

Fedora

For all Fedora lovers, you will not be left behind. Since Fedora 29, Zola has been available in the official repository! Grab it in your machine/server like this:

sudo dnf install zola

Void Linux

Fans of the void, this is your time. You will be happy to hear that Zola is available in the official Void Linux repository. Therefore, you will simply install it like any other application:

sudo xbps-install zola

FreeBSD

Nevertheless, FreeBSD is still not forgotten. Zola is available in the official package repository. All FreeBSD users who want to use Zola can install it as easily as running the following command:

pkg install zola

OpenBSD

Moreover, Zola is available in the official package repository of OpenBSD. To install it on the OpenBSD operating system, it is sufficient to run the following command.

doas pkg_add zola

Snapcraft

If for some reason (for example in Ubuntu) you can’t find Zola in any repository, you can use Snap storage. Zola is available on snapcraft, and assuming you have snap installed, you can install Zola as follows:

sudo snap install --edge zola

Use Zola static website generator

Based on the operating system or distribution you are currently using, we believe that Zola is now installed and ready to use. As you might guess, we will immediately get an insight into how Zola works, and we will do this by making a simple website. Through this example, we hope you can more easily build a complete website on this basis. let us begin:

Step 1: Initialize your blog or website

The first step is to initialize your blog or website, because unlike some static website generators, Zola does not make any assumptions about the structure of your website. You will be asked a few questions so that Zola can determine how to order most of the things you need. Initialize your site as shown below. You can replace “computingforgeeksite” with any name you like.

cd ~
zola init computingforgeeksite

After running this command, the following questions will appear

> What is the URL of your site? (https://example.com): //computingforgeeks.com
> Do you want to enable Sass compilation? [Y/n]:
> Do you want to enable syntax highlighting? [y/N]:
> Do you want to build a search index of the content? [y/N]:

Done! Your site was created in /home/vagrant/computingforgeeksite

After answering the questions, you should now have a “computingforgeeksite” directory with the following structure:

├── config.toml
├── content
├── sass
├── static
├── templates
└── themes

To prove that our Zola is working properly, we can use the following command to start the Zola development server:

$ cd ~/computingforgeeksite
$ zola serve -i 172.23.209.227
Building site...
-> Creating 0 pages (0 orphan), 0 sections, and processing 0 images

When you open the browser and enter the ID into the server’s domain name or IP address (http://domain name| IP address: 1111). If your server is in a remote location and you are running a firewall, port 1111 should be allowed. You should see a page similar to the shared page below.

Step 2: Create a sample home page

As mentioned in the introduction section of this guide, Zola uses the Tera template engine, which is similar to Jinja2, Django templates, Liquid, and Twig. We will see how this template engine works here. Let’s navigate to the templates directory and create a basic template that other pages will reuse.

$ cd ~/computingforgeeksite/templates
$ vim base.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>ComputingForGeeks Blog</title>
</head>

<body>
  <section class="section">
    <div class="container">
      {% block content %} {% endblock %} ##This section takes advantage of Tera templating engine. Other pages will be injected here.
    </div>
  </section>
</body>

</html>

The basic template can be extended by other pages, so that the basic page can easily handle repeated parts. Other pages will focus on the specific functions that it is designed to perform. In order to understand how to accomplish this, let’s create an index page that will extend this basic template.

In the same template directory, create an index.html file

{% extends "base.html" %}
{% block content %}
<h1 class="title">
  ComputingForGeeks page extending the base template using Tera templating engine.
</h1>
{% endblock content %}

The text between the {%block content%} and {%endblock content%} tags will be injected into the basic template. At this point, if we start the zola server and visit http://domain name|IP address: 1111, we will see the following page:Zola after adding the index file

Step 3: Add some content

In Zola, there is something called “parts”. Whenever a directory (or subdirectory) in the content directory contains a “_index.md” file, a section is created. If the directory does not contain the _index.md file, no sections will be created, but the Markdown files in the directory will still create pages (called orphaned pages).

Before proceeding, we will create a “site” subdirectory in the content directory, and then create a “_index.md” file in it.

This document tells Zola that “site” is a section, which is how content is categorized in Zola.

mkdir ~/computingforgeeksite/content/site

In the _index.md file, we have the opportunity to pass some variables that can be used in the page. Among them, let us set the following variables in TOML format:

$ cd ~/computingforgeeksite/content/site
$ vim _index.md
+++
title = "Glossary of Geeks blog posts"
sort_by = "date"
template = "site.html"
page_template = "site-page.html"
+++
##Blog Posts Here

Step 4: Create a website template

Now that we have notified the “_index.md” file to find the “site.html” template as the basic template for the Markdown files listed in this section, and load “site-page.html” as the template file for each Markdown website, let us Continue to create these files in the “templates” directory.

$ cd ~/computingforgeeksite/templates
$ nano site.html
{% extends "base.html" %}
{% block content %}
<h1 class="title">
  {{ section.title }}
</h1>
<ul>
  {% for page in section.pages %}
  <li><a href="{{%20page.permalink%20|%20safe%20}}">{{ page.title }}</a></li>
  {% endfor %}
</ul>
{% endblock content %}

site.html extends base.html, but this time we use this template to list blog posts. The title we set in the above _index.md file can be used as {{section.title}}. In the list below the title, we cycle through all the pages in this section (site directory) and use {{page.title}} and {{page.permalink | security}}.

At this point, when we start the zola server and point the browser to http://domain name|IP address:1111/site, we should see the following title:Zola markdown with title

Step 5: Create Markdown content

The pages we will load in the partition area are in markdown format, and they should be located in the “site” directory. In the site directory, create a file named blog1.md with the following content:

$ cd ~/computingforgeeksite/content/site
$ nano blog1.md
+++
title = "My first web page"
date = 2021-04-18
+++

This is my first blog post for computing for geeks.

The title and date will be provided to us in the form of {{page.title}} and {{page.date}} in the site-page.html template. All the text below the concluding remark +++ will be provided to us in the form of {{page.content}}.

At this point, when starting the zola server and pointing the browser to http://domain name| IP address: 1111/site, we should see the title and the title of the first markdown file as a hyperlink, as shown below:Zola markdown with hyperlink

Let’s add the site-page.html file in the same location

{% extends "base.html" %}
{% block content %}
<h1 class="title">
  {{ page.title }}
</h1>
<p class="subtitle"><strong>{{ page.date }}</strong></p>
{{ page.content | safe }}
{% endblock content %}

After adding this template, we can start the zola server, and when we point the browser to http://domain name|IP address:1111/site/bolg1, we should see the entire markdown file content, as shown below:Zola the entire price reduction content

Step 6: Deploy the ready files

After finishing the styling and tuning or blog setting, it’s time to show it to your friends. The Zola server can be used to build your site via the “zola build” command. This command creates a site in the public/ folder, and you can easily copy it to a web server, Vercel, Netlify, GitHub Pages, etc.

This is the final file structure of this example.

├── config.toml
├── content/
│   └── blog/
│       ├── _index.md
│       └── blog1.md
├── sass/
├── static/
├── templates/
│   ├── base.html
│   ├── site-page.html
│   ├── site.html
│   └── index.html
└── themes/

Concluding remarks

That’s just the tip of the iceberg about Zola. It comes with many things, such as themes, integration with CSS frameworks and so on.You can find more information about Zola in it Main page When you are ready to proficiently use this excellent static site generator.

You can download this article in PDF format via the link below to support us.
Download the guide in PDF formatshut down

Sidebar