When I started this blog I wanted to learn something new and so I decide to develop it with Gatsby. It was a new framework which would allow me to enhance my knowledge in the frontend spectrum and teach me a thing or two about React and GraphQL. Bonus points for the awesome documentation.

After a few tutorials I decided to use one of it’s themes and settled on the Chronoblog theme. Chronoblog is a bit different from the examples in the tutorials. For example, it uses MDX and a different folder structure but it’s well documented.

Gatsby has the concept of plugins which are Node.js packages that implement Gatsby APIs. For larger, more complex sites, plugins let you modularize your site customizations into site-specific plugins and also has a very nice plugin library. Immediately I searched for one to implement an RSS feed and found gatsby-plugin-feed.

This tutorial will help you add an RSS feed to your Gatsby site but because I’m using Chronoblog a few minor changes had to be done in gatsby-config.js:

{
  resolve: `gatsby-plugin-feed`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            title: siteDescription
            description: siteDescription
            siteUrl
            site_url: siteUrl
          }
        }
      }
    `,
    feeds: [
      {
        serialize: ({ query: { site, allMdx } }) => {
          return allMdx.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: `
          {
            allMdx(
              sort: { order: DESC, fields: [frontmatter___date] },
            ) {
              edges {
                node {
                  excerpt
                  html
                  fields { slug }
                  frontmatter {
                    title
                    date
                  }
                }
              }
            }
          }
        `,
        output: "/rss.xml",
        title: "Ricardo Castro",
      },
    ],
  },
}

In the first GraphQL query we have to populate site and description with siteTitle and siteDescription. The other change comes in the feeds section where we have to replace allMarkdownRemark with allMdx.

And just like, with only a few changes, we can add an RSS feed to a Gatsby Chronoblog site.