Introduction

What is an RSS feed and how can you use it?

RSS stands for Really Simple Syndication. It’s is a standardized method to share or rather subscribe content and help you to stay up-to-date with news, blogs, websites, and social media content. Instead of visiting a page over and over again or getting notifications for new posts on a page by mail, you can simply view the information in an RSS reader. In an RSS reader you have the possibility to build your own content stream from a selection of several RSS feeds from different websites. An example of an RSS reader you could try for free is feedly (www.feedly.com).

To create an RSS feed, the author of a website provides a XML file that contains the title, description, and link for each post on the site. This follows a standard format, and can be set up automatically on many websites. For example, if you use Wordpress.

Why you should think about using RSS feeds

I think that RSS feeds are a great thing. Especially nowadays the internet is overflowing with content. However, I still find it extremely interesting to follow smaller blogs of private individuals or to check certain news sites on a daily basis. In order to avoid having to open different websites for all this information, I build my own feeds in an RSS reader. For example, one where I only get updates from smaller blogs that I follow. We are constantly following people on Instagram, Twitter, Tiktok or Youtube. RSS feeds offer us the possibility to follow whole websites, which are the core of the internet. But there are so many people who don’t use it. That’s why you should think about creating your own information sources and take your feeds into your own hands. You can stop letting an algorithm deliver the content and find your own sources of information.

Implementation

Provide an RSS feed to my gatsby.js website

Even though in gatsby.js you write all the code yourself and don’t have a user interface in front of you like in wordpress where you can do most of the changes, there are still plugins for gatsby.js. Gatsby itself uses npm to manage the packages, and so a plugin can also be installed via npm that supports adding an RSS feed to my website:

npm install gatsby-plugin-feed

There is a gatsby-config.js file where any settings and all plugins are defined. I can add an entry for my RSS feed plugin there. Since I don’t want to use only the default settings I made some adjustments for my feed in the config file. In the end the result looks like this in the gatsby-config.js:

{
      resolve: `gatsby-plugin-feed`,
      options: {
        feeds: [
          {
            serialize: ({ query: { site, allMarkdownRemark } }) => {
              return allMarkdownRemark.nodes.map(node => {
                return Object.assign({}, node.frontmatter, {
                  description: node.excerpt,
                  date: node.frontmatter.date,
                  url: site.siteMetadata.siteUrl + node.fields.slug,
                  guid: site.siteMetadata.siteUrl + node.fields.slug,
                  custom_elements: [{ "content:encoded": node.html }],
                })
              })
            },
            query: `
              {
                allMarkdownRemark(
                  sort: { order: DESC, fields: [frontmatter___date] },
                ) {
                  nodes {
                    excerpt
                    html
                    fields {
                      slug
                    }
                    frontmatter {
                      title
                      date
                    }
                  }
                }
              }
            `,
            output: "/rss.xml",
            title: "rico.kl all content RSS Feed",
          },
        ],
      },
    },

With the structure I created, I also have the possibility to create other feeds later, which for example only contain the codersquestions post and not the entire content. I have already tried this, and it is easy to implement. However, for now I will only offer the one feed with all the information.

I found the tutorial for adding the RSS plugin to gatsby.js here: https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-an-rss-feed/

Make RSS feed visible on my website

Where exactly can you find this RSS feed? At https://www.ricoklimpel.de/rss.xml. But of course you shouldn’t memorize the address and I don’t want to mention it everywhere. There should be a button or an icon in the menu, where you can get to my RSS feed and get the url there. Therefore, a new button is quickly added right now.

Initially my plan was to include a way to access my RSS feed directly in my navigation component. I imported an RSS icon via Fontawesome into my navbar.js file, where my menu is defined, and then added a new link to my Navigation Menu.

import { faRss } from "@fortawesome/free-solid-svg-icons"

<Link className={styles.NavLink} to="/rss.xml">
    RSS Feed  <FontAwesomeIcon icon={faRss} /> 
</Link>

However, I was not completely satisfied with the result. The access to the RSS feed should not be as important as the main navigation points of my website. Somehow it all didn’t quite fit together yet. At this point I missed a designer who tells me what the user thinks of it and who tells me where and how the whole thing should be implemented for a good appearance.

This is what the whole thing looked like with this implementation:

The best alternative I could think of, and which I have seen on many other websites, is to add an RSS icon to the list of social icons. So that was exactly my plan and it worked very fast.

First I added the path to my RSS feed to my gatsby-config.json, where I also kept all the other links to my social accounts. I retrieve these links in my socialicons.js file at the beginning with a GraphQL query. At this point I now also had to add the RSS link:

const data = useStaticQuery(graphql`
query SocialIconsQuery {
    site {
    siteMetadata {
        social {
        twitter
        instagram
        stackoverflow
        github
        email
        linkedin
        xing
        rss
        }
    }
    }
}
`)

Then to add the icon, I just added another link with the icon to my list of my other social icons. The import for the RSS icon via Fontawesome I just had to move to this file.

<a className={styles.socialIcon} href={social.rss}>
    <FontAwesomeIcon icon={faRss} className={styles.faIcon} />
</a>

As you may see I’m using a <a> tag at this point rather than the link type from Gatsby. These are topics I have to take care of in another place and I also have to understand the differences in more detail.

Final result

The final result with the RSS icon and link in my social icons row now looks like this:

If you already have your own set of RSS feeds in a reader, feel free to add my website there to get my articles delivered directly to you custom feed. And if you don’t have something like that yet, think about giving RSS a try.

Thanks for reading.