Static Site Generation in one or two hours with Hugo or Zola

In the last few days I’ve been thinking about creating a simple single-page site, to use as a digital business card, containing all the links to the social media I use regularly.

My only requirement was to be able to complete the work in the shortest time possible (around 1/2 hours). So I thought about using a static site generator. I’m a Rust developer but recently I’ve also started to appreciate the simplicity of the Go language.

So I looked for SSGs written in these two languages ​​and among all, the choice fell between the two most popular at the moment: Hugo and Zola.

First Attempt — Zola

Zola info from Jamstack

As I said before, I’m a Rust developer and I love it. So I chose Zola as my first attempt to create my first site. Let’s start by saying that the documentation on the official website is very well written. At the time of writing, the most recent version of Zola is 0.17.2 released on March 19, 2023. All the most common installation methods are available including the option to compile the source code on your machine. I therefore opted for the latter option, given the simplicity with Cargo of compiling everything in just a moment. The installation went smoothly and after a few minutes Zola was up and running on my machine.

Once the installation is complete you can create your own site with a simple command.

$ zola init myblog

You will be asked a few questions.

> What is the URL of your site? (https://example.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]:

I accepted the default settings since I didn’t have any special needs, after which I started the development server.

$ cd myblog
$ zola serve
Building site...
Checking all internal links with anchors.
> Successfully checked 0 internal link(s) with anchors.
-> Creating 0 pages (0 orphan) and 0 sections
Done in 13ms.

Listening for changes in .../myblog/{config.toml,content,sass,static,templates}
Press Ctrl+C to stop

Web server is available at http://127.0.0.1:1111

Once I had a site up and running, I skipped the content creation part to go straight to installing a theme in order to speed up the creation of the site as much as possible.There are various themes to start from, although I must admit that they didn’t impress me in terms of quality. The vast majority also appear to have not been updated for 2 or 3 years. This prompted me to simply clone the theme instead of using it as a submodule, as I wouldn’t expect updates from the repository owner.

I then tried two or three themes following the instructions and the installation worked. I then wanted to make some changes by overwriting some parts of the theme as described in the site guides. The problem is that in order to make these changes you have to specify the block you want to overwrite, and all the themes I tried had almost all the code outside these blocks, thus making my attempts useless. Furthermore, the parameters that could be modified from the toml file were few, so once I found the theme I liked I had to work directly on its code to obtain some results.

Once I had something presentable, I tried uploading everything to github and using an action to publish the site directly to github pages. The site has a ready-to-use yaml file but it failed, returning a hard-to-read error. Not wanting to waste any more time, I published the html in the repo docs folder so github pages will be able to publish the contents of that folder. In this case everything worked and the result can be seen at the following link:

Ciao!

Second Attempt — Hugo

Hugo info from Jamstack

After creating the first site with Zola, I chose to do the same thing with Hugo. Again the site has a very well written guide. Wanting to further speed up the creation of the site, I preferred to avoid compiling from source. I then tried to install Hugo via the package manager but I discovered that the installed version was much older than the current release (despite Fedora almost always having recent packages). I then chose the laziest option by installing via snap.

The installation completed without a hitch, after which following the guide it was possible to create the site with a few simple commands

hugo new site quickstart
cd quickstart
git init
hugo server

Once I had a basic site working, I started looking for a theme to install, as similar as possible to the one created with Zola. Also in this case it is possible to clone the theme or import it as a submodule so as to remain updated in case of changes by the original repository.

In my very humble opinion, the set of themes offered by Hugo is definitely better than what Zola offers. Even though I had already found the perfect theme for my project, I still tried using others to verify that they all had more or less the same flexibility in terms of editable parameters.

The other thing I noticed is that on average all themes appear to receive frequent updates, which led me to choose to use the theme as a submodule. Theme installation was easy with all the themes tested. I didn’t even need to create templates or anything else because all the themes had a wide range of parameters that could be modified via the toml file, so after a few quick changes the site was ready to be published.

This time too I tried using github actions to speed up publishing on github pages. The first attempt was almost successful, with the exception of my avatar not loading. In this case it wasn’t the site’s fault but the image path that needed to be corrected. Once the modification was loaded, after a few seconds the site was ready to be viewed at the following link:

DeidLab

Going further

If you want to go into more detail, you should also analyze how both behave if you want to create your own themes and add pages, posts and other content. At a quick glance it would seem that Zola has greater flexibility and ease of use due to the template engine it uses, as well as a greater execution speed (although hardly appreciable). On the other hand, Hugo seems to offer better multilingual support and overriding pre-existing themes.

However, as mentioned at the beginning of this article, my intent was to get my single page site as quickly as possible, and from what I could see, Hugo proved to be the closest to my needs.