Publishing an RSS feed with Gatsby

#gatsby #rss

Wait, what's RSS?

In their article on how it's making a comeback, Wired explains:

Its aim is straightforward: to make it easy to track updates to the content of a given website in a standardized format ... it can give you a comprehensive, regularly updated look at all of the content your favorite sites publish throughout the day.

That standardized format is an XML file (see one for this site) that allows apps like Feedly to notify users when you post new content.

Generating this for your Gatsby blog is fairly straightforward.

Publishing a feed

Start by adding the gatsby-plugin-feed package to your site.

npm install --save gatsby-plugin-feed

Now add it to the array of plugins in gatsby-config.js.

plugins: [
  // Other plugins will already be here, don't forget the comma.
  'gatsby-plugin-feed',
];

The RSS feed is only generated in production mode. You can test it by running gatsby build && gatsby serve and navigating to http://localhost:9000/.

Congratulations, you have an RSS feed! 🎉

Or maybe you're staring at an ugly error message like I was. Let's get that fixed.

Customizing the feed

By default, the plugin looks for a slug field that's associated with each blog post. This is the part of the URL that represents a post, such as /blog/the-post-title. It isn't generated for each post by default.

While you can configure another plugin to generate slugs, you can have full control over your URLs by including a path in the front matter of each post.

--------
path: '/blog/the-post-title'
--------

The content of your post.

Next, update gatsby-config.js to replace the single line you added earlier (with default options) with an object containing your custom configuration.

{
  resolve: `gatsby-plugin-feed`,
  options: {
    query: `
      {
        site {
          siteMetadata {
            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.frontmatter.path,
              guid: site.siteMetadata.siteUrl + edge.node.frontmatter.path,
              custom_elements: [{ 'content:encoded': edge.node.html }],
            });
          });
        },
        query: `
          {
            allMarkdownRemark(
              limit: 1000,
              sort: { order: DESC, fields: [frontmatter___date] }
            ) {
              edges {
                node {
                  excerpt
                  html
                  frontmatter {
                    date
                    path
                  }
                }
              }
            }
          }
        `,
        output: '/rss.xml',
        title: "RSS Feed",
      },
    ],
  },
},

This isn't quite as complex as it looks. Your RSS feed is generated by the serialize() function. You'll see that it returns an array of posts, with an object for each post containing properties like the description and published date. Those values come from GraphQL queries of the site's metadata (top) and blog posts (bottom).

There's a good chance that the code above will work for you. If not, use the GraphiQL tool to test queries and explore the data you have available until you're able to complete the object that's returned for each post.

While it may take a few tries to get through the errors, you'll soon have a custom configuration for your blog. This is a set it and forget it task that will automatically generate an RSS feed of the latest posts when your site builds.