Adding a mailing list to a Hugo static site

Adding a mailing list to a Hugo static site

February 9, 2022
howto
blog, convertkit, email, blogdown, Hugo

One of the most common pieces of advice I see from other bloggers is that building an email mailing list is critical to sustaining audience engagement.

When I looked around, I didn’t find much guidance on how to implement a mailing list solution within a Hugo static site. Most of the guidance out there focuses on Wordpress.

After some trial and error, I figured out how to get a third party mailing list service to work with this site.

It was surprisingly easy.

On this post, I’ll walk through the complete process for integrating a third party mailing list service with a Blogdown-generated Hugo static site built around the Apéro theme.

Mailing List services #

There are a whole bunch of third party mailing list services out there. Some of the most popular services include:

  • ConvertKit
  • MailChimp
  • Constant Contact

I ultimately settled on ConvertKit. Some of the main reasons why I chose ConvertKit were:

  • Modern interface
  • Seamless integration
  • Ease of use
  • For lower tiers, it’s free

The steps I’ll share here mostly center on ConvertKit, but I imagine there are parallels across the other mailing services as well.

As long as the mailing service makes available an embeddable code chunk, this set of steps should work just fine.

Setup #

I won’t go into detail here on how to set up a Blogdown site or how to get started with a ConvertKit account.

What I will focus on is how to get Blogdown and ConvertKit to work together. It’s actually a pretty straightforward process, with a few gotchas here and there to be mindful of.

The first step is to navigate to the Landing Pages and Forms section in ConvertKit.

From there, create a new form.

Select an inline form.

There are plenty of different form templates to pick from. This is entirely up to you. I personally prefer minimalistic designs.

Take your time and play around with the different designs and elements within the form.

Once you’ve settled on a form design you like, hit Publish. This makes the form operational and will bring up a window with options to embed a form, including choices for:

  • Javascript
  • HTML
  • Share
  • Wordpress
  • Unbounce

For a Hugo site like those created through Blogdown, you’ll want to use Javascript or HTML. I personally prefer Javascript.

If you update the form design within ConvertKit, the changes will automatically appear wherever you have the form embedded without any extra work from you.

The chunk of code that you can copy should look something like this (I’ve swapped out the unique identifier here):

<script async data-uid="abcd123" src="https://colossal-producer-9349.ck.page/abcd123/index.js"></script>

Copy that code chunk, and drop it wherever you want the form to show up.

For instance, I wanted to add a signup form at the bottom of my about page, so I added the following:

show_outro: true
outro: |

  <script async data-uid="abcd123" src="https://colossal-producer-9349.ck.page/abcd123/index.js"></script>

I also wanted a signup form to appear on my blog sidebar. I modified my content/blog/_index.md file to include the following:

# for listing page layout
layout: list-sidebar # list, list-sidebar, list-grid

# for list-sidebar layout
sidebar: 
  title: Blog
  description: |
    A varied collection of writing. 
    
    Posts by [categories](/categories/) and [tags](/tags/).
    
    <script async data-uid="abcd123" src="https://colossal-producer-9349.ck.page/abcd123/index.js"></script>

If you’re dropping the mailing list code chunk in any area of your Hugo site that has content enclosed in double quotes, be sure to replace the double quotes within the code chunk with single quotes.

This is especially important on the homepage layout at content/_index.md where the entire description chunk is contained within a pair of double quotes.

Once you add the code chunk, the email signup form should appear wherever you specify.

If the signup form is too close to other sections on your site, throw in a few html <br> breaks to add some spacing.

And that’s it.

Simple, (hopefully) painless, and fully functional.

The user experience #

Email signup forms are pretty prevalent across the internet, so it should be fairly familiar to most visitors.

A visitor will encounter something like this initially:

They’ll input their email and any other pieces of detail you request, if they so choose.

Once they hit submit, the view changes to a confirmation.

They should then receive an email in at their specified address. Within that email, they’ll be asked to confirm their subscription.

Once they confirm their email address, they’ll be presented with a positive confirmation.

The administrator experience #

ConvertKit does a great job of tracking and presenting details around registrations. Their primary dashboard is in my opinion very clean and highly functional.

Here’s what my main ConvertKit dashboard looked like when I first set it up and loaded it up with a test email address.

Once I collect emails from visitors, I’ll be able to reach out to them directly right through ConvertKit.

Having a mailing list in place changes the engagement flow from a pull process from visitors, to more of a push process where I deliver content to prior visitors that opt-in to receiing communications from me.

Easy peasy.