Reskinning a Hugo site in less than 10 minutes
Using a TOML configuration file and source control to change and reskin an entire website built with hugo in less than 10 minutes
Static site generators like Hugo are great. They take away so many burdens of running a webiste by generating raw HTML pages from the markdown files you create and enable you to provide content to your users from a file server rather than a server which needs a database and processing power, stuff that normally comes at a cost!
However if you’re like me, and you have zero design skill then you’ll find CSS scary and making a button look right can take hours. So you’re likely to want to go with a theme, and with Hugo’s built in theming engine, it’s super easy to get a theme onto your site, and update it really easily later on if you need to!
At the root of all Hugo sites, there’s a file called config.toml
which is a file used by the theming engine to populate the pages of the site with general content that is used in many places. For example, the first few lines of the TOML file for this site looks like this:
theme = "hugo-future-imperfect-slim"
baseURL = "https://jeanklaas.com/"
languageCode = "en-us"
title = "Jean-Klaas Gunnink"
tag = "tags"
Things like the theme and base url values tell the engine which theme to use and where the homepage of your site is. The title in this case is the value you see in the title bar of the tab.
Each theme uses a TOML file slightly differently, and importantly they’ll provide an example in their repo to demonstrate how you can use the file. When I was going through mine it took a few minutes to understand how everything was laid out and how the values in the TOML file were used. Nonetheless, I was able to update and deploy an entire theme change to my site in less than 10 minutes.
Many of the themes available on the Internet are free, especially those on the Hugo website here: https://themes.gohugo.io/. The free ones are, in my experience so far, pretty awesome. They are open sourced, so if you find any mistakes or have suggestions to improve the content owners and/or managers of the theme are usually pretty receptive to your suggested changes. Just open a PR! Case in point: I found a typo with the duration of reading time for a post and fixed it. The guy who managed it was quick to respond and before I got around to deploying the changes to my site, the fix was already in the system!
Let me know if you’ve been using Hugo, and how you found changing the theme! Look forward to hearing about your experiences!