Your Own Gravity Your Own Gravity     Categories     About     Feed    

Jekyll Categories

I recently implemented categories on this site, which are really acting as tags here. Jekyll supports both, and if you override the default URL scheme in config.yml (which puts a post “under” its category in the URL, e.g. /technology/my-interesting-post – I’m using permalink: /:title/ instead), the difference mostly evaporates. I figured I’d just stick with categories for now.

Anyway, here is how I implemented it. First, a slightly modified categories.rb plug-in from the Jekyll site goes in your _plugins folder:

module Jekyll

  class CategoryPage < Page
    def initialize(site, base, dir, category)
      @site = site
      @base = base
      @dir = dir
      @name = 'index.html'

      self.read_yaml(File.join(base, '_layouts'), 'categories.html')['category'] = category

      category_title_prefix = site.config['category_title_prefix'] || 'Category: '['title'] = "#{category_title_prefix}#{category}"

  class CategoryPageGenerator < Generator
    safe true

    def generate(site)
      if site.layouts.key? 'categories'
        dir = site.config['category_dir'] || 'categories'
        site.categories.each_key do |category|
          site.pages <<, site.source, 
			File.join(dir, category), category)


Next, create a categories.html layout for the categories pages in your _layouts folder:

layout: default

<article class="page">
  <h3>Category: {{ page.category }}</h3>
  {% for post in site.categories[page.category] %}
    <p><a href="{{ post.url }}">{{ post.title }}</a></p>
  {% endfor %}

Then add support in the post.html layout to show categories somewhere in your post layout (I put it at the end of the post content):

<article class="post">
  <h1 class="post-title">{{ page.title }}</h1>
  <time datetime="{{ | date_to_xmlschema }}" 
    class="post-date">{{ | date_to_string }}</time>
  {{ content }}
    {% if page.categories != empty %}
        <p class="category">Categories &nbsp;&nbsp; 
        {% for category in page.categories %}
          <a href="/categories/{{ category }}">
            {{ category }}</a> &nbsp;&nbsp;
        {% endfor %}
    {% endif %}

You should now be able to find posts by categories, e.g. /categories/Technology.

Categories    Meta    Technology