How to add a newsletter to a Jekyll blog

6 min readMar 17, 2018

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


 gem ‘jekyll-feed’

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:

plugins:
 — jekyll-feed

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:

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:

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

yourusername.github.io/project-name/index.html

and the feed address is something like

yourusername.github.io/project-name/feed.xml

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

yourusername.github.io/index.html

and the feed address is something like:

yourusername.github.io/feed.xml

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

Click Next.

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.

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.

Check all boxes then click Next.

Now we are on the management page.

Click Publicize.

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:

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.

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.

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: