Related content, previous and next posts, adding comments, building email lists, and adding the year to the URL string

1. Related content

Hugo documentation defines how it determines which pages are relevant.

Open and edit config.toml adding

[related]
    includeNewer = true
    threshold = 0
    toLower = false
[[related.indices]]
    name = 'keywords'
    weight = 100
[[related.indices]]
    name = 'date'
    weight = 10

In the top level configuration options, setting the ’threshold’ value to zero always means some content is displayed. Setting the ‘includeNewer’ to true means newer content that the current post will be displayed.

Now we need to create some ‘small postcards’ to display the related content.

Create layouts/partials/widgets/postcardsmall.html and add

{{ $featuredImageUrl := .Params.featuredimageurl }}
{{ $featuredAltText := .Params.featuredimagealttext }}
{{ $permalink := .Permalink }}
<div class="card">
    <div class="card-image">
        <figure class="image is-3by2">
            {{ with .Params.featuredimageurl }}
            <a href="{{ $permalink }}">
                <img src="{{ $featuredImageUrl }}" alt="{{ $featuredAltText }}" loading="lazy">
            </a>
            {{ end }}
        </figure>
    </div>
    <div class="card-content">
        <a class="title is-5" href="{{ .Permalink }}">{{ .Title }}</a>
        <span class="heading"><time>{{ .PublishDate.Format "January 2, 2006"}}</time></span>
    </div>
</div>

Open and edit layouts/_default/single.html adding the html code.

<!-- Add postcards for related content -->

<div id="related-content" class="mt-2">
    <div class="columns is-centered">
        <div class="column">
            <div class="content">
                <h2>Related content</h2>
            </div>
            <div class="columns">
                {{ $related := .Site.RegularPages.Related . | first 3 }}
                {{ range $related }}
                <div class="column is-one-third">
                    {{ partial "widgets/postcardsmall.html" . }}
                </div>
                {{ end }}
            </div>
        </div>
    </div>
</div>

Your blog should now show related content something like this

2. Previous and next posts

It is also often useful to add links to the next and previous blog posts. I’m just going to do it as a simple hyperlink, and not build out postcards (like we did above). Open and edit layouts/_default/single.html adding the following html code where you want the links to appear.

<!-- Add links to previous and next posts in section -->

<div>
    <div class="columns is-centered">
        <div class="column max-800px">
            <div class="columns is-mobile">
                <div class="column has-text-left">
                    {{ with .PrevInSection }}
                        <p><strong>Previous post</strong></p>
                        <a href="{{ .Permalink }}">{{ .Title }}</a>
                    {{ end }}
                </div>
                <div class="column has-text-right">
                    {{ with .NextInSection }}
                        <p><strong>Next post</strong></p>
                        <a href="{{ .Permalink }}">{{ .Title }}</a>
                    {{ end }}
                </div>
            </div>
        </div>
    </div>
</div>

3. Adding Comments

Hugo has lots of options to add comments to your blog. I’ve chosen to use Disqus on my blog, simply because Hugo has an inbuilt template. Go to the Disqus site, set up an account making note of your ‘short name’.

Open and edit config.toml adding

disqusShortname = 'yourDisqusShortname'

Then open and edit layouts/_default/single.html adding the following where you want the comments to appear.

{{ template "_internal/disqus.html" . }}

By default they [the Disqus comments] don’t show when you are previewing your website locally.

But they do show up when your website is live.

4. Building email lists

There are lots of options, but I use Mailerlite to manage my email lists. I think they’re great, and they’re roughly half the cost of Mailchimp.

Sign up for (or log in to) Mailerlite, and then create an embedded form. Find the options to embed the form in your website, and select the ‘HTML code’ tab.

Create layouts/shortcodes/signup.html open and add one line

{{ partial "widgets/signup.html" . }}

Now create layouts/partials/signup.html open it and paste the HTML embed code from Mailerlite into this file.

Why have we done this? Well I want the option to embed my signup form

• in Markup (so I can insert it in the midle of a blog post) and
• directly in the HTML code (so I an insert it in the single page template just above the comments)

The issue is that you cannot embed a partial in Markup. If you try you will get an error. So you have to use a shortcode.

You call a shortcode [in Markup] like this example but replacing the word ‘year’ with ‘signup’.

If you want intert the signup form at the bottonm of each blog post, open and edit layouts/_default/single.html adding the following near the bottom.

{{ partial "widgets/signup.html" . }}

You may need to edit the code of the Mailerlite form to fit the theme of your site better.

Adding the year to the URL string

I want my blog post URLs in the format “permalink/year/post-title”.

Hugo helpfully gives an example. Open and edit config.toml, add the following

[permalinks]
    blog = "/:year/:title/")