Creating an Archive page with Jekyll
This website is built using Jekyll, a static website builder written in Ruby.
There’s a lot of static website builders out there. I picked Jekyll because it’s easy to use and extend (in Ruby), and is supported by both GitHub Pages and Netlify, the latter of which is used to host this website.
I recently added an Archive page to show a list of posts grouped by year. There’s a number of ways you can do this, and I’ve seen many hacky implementations on Stack Overflow. Thankfully it’s actually pretty easy.
Jekyll 3.4.0 introduced the group_by_exp
Liquid Filter, allowing us to
group our posts according to the expression we pass as an argument. This
argument is itself a Liquid expression, allowing us to re-use Liquid filters.
Here’s how to group our posts by year:
{% raw %}
{% assign grouped_posts = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
{% for year in grouped_posts %}
<strong>{{ year.name }}</strong>
<ul>
{% for post in year.items %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
{% endraw %}
We can even repeat our grouping inside the loop to include per-month subheadings:
{% raw %}
{% assign grouped_by_year = site.posts | group_by_exp: "post", "post.date | date: '%Y'" %}
{% for year in grouped_by_year %}
<strong>{{ year.name }}</strong>
{% assign grouped_by_month = year.items | group_by_exp: "post", "post.date | date: '%B'" %}
{% for month in grouped_by_month %}
<strong>{{ month.name }}</strong>
<ul>
{% for post in month.items %}
<li>{{ post.title }}</li>
{% endfor %}
</ul>
{% endfor %}
{% endfor %}
{% endraw %}
Whilst I’m not a huge fan of the Liquid syntax, Jekyll includes a number of really convenient filters. It’s worth checking out their list when creating these sorts of pages.