How can I add tags to a Jekyll blog?

Here I show you how to add tags to your Jekyll blog. You’ll be able to write posts like:

---
title: "How can I add tags to a Jekyll blog?"
tags: ["programming", "jekyll"]
---

Here is your post content ...

For each tag like programming, you will have a page that lists all posts with that tag at /tag/programming. To create these dynamic pages, you need a Jekyll “generator” plugin. Put the following plugin at _plugins/tags.rb:

module Jekyll
  class TagPageGenerator < Generator
    safe true

    def generate(site)
      tags = site.posts.docs.flat_map { |post| post.data['tags'] || [] }.to_set
      tags.each do |tag|
        site.pages << TagPage.new(site, site.source, tag)
      end
    end
  end

  class TagPage < Page
    def initialize(site, base, tag)
      @site = site
      @base = base
      @dir  = File.join('tag', tag)
      @name = 'index.html'

      self.process(@name)
      self.read_yaml(File.join(base, '_layouts'), 'tag.html')
      self.data['tag'] = tag
      self.data['title'] = "Tag: #{tag}"
    end
  end
end

The above plugin uses a template at _layouts/tag.html. Here’s a minimal example of that layout:

<!doctype html>
<html>
  <head>
    <title>Tag: #{{page.tag}}</title>
  </head>
  <body>
    <h1>Tag: #{{page.tag}}</h1>
    <ul>
      {% for post in site.posts %}
      {% if post.tags contains page.tag %}
      <li><a class="post" href="{{ post.url }}">{{ post.title }}</a></li>
      {% endif %}
      {% endfor %}
    </ul>
  </body>
</html>

Finally, link to those tag pages from your blog posts. If your posts use _layouts/default.html, this could look like:

<!doctype html>
<html lang="en">
  <head>
    <title>{{page.title}}</title>
  </head>
  <body>
    <h1>{{page.title}}</h1>
    {{content}}
    <p>
      Tagged
      {% for tag in page.tags %}
      <a class="post" href="/tag/{{tag}}">#{{tag}}</a>{% unless forloop.last %}, {% endunless %}
      {% endfor %}
    </p>
  </body>
</html>
Tagged #programming, #jekyll.
👋 I'm Jim, a full-stack product engineer. Want to build an amazing product and a profitable business? Read more about me or Get in touch!

More by Jim

This page copyright James Fisher 2019. Content is not associated with my employer. Found an error? Edit this page.