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
 - tag1
 - tag2
 - tag3
 - tag4

Create Index Pages

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

{% for post in site.posts %}
    {% if post.tags contains "reviews" %}
    <article class="blog">
        <h2><a href="{{ post.url }}">{{ post.title | escape }}</a></h2>
        <span class="topright">
            <a href="{{ post.url }}">
                {{ | date_to_long_string }}
        {{ post.content }}
    {% 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="/tags/{{ tag | replace:" ":"_" }}">
{% endfor %}

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