Creating this blog

Dave

As is tradition, I will use the first post of my new blog to briefly describe how I set it up.

Choosing a framework and theme

Since I'm planning to make 2024 the year of Rust, I wanted to use a static site generator written in Rust, and Zola seemed to be the best choice. I wanted to find a theme that used the CSS framework Bulma, which offers the right level of customization for something like this. I found DeepThought, which had the high level features I wanted and seemed well-organized. However, I thought the design was a little too busy; I wanted a simpler, flatter style, so I started hacking away at the sass/css and Tera templates until I got something I liked well enough.

The templates were relatively easy to understand; they're very similar to jinja templates in Python. I hadn't worked with sass before, so that took some exploration and consultation with ChatGPT at times.

It was mostly a good experience, although I think there may be an issue with next/previous page directions in Zola.

Styling

I got rid of the 3D box shadows on each post, instead adding a backlight effect to each flat item on hover. I went with a grayscale palette with just a couple of colors, adding a brown for icons and table of contents highlighting to complement the dark blue used for links. Adobe offers a nice tool for selecting color palettes. The framework by default includes a search function, but since it's a static site, this is done by pushing a large javascript file with all the sites indexed content to the browser. That seemed heavy, and google site searches are probably good enough. Fully removing it was not as easy as just setting the build_search_index = false however; the search icon was hard coded into the navbar within the base.html template. So I had to remove that, but doing so broke the site.js including the dark mode toggle. So I had to remove all the javascript related to search before it worked properly.

One issue I couldn't figure out was how to get the DeepThought navbar to have a fixed position at the top. As I described in this github issue, it seems to work in light mode but not dark mode, and that happened even on the out-of-the-box DeepThought content. Hopefully that can be resolved.

I'm still not sold on the colors, particularly for the links; I tried a blue with lower saturation, but it became harder to distinguish the links. I also don't know that I like the DeepThought theme's default behavior of turning hovered links back to the plain text color, so I may revisit the styling later.

One note is that while you can extend a theme by replacing its templates, once you start modifying the sass/css, it appears you no longer want to work with it within the theme directory. In other words, just move the files from the theme directory into the root level equivalents.

Deployment

I had initially deployed to github pages with a different theme using shalzz's github action, and that worked pretty well (zola 0.17.2 had some issues, but 0.18.0 worked), but when I updated to using my own theme, the build failed silently. Cloudflare pages offer a better free tier with Zola support and free, privacy-first analytics, although I found I needed to change the build system back to v1 for it to work.

One odd part of the process is that you have little say in the name of the subdomain from cloudflare. They automatically assign the name of the repo as the project name. I think there was an opportunity to edit the project name, but it was not obvious. So my repo name was blog and I was assigned blog-eng as the subdomain. That's not the worst subdomain, but I would have appreciated having a choice.

Update: I was able to get the github actions to work for github.io. Although I think Cloudflare has the nicer free tier, I'll stick with github.io for now.