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