As per the age-old tradition, this first post on my new blog will be all about how I built this blog[1]. It's become the neo-blogger Hello, World!.
Right up front, I'm very happy to say that I've been able to achieve a few important goals with this site.
This blog has been built using Zola, which I've found to be fantastic. In short, Zola is a high performance static site generator which basically converts markdown files to html with a little styling via CSS, and it does not use any server or database. This makes the pages very fast to load. And posts can be written in my favourite text editor, then commited and pushed to a remote git repo and the site will re-build automatically. No needing to log on to some web portal and wrangle posts there. So nice and so simple.
While the documentation is good, it's not great. But it is certainly good enough to get going and get something built. The marginal documentation is greatly aided by the fact that Zola is very simple to use, is straightforward and logical - even for a non web person like myself.
Zola is a very simple to use and feature rich (for what I wanted) blogging engine / framework, that by default comes with an only minimal feature set being activated. I like that. The development experience is also very nice, allowing for local hot re-loading which means I can make edits in a template or post, save it and the pages will hot-reload so I can see the changes right away. And that reloading is fast, taking about one second at most. Very nice.
I haven't used a theme at all for this blog, but I've been able to get it looking just how I wanted. As mentioned above, there is no javascript and only minimal styling (css / sass). Here is a list of the main features of note:
Pretty basic and simple stuff I guess, but I did do it all manually, using the tooling that Zola provides but implemented just how I wanted. And there is no cruft bloat that I don't want that would come with a pre-built theme, or some other heavier blogging framework.
I'm now going to walk through the main steps I used to create this blog, but won't replicate the Zola docs, focusing on the more unique configurations I've done. To get started, I do recommend this Zola overview page, as well as this blog post which I used to get me up and running. I won't repeat what those two resouces already provide.
The colours were relatively easy to configure, once I worked out how the sass files work, which basically translates into CSS (which I do not know at all). All styling configuration was done in a single sass file, at sass/extra.sass. A single line is also added to the templates/base.html file in the <head> section, as per the two previously linked starter resources.
I used this excellent Rose Pine colour resource to grab just the right colours.
I configured the colours for the background, text, links (including normal, when hovered and when visited), header 2s and header 3s. I don't typically use headers beyond 3 so didn't set them up. Together, those are the only areas needing to have colour configured, so far at least.
Here is the sass/extra.sass configuration showing just the parts containing the colour details.
$bg: #191724
$cl: #e0def4
$h2-col: #9ccfd8
$h3-col: #f6c177
$lc: #ebbcba
$lc-hover: #ea9a97
$lc-visited: #d7827e
body
color: $cl
background-color: $bg
h2
color: $h2-col
h3
color: $h3-col
a
color: $lc
a:hover
color: $lc-hover
a:visited
color: $lc-visited
I've recently realised, via going twice through this great site, that my favourite font is Red Hat Mono. It wasn't even on my radar but after going through that linked site twice (the site is highly recommended btw), Red Hat Mono won both times. Confirmed. I've since made Red Hat Mono my terminal and text editor font of choice and I am really enjoying it. So, I of course wanted to make Red Hat Text my font for this blog.
Configuring the font for this blog was actually quite easy, once I learnt how to do it. All it required was two things:
extra.sass file.Here is how that was done.
Add the following link into the templates/base.html page.
< link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Red+Hat+Text&display=swap" >
Yes, this calls out to a google API, but I'm not aware of a better way to include external fonts for my site.
And then set the font in the sass file, like this.
$font-stack: 'Red Hat Text', sans-serif
body
font: 100% $font-stack
And just like that, I had the blog using the colours I wanted, and the font I wanted. This was a big way towards my end goals for how I wanted the blog to look.
First, we'll briefly walk through how I setup the reading time handy indicator that appears at the top of each post.
Turns out, this was very easy to configure as it is a built-in part of Zola. The reading time data is already collected and provided as a variable in Zola, which is just nice. Then, it is easy to access in the templates/blog-pages.html template.
Just between the page.title and page.content sections, I added the following section. Note the use of the reading time as a variable, emoji and utilising markdown in the html.
<small>
{{ ':hourglass:' | markdown(inline=true) }} Reading time: {{ page.reading_time }} min
</small>
And next, we'll now look at how I setup the tags, which again is a built-in part of Zola which just requires some setup. Setting up tags takes a bit more setting up than reading time. In my case, I wanted to visually show them in posts, so thinking of how I wanted this to occur, where on the page, and how they should look all took some thinking too.
This takes a few steps. Taxonomies needs to be turned on in the config.toml file. Here are the relevant sections.
taxonomies = [
{name = "tags", feed = true, paginate_by = 10},
]
[slugify]
paths = "on"
taxonomies = "on"
Adding tags to posts in the metadata section needs to occur. Note the need for the [taxonomies] header within this section.
+++
title = "Example post"
date = 2025-10-27
[taxonomies]
tags = ["first", "second"]
+++
Adding the code to visually show the tags, if a post has tags, needs to be added to the templates/blog-pages.html file. Insert it where in the page you want it to appear, like at the top or bottom of posts. There are a few cool things going on here which shows some of the nice features of Zola. Note again the use of variables as well as emojis and use of markdown. Also, the top section {% if page.taxonomies.tags %} will mean the rest of this section will only render if there is at least one tag for a post. Yes, it is an if statement. But wait, there's more. Further down, there is a for statement. Yes, it works just like any other for statement in any programming language. It's working through the full list of tags in this case. Very nice.
<small>
{% if page.taxonomies.tags %}
{{ ':pushpin:' | markdown(inline=true) }}
Post tags:
{% set ptags = page.taxonomies.tags %}
{% for tag in ptags %}
<a href="/tags/{{ tag | slugify }}">{{ tag }}</a>
{% endfor %}
{% endif %}
</small>
Setting up templates for tags, both as a collective and individually also needs to occur. These both go in the templates/tags/ directory in a single.html and list.html file respectively.
Here is the templates/tags/list.html file contents.
{% extends "base.html" %}
{% block content %}
<h1>All Tags</h1>
<ul>
{% for term in terms %}
<li><a href="{{ term.permalink | safe }}">{{ term.name }}</a> ({{ term.page_count }})</li>
{% endfor %}
</ul>
{% endblock content %}
And the templates/tags/single.html file contents.
{% extends "base.html" %}
{% block content %}
<h1>Tag: {{ term.name }}</h1>
<ul>
{% for page in term.pages %}
<li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
{% endblock content %}
And that about does it for implementing tags. There is a bit to do there. On my todo list is to write a template file for how to display the tag pages, both for listing all of the tags, and for listing all posts for one selected tag. It won't take too long, I'll get to it.
Setting up the navigation in the header actually took me the most time as it was the first time trying to do something like this, and I couldn't get it doing what I wanted it to do. A lot of time was spent thinking about how I wanted navigation to work. A lot of examples and themes use things like icons for branding or use javascript which I didn't want to do. I also initially wanted to have the navigation at the top right of the page, but later went simpler to having it just at the top left. I think its overall a quite clean and simple approach.
Besides adding the links in the templates/base.html file, some minor styling was added to the sass/extra.sass file as follows.
nav ul li
display: inline-block
margin-right: 10px
The inline-block was used to get the horizontal layout of the links, and the margin gives the spacing.
Once I worked out how to configure the footer (like where in the html templates things need to go), it was just a matter of deciding what I wanted to be in the footer, and how I wanted it to look. Overall, I'm pretty happy with how it turned out. What was included is fairly self explanatory. I added the footer in the templates/base.html page under the <body> section.
Setting up the RSS feed was pretty easy, but was something that was important to me, being a huge RSS user to this day. There is a lot to say about RSS, and I'll probably give it a full post at some point. But for right now, we'll stick to how setting up the RSS feed is done in Zola. All that was required was to turn on the feed in the config.toml like the following:
generate_feeds = true
Beyond this, the Zola docs for feeds does a good job of explaining a couple of the other considerations.
I then added the link to the feed in the footer.
Now we'll walk through the steps to get this blog up on the public internet. I use Github as the upstream git repo, and host this blog on Cloudflare Pages. Let's briefly walk through the steps required.
First, create a git repo on Github if this isn't already done.
Then, init git in your local zola directory. Make sure you have git setup locally and have ssh keys in your github profile. Then:
git init
git add .
git commit -m "Initial zola site"
git branch -M main
git remote add origin https://github.com/adenoz/adenoz-blog.git
git push -u origin main
We'll now get this blog on the net! The zola docs for using cloudflare are pretty good. It's a pretty simple process.
The main thing to note is that your first build will probably fail. You will need to go into your project settings and change the Version from 3 to 1. While my local version of Zola is 0.21.0, the site would fail to build. But changing the cloudflare build setting ZOLA_VERSION environment variable to 0.19.2 (as per this github issue) did result in a successful build 🎆.
Setting up the custom domain in cloudflare took all of about two clicks. The option to setup a custom domain is right there between the Deployments and Settings tabs in the Workders & Pages section of Cloudflare. Well, it is that easy if your domain is registered with Cloudflare.
Don't forget to change the domain in the config.toml file. And then it's done! Now you can push updates to main and your site will automatically update. Nice.
And that just about wraps up this first post of the adenoz blog. I haven't covered every single detail, but have covered off on the main things. Overall, I'm very happy with the development experience of using Zola to build this blog, and I'm happy with where I've gotten it to. In case anyone has read down this far, it may be of interest to know I was doing the editing in the Helix text editor, using Fedora linux on the new Cosmic desktop envionment. Now that the blog is all built, I guess it's time for me to start using it!
If you have any questions about anything here, feel free to get in touch. Details can be found at the Contact page.
Well, maybe not that old. When researching things while building this blog, I found examples like this one, which also linked to this one from 2018. ↩