How to Make a Tag Page in Jeykll
A lot of the tag pages on Jekyll sites rely on plugins. If you’re ok with a simple solution that’s on a single page, you can build a tag page without any plugins.
What I wanted was straightforward:
- Once created, the tag page is 100% automatic
- A list of all the tags on the top
- Each tag links to a list of posts with that tag
Step 1: Creating the Tag List
At the top of your tag page, add this Liquid code:
{% assign sortedTags = site.tags | sort %}
{% for tag in sortedTags %}
<a href="#{{tag[0]}}">{{ tag[0] | replace: "-", " " }} ({{ tag[1] | size }})</a>
{% endfor %}The first line sorts your tags alphabetically. If you leave off the sort filter, you’ll get a chronological list.
This also changes - to a space and adds how many posts each tag has.
The most important point is to leave href="#" untouched, regardless of how you display or style the text of each tag.
Step 2: Making the Post Lists
This code creates a list of posts for each tag:
<h2 id="{{ tag[0] }}">{{ tag[0] | replace: "-", " " }</h2>
{% for post in tag[1] %}
<a href="{{ post.url }}" title="{{ post.title }}">{{post.title}}</a>
{% endfor %}Don’t skip the id="{{ tag[0] }}"> since that’s where the link points to in the tag list at top of the page.
Depending on how you want to style each list, you can have the post links in an <ul> or as just links.
Step 3: Styling Your Tags
The barebones HTML will look pretty uninspiring. A little bit of CSS can spruce it up.
Resources
- Take a look at my tag page
- My Jekyll demo site
- Source code for my tag page, CSS for my tag page.
You can always get in touch with questions or to show me your tag page.