Alternative Tags And Categories On GitHub Pages Without Plugins

tl;dr I found an alternative DRY way to use tags and categories on GitHub Pages without plugins.

Some of you might have read my former post in which I explained the use of _data and empty templates to simulate a semi-automatic “plugin”.

Since then, 2 years have passed and Jekyll 3.0 has become the new standard on GitHub.

While upgrading all my settings and browsing the documentation, I stumbled upon Jekyll Collections.

After playing around with this feature for a while, it turned out to be a pretty neat replacement for my previous approach.


How to do that?

  1. add a collection to your jekyll _config:

    collections:
      my_categories:
        output: true
        permalink: /blog/category/:name/
    
  2. create entries for your new collection (in this case /my_categories/food.md)

    ---
    layout: default
    slug: food
    name: Food
    whatever: another value
    ---
    
  3. profit!


So what happened here?

Instead of storing all information inside a data file + template I moved them to the front-matters section of their respective collection entry. A big advantage here is that there is just one place left to store the data.

The magic comes from output: true which causes jekyll to generate pages according to their permalink value.


How to use them?

This is basically analog to the previous post method, so it should be easy for you to switch.

  1. add some template logic on top of your post layout

    {% assign category = site.my_categories | where: "slug", post.category %}
    {% assign category = category[0] %}
    {% if category %}
        {% capture category_content %}<a class="label" href="{{ category.url }}">{{ category.name }}</a>{% endcapture %}
    {% endif %}
    
  2. place the generated tag content wherever you like inside your post layout

    <p id="post-meta">{{ category_content }}</p>
    
  3. annotate your post entry front-matter block as usual:

    ---
    layout: post
    title: Alternative Tags And Categories On GitHub Pages Without Plugins
    category: programming
    tags: [github, github-pages, jekyll]
    ---
    

Final remarks:

Tags work analog - check out my repository for a complete implementation.

Posted in Programming with : GitHub, GitHub Pages, Jekyll