Wait, what's RSS?

In their article on how it'smaking 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 forthis site) that allows apps likeFeedly to notify users when you post new content.

Generating this for yourGatsby blog is fairly straightforward.

Publishing a feed

Start by adding thegatsby-plugin-feed package to your site.

npm install --save gatsby-plugin-feed

Now add it to the array of plugins ingatsby-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 runninggatsby build && gatsby serve and navigating tohttp://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 aslug 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 configureanother plugin to generate slugs, you can have full control over your URLs by including apath in the front matter of each post.

--------path: '/blog/the-post-title'--------The content of your post.

Next, updategatsby-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 theserialize() 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 theGraphiQL 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 aset it and forget it task that will automatically generate an RSS feed of the latest posts when your site builds.

Next steps

• Subscribe to your blog with an app likeFeedly to keep an eye on your RSS feed.
• Exploreother configuration options for the plugin.
• Learn more aboutGraphQL queries.