Jekyll Blog Post Tags

Programming Tutorials

My blog uses the Jekyll static site generator. This blog post will show you how I implemented the tag system on this blog, without installing any modifications or plugins. My blog is hosted on GitHub pages, so this is a requirement.

Assign tags to blog posts

Firstly, you need to give each blog post some tags. You need to do this in the post’s front matter table, in a custom property called ‘tags’.

---
title: Blog Title
layout: post
tags:
- tag1
- tag2
- tag3
- tag4
---

Create Index Pages

Next you need to create a page which shows all the posts in a particular tag.

<h3>Reviews</h3>
{% for post in site.posts %}
{% if post.tags contains "reviews" %}
<article class="blog">
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
<span class="topright">
<a href="{{ post.url }}">
{{ post.date | date_to_long_string }}
</a>
</span>
{{ post.content }}
</article>
{% endif %}
{% endfor %}

I saved this as /tags/reviews.html, but the place is up to you.

Add list of tags to the post’s layout

<ul class="tags">
{% for tag in page.tags %}
<li><a href="{{ site.base_url }}tags/{{ tag | replace:" ":"_" }}">
{{tag}}
</a></li>
{% endfor %}
</ul>

I put this in the layout for displaying posts. You can use a slightly modified version on blog post lists, such as the homepage.

Here is the style for it:

.tags:before {
color: #666;
content: "In: ";
}

.tags {
margin: 0 0 6px 20px;
padding: 0;
}

.tags li {
display: inline-block;
margin: 0;
padding: 0 3px 0 0;
}
.tags li a {
display: block;
padding: 0;
margin: 0;
color: #777;
text-decoration: none;
}

.tags li a:hover {
color: #999;
text-decoration: underline;
}

.tags li a:after {
content: ",";
}

.tags li:last-child a:after {
content: "";
}