My First Hugo Build

Posted on:

Tagged as: .

It seems fitting that the first post on my shiny new blog should be about the software used to build it.

Why Hugo?

I’ve used WordPress for the last 14 years as the basis for my site, I’ve been toying with the idea that I should try one of these static site generators. I settled on Hugo because it has comprehensive documentation, I did try Eleventy first but even though it’s JavaScript based (Hugo uses Go) I found it more difficult to use.

P Tags in Blog Listings

When displaying a summary, if it’s only a single line of text there is no P tag wrapped around it. I found a snippet on Prevent Markdownify to strip first P tags that formed the basis of the fix for me. This essentially looks for an instance of a P tag, if there isn’t one wrap the whole lot in one.

{{ if in (string .Summary) "<p>" }}
    {{ .Summary }}
{{ else }}
    <p>{{ .Summary }}</p>
{{ end }}

I wanted to pull out the first image on a post as a featured image, yet again I found the Hugo forum useful with a thread about displaying a cover image. I made an addition to their example code to add the blog post link and make the image clickable.

{{ $blog_link := .RelPermalink }}
{{ with .Resources }}
    {{ with .GetMatch "{cover.*,*.jpg,*.png,*.jpeg}" }}
        {{ $cover := .Fill "300x300" }}
        {{ with $cover }}
            <a href="{{$blog_link}}"><img src="{{ .Permalink }}" alt=" " /></a>
        {{ end }}
    {{ end }}
{{ end }}

Moving Tags into the Blog

By default your Hugo site will create the following URL structure:

I’m only using tags in my blog so I wanted /blog/tags. Finding the info to achieve this took a little time.

I added this to my config.toml file. Note that I don’t use categories so did not include it. Setting the [Taxonomies] will override the defaults so if you want to keep your categories be sure to add those too.

  tags = "blog/tags"

Then in your posts front matter your’ll need to put:

blog/tags: [my-tag]

Finally pull out your tags like this, which will give you a comma delimited list of tags:

{{ with (index .Params "blog/tags") }}
    {{ range $i, $e := . }}
        {{ if $i }}, {{ end }}
        <a href="{blog/tags/{{ $e | urlize }}" rel="tag">{{ $e }}</a>
    {{ end }}
{{ end }}