Fullstack Almanac

Add A Newsletter To Your Hugo Blog With TinyLetter

Cover Image for Add A Newsletter To Your Hugo Blog With TinyLetter
Robin De Neef
Robin De Neef

Back when I first started looking into online businesses in 2014, I quickly came across many articles urging budding entrepreneurs to start an email list. They argued that email lists are the best way to reengage your readers, get in touch with your audience through questions and surveys, and make money by marketing products.

The latter always bothered me a bit. A lot of newsletters I signed up for just felt like advertisements. They start off with a long relatable story with many problems and obstacles that I could recognise myself only to finally sell the solution for the low price of $99.99! It didn’t take long before I created an extra email account that I could use to sign up to things without ever worrying about spam again.

However, over the years I’ve grown to appreciate newsletters again. If they are done right! Some of my favourites at the moment are Ness Labs and the GCP Newsletter.

I also want to bring a valuable newsletter to my readers, I’ve chosen for TinyLetter as my provider and in this blog post, I’ll explain how I integrated TinyLetter with Hugo. Still need to set up your blog with Hugo? check out this post.

Set Up TinyLetter

TinyLetter is an easy to use newsletter service, they host the subscription pages on their servers so I don’t need any complicated backend logic to save the emails.

You can create an account on TinyLetter.com. Afterwards, on your profile page, you can add your newsletter name and description. If you want to spice up your subscribe webpage under the design section, when you are done with setting everything up you can go to share section in the menu and copy your link from there.

Now we need to integrate the link on our blog.

Integrate With Hugo

To integrate your newsletter in Hugo you must go down to your theme folder. In my case, I want to add the newsletter at the bottom of my blog posts. To do this I hand to change the post layout which was situated under /layouts/_default/single.html. At the bottom, I added the following snippet.

<div class = 'subscribe'>
  <p>If you liked this post and would like to read more of my posts.</p>
  <a href="https://tinyletter.com/FullstackAlmanac">Subscribe</a>

That’s it! Now people can subscribe to your many ideas! If you’ve liked this post and want to see everything in action, try out the subscribe button below!