Generating a Sitemap for a JAMstack Site

Sitemaps are a great way of helping search engines understand your website. While modern search engines primarily rely on links to create their search indexes, this can leave lesser-known sites at a disadvantage due to a lack of external backlinks.

Search engines will look for a sitemap.xml file at the root directory of your website, and if it exists, it will parse that file to find any links it did not previously index.

When generating a sitemap, you should be following the schema defined on http://sitemaps.org.

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.example.org/path</loc>
  </url>
</urlset>

Many of the JAMstack frameworks have plugins that can generate a sitemap for you. Still, if the framework you chose doesn't have one, or if you'd prefer to minimize dependencies, it's easy to create a sitemap after running your workflow's site generation step. I'll use Nuxt in this example, but the code can be easily modified to fit your stack.

Nuxt creates a dist folder on static site generation, with .html files for each route within the website. Knowing this, I can write a script that will search that directory for HTML files and generate XML nodes for each unique page.

const fs = require('fs')
const { resolve } = require('path')
const glob = require('glob')

const sitemap = resolve(__dirname, 'dist', 'sitemap.xml')

const nodes = [
  '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'
]

glob('dist/**/index.html', (err, files) => {
  if (err) { throw err }
  files.forEach((f) => {
    nodes.push(`<url><loc>https://jessie.codes${f.replace('dist', '').replace('index.html', '')}</loc></url>`)
  })
  nodes.push('</urlset>')
  fs.writeFile(sitemap, nodes.join(''), (err) => {
    if (err) { throw err }
  })
})

Since I built my site using JavaScript, I can use npm's ability to create a post hook that will run after the generate script. Every time a new page is added, the sitemap will automatically be updated, allowing search engines to update their index for my website even if no external backlinks exist.

{
  "scripts": {
    "generate": "nuxt generate",
    "postgenerate": "node ./sitemap.js"
  }
}

Originally published on jessie.codes