Making a tags page without using jekyll-archives
There is an extension for Jekyll called jekyll-archive which allows you do make extra pages without creating the files for them such as category pages, tag pages and ones for specific dates and such. This is really good however there is one downside, it does not work on GitHub pages.
To get around this we can make a page that lists all posts and categorizes posts under tags alphabetically sorted. There are probably fancy ways this could be done with JavaScript but are are going to do it using just HTML generated by liquid. In the code below you can see how I solved this. The showontop key is just for my specific theme to make buttons show up on the top.
tags.html
---
layout: base
title: Tags
permalink: /tags.html
showontop: true
---
{%- assign tags = "" | split: "" -%}
{%- for post in site.posts -%}
{%- unless post.tags -%}{% break %}{% endunless -%}
{%- assign tags = tags | concat: post.tags -%}
{%- endfor -%}
{%- assign tags = tags | uniq | sort_natural -%}
{%- for tag in tags %}
<a href="#{{ tag }}"><span style="font-size: 50px;">{{ tag }}</span></a>
{%- endfor %}
{% for tag in tags %}
<a name="{{ tag }}"></a>
<h2>{{ tag }}</h2>
{%- for post in site.tags[tag] %}
<p><a href="{{ post.url }}">{{ post.title }}</a></p>
{%- endfor %}
{% endfor -%}
What the code generates is the page at Tags which contains a list of every tag with large clickable links that refers to links inside the page using HTML anchors. What is so convenient with this is that we not can just add a small section on the bottom of the post layout below that shows some clickable tag buttons that sends you to the tags page and scrolls to the appropriate section. This is also done completely without JavaScript as it is a HTML feature so it is great for SEO.
Part of _layouts/post.html
{% assign tags = page.tags -%}
{%- if tags -%}
{%- assign tags = tags | sort -%}
Tags:
{%- for tag in tags %}
<a href="/tags.html#{{tag}}">{{ tag }}</a>
{%- endfor -%}
{%- endif %}
The only real downside of this I can think of is that the page can be very long if you have a huge amount of posts and it can be hard to paginate it. There are probably ways you can solve this with JavaScript by storing the data somewhere and have it be fetched by the client even tho that is less friendly to bots. It can be good to have a huge page however as it can serve as a very user friendly sitemap.
Another fun thing to look at is a related posts thing that shows posts that have a certain amount of tags in common. I was searching for Jekyll tips and found the following article
https://blog.webjeda.com/jekyll-related-posts/
It describes how you can make such a thing and as you can see we have it here on the blog too.
*Mweeoops*
By ellietheyeen 1 December 2023 Permalink Tags: html jekyll liquid