homeresume
 
   

Chronoblog (Gatsby) theme with RSS feed

March 7, 2022

Chronoblog is one of the Gatsby blogging themes. RSS feed can be used to get the latest posts for Github actions, dev.to, etc. It can be easily added by the following steps, a similar approach can be used for other Gatsby themes.

Setup

npx gatsby new chronoblog-site https://github.com/Chronoblog/gatsby-starter-chronoblog
cd chronoblog-site

Install required packages

npm i gatsby-plugin-feed@2 gatsby-transformer-remark@3 gatsby-source-filesystem

Populate GraphQL fields to avoid null errors

Add canonical_url: http://example.com to content links frontmatter-placeholder index.md

Add plugins configurations in gatsby-config.js

Draft content, links and placeholder post are skipped.

module.exports = {
// ...
plugins: [
// ...
{
resolve: `gatsby-plugin-feed`,
options: {
query: `
{
site {
siteMetadata {
title
description
siteUrl
site_url: 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: edge.node.frontmatter.canonical_url || edge.node.frontmatter.url,
guid: edge.node.frontmatter.canonical_url || edge.node.frontmatter.url,
custom_elements: [{ "content:encoded": edge.node.html }],
})
})
},
query: `
{
allMarkdownRemark(
filter: {
frontmatter: {
draft: { ne: true },
link: { eq: null },
title: { ne: "Ghost Post" }
},
},
sort: { order: DESC, fields: [frontmatter___date] },
) {
edges {
node {
excerpt
html
fields { slug }
frontmatter {
title
canonical_url
date
}
}
}
}
}
`,
output: "/rss.xml",
title: "RSS Feed",
},
],
},
},
{
resolve: `gatsby-transformer-remark`
},
],
// ...
};

Implement onCreateNode function in gatsby-node.js

const { createFilePath } = require(`gatsby-source-filesystem`);
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions
if (node.internal.type === `MarkdownRemark`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
node,
value,
})
}
}

Add serve script in package.json

{
// ...
"scripts": {
// ...
"serve": "gatsby serve"
}
}

Demo

Run npm run build && npm run serve, RSS feed should be populated on http://localhost:9000/rss.xml page.

 

© 2022