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: "";
}