Leveraging the ecosystem

Whenever I run into a new problem when working on a Gatsby project, my first instinct is always to check and see if a solution has been created by the community. A quick search reveals gatsby-plugin-sitemap, an officially-maintained plugin that solves this exact problem! 🎉

Let's install it, either using yarn or npm:

yarn add gatsby-plugin-sitemap

Next, we can add it to our gatsby-config.js:

module.exports = {
  siteMetadata: {
    // ✂️
  },
  plugins: [
    'gatsby-plugin-sitemap',
    // ✂️
  ],
}

Whenever we build our site, this plugin will generate a sitemap.xml file, alongside all the other files that Gatsby builds.

Critically, this plugin only runs when building for production. This means that you won't be able to test it when running in development mode. Let's build, and spin up a static server with serve:

yarn build && serve public

serve is an NPM package that will serve the files on your local filesystem. If you've never used it before, you'll first need to install it with yarn add -g serve.
We pass public as an argument, since Gatsby builds into the /public directory; that's where all our static files will be served from.

You should now be able to open localhost:5000/sitemap.xml, and see a beautiful ugly XML document.