Intro

As part of YouTuber Techno Tim's 100 Days of Homelab challenge, all homelabbers must work on/in their lab for 1 hour a day for the next 100 days. Each day, progress is supposed to be shared on social media. Unfortunately (for this challenge, I think it's healthy for me overall) I don't have many socials, including the certain website with the blue bird and a future technoking. To compensate for this, instead I figured it would be a good reason to get my blog set up once more and commit to using it for the challenge. Each day can be a new post that documents my successes, failures, or just maintenance and research.

My setup

A few years back I'd set up a hugo blog using this wonderful post, but coming back to it now I wasn't happy with the theme I had chosen then.

Choosing a theme

For my static site, I ended up browsing through Jekyll, Hugo, and Zola and picking the whichever one provided me my favourite theme. TechnoTim has a great video covering how to use Jekyll and the theme he chose, but my theme needs to be different because I'm stubborn and need everyone to know I'm unique.

My main selection criteria boiled down to:

  • The functionality of TechnoTim's theme:
    • Tagging
    • Archives
    • Posts in a clear easy-to-read order
  • A pretty UI with a good dark theme
  • Something that would help me get it into Gitlab or Github pages if it wasn't Jekyll.

After spending a good chunk of time spelunking through the available themes, I narrowed it down to:

I ended up chosing Anatole-Zola. Mostly because of its out of the box functionality on its demo, and that Zola is written in Rust. As any programmer knows, when something is written in unoptimized Rust it becomes 10000% faster than anything written in any other language ever.

Getting Zola started

Zola has excellent documentation, so I'm going to avoid duplicating it. But the process in short is:

  • Install Zola (does not install through cargo, you'll need to use homebrew, AUR, whatever to install it)
  • Generate a new site $ zola init myblog

Installing the theme

Next, it's easiest to jump straight into installing the theme. The overview section has a walkthrough to help you figure out how everything ends up where it will be, but any content you generate in that walkthrough won't be used for setting up the site with this theme. However, I certainly would've benefited from studying it more.

To install the theme, just clone the theme repo into your 'themes' folder

$ cd myblog
$ git clone https://github.com/longfangsong/anatole-zola.git

and then, if you've been using the theme page as your guide up to this point, I'd recommend swapping to the theme repo's readme instead. As of writing this, the repo's readme is more up to date, and has slightly more useful instructions.

Following the instructions of the readme: copy the about, archive, links, and _index.md folder/files from the theme's content directory and put it in your own. Stealing a post is probably a good idea as well, just to make your initial site feel less empty, but this is more optional.

Configuring the theme/site

At this point, running $ zola serve won't run your site just yet. Below are the config options you'll need in order to run the site as provided.

Into your config.toml, you're going to want to insert:

theme = "anatole-zola"
default_language = "en"

[languages.en.translations]
about = "About"
home = "Home"
tags = "Tags"
archive = "Archive"
links = "Links"
next_page = "Next Page"
last_page = "Last Page"
date_format = "%Y-%m-%d"

and at this point the zola serve command should provide you the template website. It's very possible I missed a step, as I'm mostly refrencing git commits and how I've been setting this up the last few days. Should zola refuse to serve content, the error messages are verbose and the documentation (using the repo readme, not the theme web-page readme), should be enough to help one troubleshoot.

Customizations

Below are the customizations I added in

# Generate RSS feed
generate_feed = true

# Enable tags
taxonomies = [
    {name = "tags"},
]

[extra.social]
github = "Spooky-Kabuki"

[extra]
# Put all your custom variables here
mode = "dark"
title = "Spooky Kabuki Labs"
description = "Rantings about homelabbing, embedded software, and more"

Because of what I think is a bug in Zola and my inability to figure out how to configure my file properly, the title and description don't pop up on the site by default. To fix this, I added in the 'title' and 'description' fields as show above and then replaced instances in base.html of 'config.title' with 'config.extra.title' and 'config.description' with 'config.extra.description'.

<div class="description">
  <p>{{ config.extra.description }}</p>
</div>

From what I understand, something about having translations in your project will have Zola no longer display your title or description by calling the standard config.title. I think there's a way to configure it properly since the Github issues surrounding this have been closed, but I've not been able to properly figure out exactly how that works. And this fix is easy for now.

Additionally, I stripped out the 'weibo' sharing option on my posts in page.html and swapped out the favicon image with some icon art of a server (credited in the Links tab).

Deployment

Once my site was good enough, I committed everything and pushed it to github. The next decision was to choose a host. I'm familiar with Gitlab pages, but I don't use gitlab much these days and so was looking to try out a different provider. I've heard good things about github pages, but when looking at the documentation Zola provides on getting the site setup, I noticed that Cloudflare Pages was an option. This piqued my interest, as I've been using Cloudflare as my DNS host and having that work with my static site would be interesting.

Once again, excellent documentation exists for this, so I'll avoid duplication.

But the gist of it is:

  • On your cloudflare dashboard, go to the pages tab and create a new project
  • Link your github/gitlab account
  • Select your repo from the drop down option
  • If you're using the provided url cloudflare gives you (yoursiterepo.pages.dev):
    • Realize you don't like your repo name as a url
    • Create a new repo with a better name
    • Select that from the drop down option
  • Otherwise, you can configure your domain to point to this url later.
  • Select the branch you want built
  • Set your environment variable ZOLA_VERSION to 0.14.0, as CF doesn't support a newer version as of writing this (their documentation calls this out).
  • Finish setup

At this point, your site should be accessible at yoursiterepo.pages.dev.

To add your custom domain, go to the custom domains tab and there should be a wizard that pops up. Follow through the wizard, and if you're using a cloudflare managed domain, they'll create the DNS records necessary to route your custom domain to your site. Otherwise I imagine they'll instruct you to then create a CNAME record that points yoursite.com to yoursiterepo.pages.dev. NOTE: You cannot skip the wizard. Likely to verify your domain ownership, cloudflare requires you to use the wizard to setup your custom domain before you can have your CNAME record recognized by cloudflare.

And voila. Cloudflare will now serve your 'beautiful' static blog on your own domain.

Conclusion

Overall, now that I have this site, I think Zola and CF Pages will be a combo that I'll continue to use well into the future. It seems very robust, the setup isn't too bad, and once you're going the development is easy. Being able to focus on writing posts now will be a major plus, and I can care for the various aspects of my lab I've been neglecting this week while setting this up. Later in this 100 day challenge, I'd like to get a full CI/CD pipeline established to help promote future development on my site.