There are several plugin available for working with tags in Jekyll. I’m using jekyll-tagging by Arne Eilermann. Although this plugin already contains a tag_cloud function, I choose to create a bit of liquid template so I could style tag entries based on how often they are used.

Follow the guidelines on github page to setup the jekyll-tagging plugin to generate a page for each tag. My tag-template simply shows a list of posts similar to the home page. All tag pages are created in the tags folder.

Next is to create a page, or sidebar content, to show a tag cloud of all tags.

Getting all tags

The site.tags property is a Map where the key is the tag and the value is all the pages in which the tag is used. However, Liquid does not seem to have a way to only get the keys of a map since the pages are not needed for creating a tag cloud.

To capture all tags in a tags variable, loop over all site.tags and return only the first entry which is the tag name.

{% capture tags %}
  {% for tag in site.tags %}
    {{ tag[0] }}
  {% endfor %}
{% endcapture %}

The resulting tags variable is a String with spaces between all tag names. Split the string to get an array of tags.

{% assign sortedTags = tags | split:" " | sort %}

Display tags

Then simply loop over all tags to display them. All related posts can be taken from site.tags using the tag as key. So to get the count on how many posts were tagged with a given tag, use site.tags[currentTag].size.

The jekyll-tagging plugins provides several filters (See the source file)

• tag_url provides a url to the tag page generated by the plugin.
• tag_link provides a html link to the tag page.

<ul class="cloud">
{% for st in sortedTags %}
  <li class="tag{{ site.tags[st].size }}">{{ st | tag_link }}</li>
{% endfor %}

Styling

The styling of the tag cloud was inspired by this CSS from Maroun Baydoun. It is now SASS and dynamically generates classes ‘tag1’ to ‘tag25’.

/**
 Based on CSS by Maroun Baydoun: https://gist.github.com/maroun-baydoun/4188213
**/
tagcloud {
  padding: 1em;
}

.cloud
{
  list-style:none;
  width:90%;
  padding:0;

  & li
  {
    float:left;
    margin:1px 10px;
    font-size:14px;
    min-height:35px;
    line-height:30px;

    a {
      text-decoration:none;
      //color:#DB0058;
      color: $colorPink;
      font-family:Arial;
      font-weight:bold;

      transition:opacity 0.8s;
      -webkit-transition:opacity 0.8s;
      -moz-transition:opacity 0.8s;
      -o-transition:opacity 0.8s;
    }
  }

  &:hover li a
  {
    opacity:0.3;

    &:hover {
      //color:#0B61A4;
      color: $colorDarkBlue;
      opacity:1;
    }
  }

  // Generate tag1 to tag25 classes
  @for $i from 1 through 25 {
    & li.tag#{$i} {
      font-size: 0.1 * ($i - 1) + 1em;
    }
  }
}

This is the full template of the tag cloud page in tags/index.md so this page gets generated in the same folder as where the tag pages are created.

Full template

---
layout: default
title: Tags
menu: 20
---

<h1>Tag cloud</h1>

<tagcloud>
  {% capture tags %}
    {% for tag in site.tags %}
      {{ tag[0] }}
    {% endfor %}
  {% endcapture %}

  {% assign sortedTags = tags | split:" " | sort %}
  <ul class="cloud">
  {% for st in sortedTags %}
    <li class="tag{{ site.tags[st].size }}">{{ st | tag_link }}</li>
  {% endfor %}
  </ul>
</tagcloud>