Customising my Hugo Theme
My Hugo website uses the Digital Garden Hugo theme but I've made a few changes in addition to using the theme. I've listed these changes below both for myself to refer back to and for anyone else that might find these useful to include in their own Hugo website 👇🏽
Updating lastmod text
One of the first changes I made was to change the lastmod front matter text that was displayed on the theme. Previously it would default to showing Pruned January 2, 2023 on articles with the lastmod front matter. After my change to the article single layout it now instead shows Last tended to on January 2, 2023.
Google Analytics
Adding Google Analytics to the site is pretty simple as it's natively supported by the theme I'm using. Within the config.toml file, you just need to add the Google Analytics tracking ID in the format, "googleAnalytics = 'TRAKCING_CODE_HERE'".
One issue I noticed with this was the fact analytics data would be pinged back to Google Analytics while I worked on the website locally on my own machine.
To fix this, I replaced the config.toml file stored in the root of the repository with a config folder and then split the config.toml file into two files, a default file that contained all the config settings for the site, and a production config.toml file that contains only the Google Analytics tracking code.
Now when I work on new things for the website I run the command hugo server --environment development -D, which loads only the default config file. When re-building the website, I use the hugo command takes both config files and merges them together to build the production website, thus resolving the issue of generating accidently analytics data during testing and development.
Additional Article Front Matter
I ended up adding a few new improvements to the article front matter.
Article read time
Added a read time for articles. This is automatically generated and listed for each article item. This is based on the code found here.
Tags
I wanted to be able to nagivate my site articles by tags, so I've added tags to each article and updated the autogenerated tags page (was previously blank) as well. The code from the tags page is currently just copied from the theme's portfolio layout. It's not perfect but it works for now.
rel-me verifcation
Modified the social icons sidebar code to include rel=me. Used for verification on Mastodon.
404 page copy
Added some copy to the 404 page (was previously a blank page).
Buy me a coffee widget
Added a buy me a coffee widget to each article page by creating a new partial shortcode.