Gatsby is a static web site framework that’s based on React.
We can use it to create static websites from external data sources and more.
In this article, we’ll look at how to create a site with Gatsby.
Sitemap
We can use the gatsby-plugin-sitemap
plugin to add a sitemap.
To do this, we write:
module.exports = {
siteMetadata: {
siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`],
}
in gatsby-config.js
.
We install the plugin by running:
npm i gatsby-plugin-sitemap
siteUrl
has the base URL of the website. This is required.
And we add the plugin into the plugins
array.
Then when we make the production build with npm run build
, we’ll get the sitemap.
RSS Feed
We can add an RSS feed with the gatsby-plugin-feed
plugin.
To do this, we write:
gatsby-config.js
module.exports = {
plugins: [
`gatsby-transformer-remark`,
`gatsby-plugin-feed`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `content`,
path: `${__dirname}/src/content`,
},
},
],
siteMetadata: {
siteUrl: `https://www.example.com`,
},
}
We need siteMetadata.siteUrl
to generate the RSS feed.
gatsby-node.js
const path = require("path")
const _ = require("lodash")
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,
})
}
}
exports.createPages = async ({ actions, graphql, reporter }) => {
const { createPage } = actions
const blogPostTemplate = path.resolve("src/templates/post.js")
const result = await graphql(`
{
postsRemark: allMarkdownRemark(
sort: { order: DESC, fields: [frontmatter___date] }
limit: 2000
) {
edges {
node {
fields {
slug
}
frontmatter {
tags
}
}
}
}
tagsGroup: allMarkdownRemark(limit: 2000) {
group(field: frontmatter___tags) {
fieldValue
}
}
}
`)
if (result.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`)
return
}
const posts = result.data.postsRemark.edges
posts.forEach(({ node }) => {
const slug = node.fields.slug
createPage({
path: slug,
component: blogPostTemplate,
context: { slug },
})
})
}
src/templates/post.js
import React from "react"
import { graphql } from "gatsby"
export default function BlogPost({ data }) {
const post = data.markdownRemark
return (
<div>
<h1>{post.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.html }} />
</div>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
We add the gatsby-plugin-feed
plugin into gatsby-config.js
.
We install the plugin by running:
npm i gatsby-plugin-feed
In gatsby-node.js
, we make the GraphQL query to get the Markdown posts and call createPage
to create the posts.
And post.js
displays the post by getting the data from the data
prop.
Now when we run npm run build
, we see the public/rss.xml
file generated.
Conclusion
We can add a sitemap and RSS feed to our website with Gatsby.