How to generate a sitemap of your site

This recipe shows how to automatically generate a sitemap for your application.

Overview

The sitemap script runs through your site assets and generates a list of links that your users can use to find all the content on your site.

All we need is a sitemap.xxx file.

/sitemap.jade

Sitemap script

Using Jade

Create a new file named sitemap.jade and copy/paste the snippet below.

- var filter = /(\.html$)/;
- var replace = /(\.html$)|(^index\.html$)/;

mixin tree(head, tail)
  for val, key in head
    if key !== '.git' && key !== '_data'
      if key == '_contents'
        each file in val
          if filter.test(file) && !/^404\.html/.test(file)
            - file = file.replace(replace, "");
            li: a(href="#{ tail + file }")= tail + file
      else
        mixin tree(val, tail + key + "/")

h1 Sitemap
ol
  mixin tree(public, "/")

You may also name it sitemap.xml.jade if you’d prefer to build upon this snipper and create an XML file, rather than making a sitemap page on your site.

If you are using a _layout, you’ll also need to add the following the the _data.json file in the same folder:

"sitemap": {
    "layout": false
}

This will prevent the resulting sitemap.xml file from rendering inside your default _layout.

Using EJS

Create a new file named sitemap.ejs and copy/paste the snippet below:

<% var filter = /(\.html$)/; %>
<% var replace = /(\.html$)|(^index\.html$)/; %>

<% function tree(head, tail) { %>
  <% for (key in head) { %>
    <% val = head[key]; %>
    <% if (key !== '.git' && key !== '_data') { %>
      <% if (key == '_contents') { %>
        <% for (i in val) { %>
          <% file = val[i] %>
          <% if (filter.test(file) && !/^404\.html/.test(file)) { %>
            <% file = file.replace(replace, ""); %>
            <li><a href="<%= tail + file %>"><%= tail + file %></a></li>
          <% } %>
        <% } %>
      <% } else { %>
        <% tree(val, tail + key + "/") %>
      <% } %>
    <% } %>
  <% } %>
<% } %>

<h1>Sitemap</h1>
<ol>
  <% tree(public, "/") %>
</ol>

You may also name it sitemap.xml.ejs if you’d prefer to build upon this snipper and create an XML file, rather than making a sitemap page on your site.

If you are using a _layout, you’ll also need to add the following the the _data.json file in the same folder:

"sitemap": {
    "layout": false
}

This will prevent the resulting sitemap.xml file from rendering inside your default _layout.

How does it work?

The template variable public carries the structure of the site, we use a recursive function called tree to iterate through all the files recursively and simply output the files and links into a list.