Creating a Tag Page with Jeykll

If you don’t use a plugin, creating a page that automatically sorts your blog posts by tag on Jekyll is trickier than it ought to be. I wanted a page that had a list of all tags for the site at the top. Each tag would then be a link to a section further down the page that had a list of all posts with that tag.

Here’s how to do it:

Make an array with all of your tags

Creating an array in liquid isn’t elegant, but it’s possible:

Generate the list of tags

Next, make the list of tags for the top of the page that link to the list of posts with that tag:

I cleaned up the display of the tags by getting rid of hyphens and adding no wrap so that a single tag wouldn’t end up on two lines.

Generate a list of posts for each tag

The last step is creating a list of posts for each tag and making it possible to navigate to each tag from the top of the page:

The element id will match the tag from the list at the top of the page. You can fiddle with the display options, but I prefer a plain unsorted list.

Voila

Copy, paste and customize this code to get a tag page for your Jekyll blog. Here’s my tag page. The raw code for the entire page is on GitHub.