Building a Food Blog with Hugo

I have recently started a food blog with a focus on the carbon footprint of recipes - you can find it at klimafreundlicher-kochen.de in German. This article here is a kind-of colophon for the website.

The idea of the food blog is relatively simple: I wanted to publish a series of recipes, estimate the climate impact of each recipe and compare them among each other and with a few recipe classics like pasta with Bolognese sauce.

How it started #

Spinning up a Wordpress site was my first intuition: I had built some smaller blogs via wordpress.com since 2007 and had the impression that it makes publishing things on the internet really easy.

My list of requirements was pretty simple: A simple theme, a way of showing recipes and making them easily findable in search engines, some option for visualizing the carbon footprint of each ingredient, some simple tables, a solution for using post templates for the recipes, nice URLs for search engines, and a way of creating regular backups. Nothing fancy, but it turned out to be surprisingly difficult to have all of this in Wordpress.

The Wordpress blog itself was up and running very fast, but when I started to build all the scaffolding for the requirements above, I started to grow frustrated quite quickly: Basically everything required a new plugin. SEO? Sure, with an extra plugin. Data visualization? Really tricky - there are plugins, but hardly any were properly maintained or used by more than 20 sites. Simple tables? Depending on the theme - some more, some less. Post templates? Need an extra plugin. Customizing the URL structure? Only possible via a plugin. In the end, the only requirement from my list that was not causing issues was having a simple theme - but this is also possible with a lot of other solutions. Regular backup? Extra Plugin.

I was really surprised that there was no real good solution for data visualization: There are plenty of visualization libraries out there like chart.js, Highcharts or even d3.js, which exists like a decade and is used professionally by many organizations - however, there is either no Wordpress integration or if it exists, it was last updated about two years ago and has only a handful of users…

In essence, every requirement I had added a new plugin to the list. Pretty soon, I had a blog with five posts and three pages where the backup was 70MB large. The user interface started feeling cluttered and clunky, with every plugin adding something to it. Solutions felt either under-engineered (please let me have a draft template for my posts that I can re-use easily) or massively over-engineered (no, I do not want to measure the keyword density for my SEO every time I save a draft). I started to write a step-by-step list for creating new recipe posts and it felt like work: Many steps, many of them manual.

How it’s going #

This was nagging me for a few weeks until I decided to start over with Hugo. Before, I had mainly used Hugo for building small pages like this one, but never for a full-fledged blog for a wide audience. One issue that I had noticed in the past were the themes: While there are many themes in general, many of them look relatively technical or are not built for sites with a lot of content. It took me a while to find the excellent Congo theme that had been published just a few months prior by James Panther. It uses Tailwind CSS, looks very fresh and modern, and comes with a ton of features (like direct chart.js integration!). I really liked it out of the box and made a few small adjustments to tweak it further to my needs:

• a recipe schema for properly indexing the recipes at search engines
• a custom color scheme and a few small layout changes
• privacy-friendly web analytics via Matomo (instead of Google Analytics); the theme already comes with a placeholder for other web analytics providers
• a custom page template that automatically sorts all recipes by their carbon footprint (see here)
• a custom shortcode that shows a couple of pictures in a masonry grid
• custom taxonomies that allow to use different tags for recipe categories and ingredients (e.g. “vegetarian” vs. “potatoes”).

I have little experience with Hugo, Go, or web development in general, so this took me a few evenings and Sunday afternoons with a lot of try and error. However, I was pretty motivated when I used a long train ride to build a recipe post exactly how I liked it, with a nice integrated data visualization instead of those clunky Google Chart iFrame integrations that I had used in Wordpress before. My new publishing workflow is now actually focused on publishing instead of navigating the ideosincracies of three different Wordpress plugins.

If you are interested in the blog, please check it out at klimafreundlicher-kochen.de (in German). It currently has more than 20 recipes and I’m regularly adding new ones - so I’m sure that you will find something that you will like!