How to generate RSS feed with Gatsby.js

What is RSS feed?

RSS is short for Really Simple Syndication and RSS is a way to have information delivered to you.

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 and at many more.

How to generate RSS feed with gatsby.js

To generate RSS feed with gatsby we will use gatsby-plugin-feed package. To install this package move to your home directory and run the following command.

npm install --save gatsby-plugin-feed

Customizing the RSS feed plugin

After complete installation you have to add plugin in your config file under plugins array.

The RSS feed needs a way to uniquely identify content, by URL or slug or path. You need to add the plugin in gatsby-config.js file and customize it as per your requirement. Below is a snippet I am using.

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

Each feed must include output, query, and title. it is recommended to pass a custom serialize function, otherwise an internal serialize function will be used which may not exactly match your particular use case.

You can add customized elements as I added category under custom_elements like HTML encoded content, the tags, and the featuredImage.

Voila you did it, now time to test our feed by executing command..

gatsby build && gatsby serve

NOTE: This plugin only generates the XML file(s) on production build.

After successfully generating your feed, you should validate your feed using an online feed validators and check if it is valid or not. You can validate your feed by providing URL of RSS feed file or by providing content of rss.xml file at https://validator.w3.org/feed/

More details

https://www.gatsbyjs.org/packages/gatsby-plugin-feed/ https://www.npmjs.com/package/gatsby-plugin-feed

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.