CuteMachine

Add an RSS Feed to Your Gatsby Website

What is an RSS Feed?

RSS is an abbreviation for Really Simple Syndication.

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, also called feed reader apps.—Gatsby Website

RSS feeds were very popular. The usage has declined because Google decided to kill its RSS Reader Google Reader. But there are still many people who only read through their preferred feed reader. I'm a big fan of RSS feeds as well. There are many independent publishers I like to follow. RSS Feed Readers are the best option to do this.

As I try to be a good internet citizen, I decided to turn my reader back on again. Well, I never turned it actively off, but when I transitioned from Wintersmith to Gatsby, I forgot to add the feature to the new version of CuteMachine.

How to add an RSS Feed to your Gatsby Blog

Tim Apple would say there is an app for that, in Gatsby-land, we say, there is a plugin for that.

The first thing we do is install the plugin.

npm install --save gatsby-plugin-feed

Then you need to add it to your gatsby-config.js file, like so:

module.exports = {
  siteMetadata: {
    siteUrl: `https://www.example.com`,
   },
  plugins: [`gatsby-plugin-feed`],
}

That's all there is to do to get the feed running. Be aware that this solution works with Remark. When you are using Mdx, please refer to the next section.

RSS Feed with Mdx

When you are using Mdx instead of Remark, then install a different plugin.

npm install --save gatsby-plugin-feed-mdx

Then add the following configuration to your gatsby-config.js file.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-feed-mdx`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                title
                description
                siteUrl
                site_url: siteUrl
              }
            }
          }
        `,
        feeds: [
          {
            serialize: ({ query: { site, allMdx } }) => {
              return allMdx.edges.map((edge) => {
                return {
                  ...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}`,
                }
              })
            },
            query: `
              {
                allMdx(
                  limit:20,
                  sort: { order: DESC, fields: [frontmatter___date] },
                ) {
                  edges {
                    node {
                      excerpt
                      fields { slug }
                      frontmatter {
                        title
                        date
                      }
                    }
                  }
                }
              }
            `,
            output: '/rss.xml',
            title: "CuteMachine's RSS Feed",
            match: '^/',
          },
        ],
      },
    },
  ]
};

This will add all your content written in Mdx to the rss.xml file. We usually do not want to include all content in the feed, because the XML file would get too big over time. It is good practice to limit the posts in your feed to 10 or 20 articles.

Limiting the article count can be quickly done if you add a limit to the query. See the highlighted line below:


allMdx(
  limit:20,
  sort: { order: DESC, fields: [frontmatter___date] },
) {

Testing Your Feed

To test if the feed is working correctly, you can build your site locally and inspect the feed files in the public folder.

$ npm run clean && npm run build

info Done building in 86.578 sec

$ less public/feed.xml

If there is no public/feed.xml, you need to check the plugin and the configuration.

There is a second step you should do when you have published your site. You should validate the feed with an online validation service. The Feed Validation Service is a valid option.

And you should certainly try to access the feed for your website in a feed reader of your choice. I'm using feedly as my feed reader. If you test your feed in the feed reader please, be aware that some feed reader applications cache some streams, so it might take a while before you can see updates to your feed.

Troubleshooting RSS Feeds

The online validators will give you hints when something is broken in your RSS feed. You need to go through the documentation of the feed plugin you are using if you have problems.

Unfortunately, I had some problems with my feed, which I was not able to fix, so I switched to gatsby-plugin-feed-generator. This plugin works for my setup. So if you have problems with the other solutions, you might also try this plugin. Here is my configuration:

{
  resolve: 'gatsby-plugin-feed-generator',
  options: {
    generator: `GatsbyJS`,
    rss: false, // Set to true to enable rss generation
    json: true, // Set to true to enable json feed generation
    siteQuery: `
  {
    site {
      siteMetadata {
        title
        description
        siteUrl
        author
      }
    }
  }
`,
    feeds: [
      {
        name: 'feed',
        query: `
        {
          allMdx(
            sort: {order: DESC, fields: [frontmatter___date]},
            limit: 20,
            filter: {
              frontmatter: {title: {ne: ""}}
            }
            ) {
            edges {
              node {
                html
                frontmatter {
                  date
                  title
                }
                fields {
                  slug
                }
              }
            }
          }
        }
        `,
        normalize: ({ query: { site, allMdx } }) => {
          return allMdx.edges.map((edge) => {
            return {
              title: edge.node.frontmatter.title,
              date: edge.node.frontmatter.date,
              url: site.siteMetadata.siteUrl + edge.node.fields.slug,
              html: edge.node.html,
            }
          })
        },
      },
    ],
  },
},

I only publish a JSON version of the feed. If you need to filter out some content you can do this with the filter in the query. In the above example, all posts that do not have a title in the frontmatter will not be included in the feed.

Conclusion

Adding an RSS feed to your Gatsby site is no big deal. As a good internet citizen, you should add a feed. You will make some people happy.

Posted on CuteMachine.

Jo's Profile ImageWritten by Jo who lives and works in Frankfurt building digital doodah. Stalk him on Twitter.

TOS • Privacy • Disclaimer