Add an RSS Feed to your Gatsby MDX blog
An RSS Feed is a standard XML file with the purpose of listing the content of a website in a subscribable format. It allows readers to consume your content in news aggregators, like a feed reader app. You can think of it like a newsfeed where the content is displayed in a chronological order, without any algorithm choosing the "right" post that will make you click.
Install
To generate an RSS Feed for your Gatsby MDX blog, you need the gatsby-plugin-feed-mdx package. To install this package, run the following command:
1npm install --save gatsby-plugin-feed-mdx
Config
Now, it's time to config the gatsby-plugin-feed-mdx
plugin in your gatsby-config.js
file:
1{2 // Enables RSS Feed3 resolve: `gatsby-plugin-feed-mdx`,4 options: {5 query: `6 {7 site {8 siteMetadata {9 title10 description11 siteUrl12 site_url: siteUrl13 }14 }15 }16 `,17 feeds: [18 {19 serialize: ({ query: { site, allMdx } }) =>20 allMdx.edges.map(edge => ({21 ...edge.node.frontmatter,22 description: edge.node.excerpt,23 date: edge.node.frontmatter.date,24 url: `${site.siteMetadata.siteUrl}/blog${edge.node.frontmatter.slug}`,25 guid: `${site.siteMetadata.siteUrl}/blog${edge.node.frontmatter.slug}`,26 custom_elements: [{ 'content:encoded': edge.node.html }],27 })),28 query: `29 {30 allMdx(31 sort: { order: DESC, fields: [frontmatter___date] },32 filter: { frontmatter: { published: { eq: true } } }33 ) {34 edges {35 node {36 excerpt37 html38 frontmatter {39 title40 slug41 date(formatString: "MMMM DD, YYYY")42 }43 }44 }45 }46 }47 `,48 output: '/rss-feed.xml',49 title: "Enea's RSS Feed",50 // optional configuration to insert feed reference in pages:51 // if `string` is used, it will be used to create RegExp and then test if pathname of52 // current page satisfied this regular expression;53 // if not provided or `undefined`, all pages will have feed reference inserted54 match: '^/posts/',55 },56 ],57 },58}
We can have a closer look at all this block of code by examining each option individually.
The initial query
attribute allows us to query for site metadata:
1query: `2 {3 site {4 siteMetadata {5 title6 description7 siteUrl8 site_url: siteUrl9 }10 }11 }12`,
The query
attribute is followed by a feeds
array, that we can use to create multiple feeds.
This can be usefull if you want to generate different feeds for different content types like: blog, courses, podcast or talks. Every content type will be represented by a feed object
:
1feeds: [2 {3 // blog feed4 },5 {6 // courses feed7 },8 {9 // podcast feed10 },11 {12 // talks feed13 },14];
Since we are working with an MDX Blog, we need to transform our MDX pages into HTML objects that can be read by RSS Feed readers. For this purpose, we need to use a serializer
:
1serialize: ({ query: { site, allMdx } }) =>2 allMdx.edges.map(edge => ({3 ...edge.node.frontmatter,4 description: edge.node.excerpt,5 date: edge.node.frontmatter.date,6 url: `${site.siteMetadata.siteUrl}/blog${edge.node.frontmatter.slug}`,7 guid: `${site.siteMetadata.siteUrl}/blog${edge.node.frontmatter.slug}`,8 custom_elements: [{ 'content:encoded': edge.node.html }],9 })),
Our feed object
will contain also a GraphQL query that will retrieve all our blog posts and sort them in descending order, before filtering out those which are just drafts:
1query: `2 {3 allMdx(4 sort: { order: DESC, fields: [frontmatter___date] },5 filter: { frontmatter: { published: { eq: true } } }6 ) {7 edges {8 node {9 excerpt10 html11 frontmatter {12 title13 slug14 date(formatString: "MMMM DD, YYYY")15 }16 }17 }18 }19 }20`,
Finally, we need to specify our RSS Feed URL together with a title using the output
and title
attributes.
Output
To see the final output, you can run the following command in your terminal:
1gatsby build && gatsby serve
and visit http://localhost:9000/rss-feed.xml
.
For reference, here is my entire gatsby-config.js
file.