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.

11 Must-Have eCommerce Mobile App Features

When it comes to shopping, smartphones provide the most accessible platform to users across the globe. It is estimated that mobile apps will dominate online sales by 2021, accounting for 54% of total online sales. Unsurprisingly then, the eCommerce mobile app development industry is booming.

Read More

4 things to ponder when outsourcing to a Node JS development company

Various factors play a role in your decision to outsource to a Node JS development company. Here are the important things you need to consider for right decision making.

Read More

Integrate Stripe Elements in Angular?

Stripe.Js is our foundational JavaScript library for building payment flows. The primary integration path through Stripe.js is with Elements, which enables you to collect sensitive payment information using customizable UI components.

Read More