How to add a newsletter to a Jekyll blog

Davide Iaiunese
Mar 17, 2018 · 6 min read
Image for post
Image for post

The problem: why a newsletter

A short time after I started to learn code I had the desire to have a blog and write for it. The first reason is to document this journey into the coding world I’m living. There’s the therapeutic effect the very act of writing has on me. Not to mention it’s a great tool to help other developers in learning. What stopped me until now was yours truly. I procrastinated for months. Why? I have no idea. I was stupid, that’s for sure.

But that’s not the point.

In my first post I state the following:

My purpose here is to document my journey from solo learner to professional web developer, I want to prove that it’s possible and that everybody can. And while I do it I want to contribute to community (our) learning.

This means: if I have no readers it’s quite difficult to achieve such a thing.

That’s why I needed to add a newsletter.

But I built my blog on Jekyll, a static site generator. Jekyll does not offer a newsletter feature out of the box — like it happens for Wordpress, just to mention one.

I found a solution that I want to share with you.

Here’s what I did and what you should do too:

1. Create a web feed for your blog #outtanowhere
2. Use Feed Burner to create a newsletter based on the rss feed:

What RSS feed, Atom (RSS) feed, and FeedBurner are

A RSS feed is a web-based feed that allows users to read updates:

  • gathered and showed via a medium — a news aggregator, email clients and so on
  • whose content is comprehensible by a human eye

Atom (RSS) feed is only an alternative, more recent format of web feeds.

We are going to focus on Atom feeds. Why? Because Github Pages — where Jekyll hosts static websites — chose to use Atom over RSS to generate web feeds. Simple as that.

Disclaimer: for understanding purposes, every time I will refer to the term “feed” I mean the Atom standard.

So feeds come in a XML (Extensible Markup Language) file format, because this very one is compatible with the most number of browsers and machines.

FeedBurner, in opposition, is Google’s own web feed management provider. In normal words, it means that you can register your feed and take advantage of services like:

  • feed optimization
  • troubleshooting support
  • advertisement in our feed
  • statistics about readership, subscribed users, the media used to deliver the feed
  • check Uncommon Uses of your feed — for example, it’s what happens if somebody creates a website that shows news content from different news websites. It’s the case of Front End Front, a news aggregator about front end web development
  • export all that data into a CSV or Excel file

That said, the process we are going through is the following:
1. Create a feed for our blog site and save it in a feed.xml file
2. Create a FeedBurner account
3. Register our feed.xml file on it
4. Use FeedBurner’s email subscription service to create our newsletter

Let’s do it!


1. Create a feed

Github Pages offers a simple way to add a feed to a Jekyll blog. In fact, assumed that we are up to date to the latest Github Pages gem, all we have to do is the following:

  • add the gem ‘jekyll-feed’ to our Gemfile. To do so, open your Gemfile in the root (or create it, if you haven’t done it yet) and paste the following line
  • add jekyll-feed to _config.xml file. To do so, open said file, that should be in the root of your project folder (otherwise create it), and add the following:

Now check your _site: you should notice a new feed.xmlfile in there. That’s what we are going to use with FeedBurner.

2. Create a FeedBurner account.

Go to feedburner.google.com, then you either login with your Gmail account or you create one. For this tutorial, I created a throwaway gmail account. Once you logged in/registered you should see this:

Image for post
Image for post

Now you can register your feed to FeedBurner. To do so, you need the feed URL. It should be something like

https://www.yourwebsite.com/feed.xml

If you didn’t use a custom domain and kept the original address given by GitHub Pages, there are two other cases:

  1. you are using a project website. Its address is something like

and the feed address is something like

2. you are using a project related to your account (you have only one for each). Its address is something like:

and the feed address is something like:

Once you find it, you can copy and paste it into the homepage of your FeedBurner account:

Image for post
Image for post

Click Next.

Image for post
Image for post

Here you can read name and address of your feed. Either accept them as they are or customize them. From my point of view, change the name if you wish but don’t touch the URL: avoid unnecessary troubles.

Click on Next.

Here’s what we see now.

Image for post
Image for post

The feed is live. Click on Next to add further statistics services, all for free. This way you increase the quality of control over it. You will be able to be more aware of its status and user feedback.

Image for post
Image for post

Check all boxes then click Next.

Now we are on the management page.

Image for post
Image for post

Click Publicize.

Image for post
Image for post

Look on the left, at Services menu. What interest us is “Email Subscriptions”, because is what will create our newsletter.

Click on it. You should see something like:

Image for post
Image for post

Click Activate so that two things happen:

  • FeedBurner creates the full-functioning newsletter service
  • and it provides us with the code for the newsletter form.
Image for post
Image for post

It’s ready-to-go code.

At this point the thing we need to do is to include said code snippet into our blog. To be more specific, you must include it in the default layout — you can find it in the `_layouts` folder.

Image for post
Image for post

In there, you will see a `default.html` file. My suggestion is to place the form code at the very bottom of it. The best is to include it in the footer.

That’s it! The newsletter should be working now.

The very last task is customization. This is personal. Below you can find what I did.

HTML

SCSS

This is what it looks like:

Image for post
Image for post

As you can notice, I preferred to keep things simple and minimal. It balances well my blog’s style.


Get in touch

This does it for the time being!

Thank you for reading this article.

Reach out here or on Twitter.

If you want to become a web developer and found this helpful, please subscribe to my blog. You will be up to date to every new post I write.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store