How to setup an RSS feed in Gatsby

What is an RSS feed

"An RSS Feed is a standard XML file listing a website’s content in a subscribable format, allowing readers to consume your content in news aggregators, also called feed reader apps. Think of it as a syndicated distribution channel for your site’s content." see Gatsby docs

Adding an RSS Feed to your gatsby site

I assume you know your way around npm, gatsby and javascript.

💰 The Pragmatic Programmer: journey to mastery. 💰 One of the best books in software development, sold over 200,000 times.

I will use this blog, mariokandut.com, as an example. The posts are in Markdown. In the Gatsby docs you can also find a good how-to.

Install the npm package.

npm install --save gatsby-plugin-feed

The RSS feed needs a way to uniquely identify content, typically a URL or slug or path.

In gatsby-config.js you need to add the plugin and in most cases you need to customize it. I wanted to integrate tags and exclude my blog post template.

In the rare case, you are happy with the basics, just add the plugin and your siteUrl.

module.exports = {
  siteMetadata: {
    siteUrl: `https://www.YOUR-WEBSITE-NAME.com`,
  },
  plugins: [`gatsby-plugin-feed`],
};

Now, let's have some fun with customizing the RSS feed plugin. Below is the code snippet I am using in this blog.

{
  resolve: `gatsby-plugin-feed`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            title
            description
            siteUrl
            site_url: siteUrl
          }
        }
      }
    `,
    feeds: [
      {
        serialize: ({ query: { site, allMarkdownRemark } }) => {
          return allMarkdownRemark.edges
            .filter(
              edgePost =>
                edgePost.node.frontmatter.isPublished === 'true',
            )
            .map(edge => {
              return Object.assign({}, edge.node.frontmatter, {
                description: edge.node.frontmatter.description,
                date: edge.node.frontmatter.datePublished,
                url:
                  site.siteMetadata.siteUrl +
                  edge.node.frontmatter.path,
                guid:
                  site.siteMetadata.siteUrl +
                  edge.node.frontmatter.path,
                custom_elements: [
                  { 'content:encoded': edge.node.html },
                  { tags: edge.node.frontmatter.tags.join(',') },
                  {
                    featuredImage:
                      site.siteMetadata.siteUrl +
                      edge.node.frontmatter.titleImage
                        .childImageSharp.fixed.src,
                  },
                ],
              })
            })
        },
        query: blogPostsQuery,
        output: '/rss.xml',
        title: "Mario's RSS Feed",
      },
    ],
  },
}

I guess the syntax looks pretty self-explanatory, so I just go through the main points. With output you customize the URL of the RSS feed and with title the title. The query field is the graphQL query, here the placeholder blogPostsQuery.

Before mapping of the edges I am filtering if the blogpost is published. I have a flag in markdown for this (isPublished).

.filter(edgePost => edgePost.node.frontmatter.isPublished === 'true')

I then map over the filtered edges and create my object. I also add customized elements to the RSS feed, such as the html encoded content, the tags (array in markdown) and the featuredImage.

custom_elements: [
                  { 'content:encoded': edge.node.html },
                  { tags: edge.node.frontmatter.tags.join(',') },
                  {
                    featuredImage:
                      site.siteMetadata.siteUrl +
                      edge.node.frontmatter.titleImage
                        .childImageSharp.fixed.src,
                  },
                ],

Now start the project with gatsby develop and go to localhost:8000/rss.xml. What do you see?

Yes, a 404 page. The RSS feed won't work with gatsby develop, you have to build and serve your project. gatsby build && gatsby serve, now go to localhost:9000 (standard port) and check the RSS feed. You should see something similar as here. If yes, commit your changes and deploy and we are done with the first step.

YaY, 🥳🥳🥳. Well done.

Thanks for reading and if you have any questions, use the comment function or send me a message @mariokandut.

Do you want to 🤖 automate your content distribution and auto-post to medium and dev.to? Here is an article I wrote about How to automatically post to medium and dev.to.