HomeTalks
 
  

Adding an RSS feed to Gatsby Chronoblog theme

July 14, 2020

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.

Ricardo Castro

Ricardo Castro

Software Engineering, DevOps, Taekwondo and Metal

 

 

© 2020