An easy way to support tags in a jekyll blog

Question

I am using the standard jekyll installation to maintain a blog, everything is going fine. Except I would really like to tag my posts.

I can tag a post using the YAML front matter, but how do I generate pages for each tag that can will list all posts for a tag?

Answer 1

Here is a solution with alphabetically sorted tags on a single page.
It uses Liquid only, which means that it works on GitHub Pages:

{% capture tags %}
  {% for tag in site.tags %}
    {{ tag[0] }}
  {% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}

{% for tag in sortedtags %}
  <h3 id="{{ tag }}">{{ tag }}</h3>
  <ul>
  {% for post in site.tags[tag] %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
  </ul>
{% endfor %}

You can see it in action here.

---

EDIT:

There's also a way to generate a separate page for each tag without plugins (which will work on GitHub Pages).

I have a more detailed explanation on my blog:
Separate pages per tag/category with Jekyll (without plugins)

First, you need a new layout file:

/_layouts/tagpage.html:

---
layout: default
---

<h1>{{ page.tag }}</h1>

<ul>
{% for post in site.tags[page.tag] %}
  <li>
    {{ post.date | date: "%B %d, %Y" }}: <a href="{{ post.url }}">{{ post.title }}</a>
  </li>
{% endfor %}
</ul>

With this layout file, you can add a new tag page by adding a new file with just two lines of YAML front-matter.

Here's an example for the jekyll tag:

/tags/jekyll/index.html:

---
layout: tagpage
tag: jekyll
---

The only disadvantage of this approach: each time you use a new tag for the first time, you have to remember to create a new two-line file for it.

To generate the root index file (i.e. the list of tags that links to /tags/jekyll/index.html etc.), you can use a similar solution like the one on top of this answer where I generate a single page with alphebetically sorted tags:

{% capture tags %}
  {% for tag in site.tags %}
    {{ tag[0] }}
  {% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
    <a href="/tags/{{ tag }}/">{{ tag }}</a><br>
{% endfor %}

This will generate a list of links like this:

<ul>
    <li><a href="/tags/.net/">.net</a></li>
    <li><a href="/tags/authentication/">authentication</a></li>
    <li><a href="/tags/backup/">backup</a></li>
</ul>

Note that this solution uses a blank to split tags, so it doesn't work when your tags contain blanks and Yevgeniy Brikman's comment applies here as well.

Answer 2

This gist will generate a page per category for you: https://gist.github.com/524748

It uses a Jekyll Generator plugin, plus a Page subclass.

Answer 3

Have a look at sites using jekyll. There are a few custom forks which have implemented tagging functionality, hopefully also in the way you want :-)

Answer 4

I had the same question, and stumbled upon this: http://gist.github.com/143571.

It's a rake task which generates a tag list. I modified it slightly, and my version is at: http://github.com/mattfoster/mattfoster.github.com/blob/master/Rakefile.

Whilst this doesn't give you a page per tag, you can use anchors, which is half way there!

Answer 5

I use the great Jekyll Tagging plugin that automatically generates a tags cloud and tag pages. Easy to install and use.

Here is a page for the "photo" tag on my blog (in french), and you can see the tags cloud in the bottom.

Answer 6

Based on Christian's answer above I made a bash script that does what he described.

https://github.com/ObjectiveTruth/objectivetruth.github.io/blob/master/rebuild_tags.sh

Be sure to have the accompanying 14 line vim script in the /non_website_resources/ directory

AND

Make the /_layouts/tagpage.html shown in Christian's answer above but rename it to /_layouts/tag_pages.html

File structure should be like this:

.jekyll_website_root
├── _posts
├── _layout
│   ├── tag_pages.html
├── rebuild_tags.sh

Run from the root directory ./rebuild_tags.sh

If you get permission denied error be sure to run chmod 777 rebuild_tags.sh

---

If you look at scripts comments its fairly simple:

• Uses sed to find all the tags in every .md file in _post directory

• Uses sed to massage the data to proper format

• Takes all the unique tags and makes a directory and a index.html for each

This way, if you have any new tags, just run the script to rebuild the pages before pushing to github

A nice simple non-plugin way to do tags

---

EDIT

Removed dependency on other files. Just need the one script!