How to make an Archive of pages using categories in Jekyll

Why I make this?

On the Data for Education Systems website, I use the Just the Docs theme, which is great but also limiting as all off-the-shelf themes are.

I needed to create a page with a list of all the pages on the site displayed by categories. Jekyll has a built-in way of categorising posts but not pages. Here’s how I made it work.

Side note: I really think Hugo is a better static site generator than Jekyll. But then Jekyll walked, so Hugo could run.

What it look like?

Just go the Archive page on the D4ES site - https://data4edu.systems/archive/

How to do this?

This assumes that you have added categories to your pages. If you haven’t, you can do that by adding the following to the front matter of all the pages you want to display on the archive:

1

categories: ['CATEGORYNAME1', 'CATEGORYNAME2']

We will create two files:

1. A new layout file for the archive page: this goes into the _layouts folder
2. A new page for the archive: this will likely be an index.md file in a folder called archive in the root of your site

Here’s what the files will contain:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!-- _layouts/archive.html -->
---
layout: default
---

{{ content }}

<section>
  <h3>CATEGORYNAME1</h3>
  <ul>
    {% for page in site.pages %}
      {% if page.categories contains 'CATEGORYNAME1' %}
        <li><a href={{site.url}}{{page.url}}>{{page.description}}</a></li>
      {% endif %}
    {% endfor %}
  </ul>
  <h3>CATEGORYNAME2</h3>
  <ul>
    {% for page in site.pages %}
      {% if page.categories contains 'CATEGORYNAME2' %}
        <li><a href={{site.url}}{{page.url}}>{{page.description}}</a></li>
      {% endif %}
    {% endfor %}
  </ul>
</section>

Update CATEGORYNAME1 and CATEGORYNAME2 in the <h3> and <a> tags above to the actual category names.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

# archive/index.md
---
title: Archive
layout: archive
---

# Site Archive

## What is this page?
This page lists all the pages on the site, grouped by category.

Note: This is not a scalable way of doing this because you have to manually create a new section for each category. I’m sure there’s a way to automate this but I haven’t figured it out yet.

I tried adding a list of categories in the site’s _config.yml file and then looping through it using something like -

{% for category in site.categories %}
{{ category }}
{% endfor %}

But that didn’t work. I’ll update this post if I figure it out.