I updated my blog stack for 2019: Zola, responsive web design, and SSL.

The last time I looked at this was about 8 years ago, and it's always fun to experiment with options for generating and hosting content. I did consider if I should just migrate to Github Pages, or Netlify with its CMS, or at least simplify the hosting part by using Amazon Lightsail, S3 with CloudFront, or Cloudflare. But I do like the web to be distributed, and enjoy having my own little corner on a VPS with an actual web server, so I'm sticking with self-hosting for now.

For the content generation, I went from Jekyll to Zola. I had run into some Ruby-related breakage with my Jekyll production pipeline, and while I fixed that, it prompted me to see what other static site generators were out there. I initially looked at Hugo, then Cobalt, and ended up with Zola (previously Gutenberg). It was more an exploratory process rather than a deep evaluation, but the feature table in Zola looked promosing. I like the single binary: it is very fast, code highlighting is built-in without needing plugins. It was not without its learning curve, with regards to its page structure and Tera templating engine. I ran into some macros problems with trying to customise the even theme and ended up just doing my own. I encountered a seeming inconsistency with parsing. I'm unhappy that it produces ugly HTML, with blank lines and over-encoded URLs, which I worked around for now by running tidy afterwards. There is currently no way to keep your URL structure when you have so-called ugly URLs (nothing wrong with .html; get off my lawn), which is a real pain. And I was surprised not to find a official docker image; it's not really needed for a single binary it makes updating trivial. Anyway, I liked Zola enough overall to persevere.

For the web design, I wanted to make it work better on small screens. Previously, the fixed page width caused the page to be displayed zoomed out on a phone, causing the text to become too small to read, forcing you to double-tap zoom on the main content column; I fixed that with a responsive design, and added some HTML5 in the process. I removed the Twitter content, because I don't tweet much, I didn't like the readability of he narrow column, and that content is only a link away anyway. I also got rid of the "green hills" banner image, because it didn't really add much, and wastes vertical space on smaller screens. Similarly the nav bar doesn't always need to occupy space either, and having a popup menu with hamburger button is fairly standard these days. This all doesn't leave the site with much styling beyond the color theme; and I'm okay with that.

I previously used dynamic content loading, using jQuery to modify the page main content block rather than reloading the whole page. That was fast (and cute), but in practice didn't make all that much difference to speeds. I either needed to update jQuery, replace it with some other library or plain JavaScript, or remove it. Given the simplification of the pages, I I simply took it out for now.

I reviewed my old blog posts to combat link rot, as reported by linkchecker. Then there is the usual Web page speed test, HTML validator, CSS validator, running tidy and things look good.

Next, HTTPS. I used Let's Encrypt with dehydrated, using Mythic Beast's integration for the DNS-01 challenge. I ran into a dehydrated issue but that was quickly fixed, "Yay!" for bash. With this Apache SSL config, some HTTP→HTTPS redirects and the HTTP Strict Transport Security header added and CCA applied, SSL Labs gives an A+.