Tend To Your Garden
21 Apr 2025
I thought I might make a short blog post outlining both how I made this website and also talking about my week. Both are cases of me "tending to my garden", metaphorically mostly, but actually literally over the Easter bank holiday weekend as I helped my partner get the garden in shape and take the first steps towards what I'm sure will be an abundent tomato harvest.
In the spirit of tending to my garden (metaphorically) I've been trying to move more and get into better habits. I needn't really have put much energy towards trying to form better fitness habits - it turns out gardening is (literally) great exercise. The new Bon Iver album arrived via my post box on Wednesday and I've been very much enjoying "SABLE, fABLE" - as much as it feels like a "goodbye" from one of my favourite artists. A lot of the lyrics are resonating with me, but the one that is hitting me the hardest right now is "that January ain’t the whole world". I'm holding that with me.
I did promise to reveal a little about how I made this website so now I will share. As I have mentioned previously, I am using Zola as a static site generator. The theme is very loosely based on the "Coder" Hugo theme but I've made a LOT of changes to fit my needs. The markdown and configuration is held in a GitHub repository that is hooked up to Cloudflare Pages, so that the site is built whenever I push via Git. It's a nice, clean workflow!
I've tried to make the whole website without any Javascript, both because I don't like writing it and also because I think there's enough features in HTML and CSS that I don't really need it. The mobile navigation "burger menu" uses a cool technique with a toggle and some nice CSS to get it to display as a menu. The only issue with it's current iteration is the icon is made with just unicode characters that kind of look like burger menu icons, I'd like to change those to SVGs at some point.
I really wanted to make sure that any code snippets (such as the one on the Lisdex page) would look nice, without using any Javascript. Luckily a little while ago I found a blog post that discussed using a font file with built-in syntax highlighting. That fit the bill perfectly, and with some help from my (web developer) partner I was able to get the code snippets to scroll on mobile. I had similar issues with tables not scrolling on mobile that I was able to resolve with the same overflow: scroll; statement.
I'm still learning everything that is possible with Zola and one frustration I had was that I couldn't seem to figure out how to print the current year to the page. I settled on setting the year as a variable in a config file that could be read in. Yuck! Just today I was browsing around the Zola documentation when I found a link to the templating engine they were using, Tera, and there I found a snippet to do exactly what I wanted. I realise I would still need to update my website in Zola to keep the year current but ideally I would be updating the website regularly, having this would just be one less thing to remember.
I've also created a new favicon, but I'm quite bad at anything artistic so I had to find some images of cowboy hats and gophers and trace them onto a piece of paper that I then scanned in. I'd like to say it's deliberately bad, rather than just bad.
I don't really have a sign off from this post so for now I will repeat: tend to your garden.