Customising my Hugo Theme

Planted January 30, 2023
Last tended to on September 11, 2023
Reading time: 3 minutes
Tags: #hugo #web-dev

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.

{{ if .Date }}
    <p class="text-sm text-slate-500 !mb-8"> Planted {{ $date }}
		{{ if ne $lastmod $date}}
			<br/> Last tended to on {{ .Lastmod.Format "January 2, 2006" }}
        {{ end }}
	</p>
{{ end }}

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.

{{ if gt .ReadingTime 1 }}
    {{ .Scratch.Set "readingTime" "minutes" }}
{{ else }}
    {{ .Scratch.Set "readingTime" "minute" }}
{{ end }}
Reading time: {{ .ReadingTime }} {{ .Scratch.Get "readingTime" }}

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.

<br/> Tags:
{{ with .Param "tags" }}
    {{ range $index, $tag := (. | sort) }} 
        {{ with $.Site.GetPage (printf "/%s/%s" "tags" $tag) }}
            <a href="{{ .Permalink }}">#{{ $tag | urlize }}</a>
        {{ end }}
    {{ end }}
{{ end }}

rel-me verifcation

Modified the social icons sidebar code to include rel=me. Used for verification on Mastodon.

<li>
    <a class="px-2 py-1.5 rounded-md text-sm block text-slate-800 dark:text-slate-50 {{ if eq (.URL|absURL) $permalink }} bg-slate-800 text-white dark: {{ else }} hover:bg-slate-200 dark:hover:bg-slate-700 {{ end }}"
    href="{{ .URL }}" target="_blank" rel="noopener noreferrer me">
...

404 page copy

Added some copy to the 404 page as it 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.

If you liked this post, consider buying me a coffee to show your support! ☕