Erik Yuzwa

Fullstack web developer with a touch of PC game development for good measure

5 August 2021

Add an RSS feed to Github Pages in 3 easy steps

by erikyuzwa

After so many years of putting it off, I recently decided to move my blog content over to Github Pages. I’ll keep going into further details as I write them, but I’m excited to try this experiment out!

From the Github pages theme that I chose, there was no out-of-the-box RSS feed support.

Not actually sure how many make use of it today for tracking blog content, but it turns out this is a real easy feature to add to any Jekyll blog on Github Pages, and you can achieve this in 3 simple steps!

Step 1

Open up your site’s _config.yml file and add (or create) the following:

plugins:
  - jekyll-feed

title: Your blog title
description: Your blog description
author: Your name or favorite handle

Github Pages support a list of Jekyll gems, but not all of them are enabled by default. Luckily for content creators, jekyll-feed is supported. You just need to declare it in your plugins: list to enable it.

After pushing your changes to Github, your site will rebuild within a few moments and a new file feed.xml will be generated!

You should now be able to access it at https://<github username>.github.io/feed.xml.

Step 2

The next step is to add a reference to the new RSS feed in your _layouts/default.html file, anywhere in the <head> section.


<link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ '/feed.xml' |  prepend: site.url }}">

Step 3 (Optional)

An optional “final” step here, is to add a link or social media icon somewhere on your blog for another human to see that there’s an RSS feed available.

This is going to entirely come down to your own site design and/or preferences.

You can create a simple link such as

<a class="btn btn-rss" href="/feed.xml">RSS</a>

or, as I did, put it in the site footer next to the other social media / share icons I use


    <li>
        <a href="{{ site.url }}/feed.xml" target="_blank">
            <svg id="rss" class="custom-icon" version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"
                style="height: 30px; width: 30px;">
                <circle class="outer-shape" cx="50" cy="50" r="48" style="opacity: 1;"></circle>
                <path class="inner-shape" style="opacity: 1;" transform="translate(25,25) scale(1.5)"
                    d="M4.259 23.467c-2.35 0-4.259 1.917-4.259 4.252 0 2.349 1.909 4.244 4.259 4.244 2.358 0 4.265-1.895 4.265-4.244-0-2.336-1.907-4.252-4.265-4.252zM0.005 10.873v6.133c3.993 0 7.749 1.562 10.577 4.391 2.825 2.822 4.384 6.595 4.384 10.603h6.16c-0-11.651-9.478-21.127-21.121-21.127zM0.012 0v6.136c14.243 0 25.836 11.604 25.836 25.864h6.152c0-17.64-14.352-32-31.988-32z">
                </path>
            </svg>
        </a>
    </li>

It’s your chance to flex your CSS creativity!

tags: