Jekyll doesn’t come with an out of box solution for generating Tag clouds, however with the support of Liquid markups and some basic CSS styling, we can generate Tag clouds ourselves without the need of any plugin. Jekyll is a great static site generation tool and during the past few weeks, I have moved many of my blogs including this one to Jekyll. One such missing piece is support for Tag clouds which is generally a desired element on Blogs. Since I host a few of my Jekyll generated blogs on GitHub pages, using a plugin to generate Tag cloud is not an option for me. GitHub builds Jekyll sites with safe option which allows only a few plugins (such as sitemap) to be included in your site. Therefore I generate Tag clouds manually using Liquid markups. One distinct feature of Tag clouds is to size the tag according to the number of posts that are marked with that tag. The greater the number of posts, the bigger the size of the tag will be. We will see how to generate such tag clouds on Jekyll shortly. Jekyll supports adding tags to a post by specifying them in the Front Matter. For e.g. the Front matter of this very post with tag specified as Jekyll is as follows. Note that, more than one tag can be specified for a Jekyll post and can be written as YAML list or a space-separated string. You can generate Tag pages for every tag by manually creating a tag page at a path like tagTAGNAME. Posts in the tag page can be displayed by traversing the posts in site.tags.TAGNAME (e.g. “TAGNAME = jekyll” in this case). I will post in detail on how to create tag pages in a separate post. Once you have tags setup in posts and tag pages created at URLs like tagTAGNAME, we can create a tag cloud using the code snippet below. We are traversing the tags in site after sorting them and then generating a link for every tag. While creating the link for tag page, we make sure to size every link to include the font size parameter as inline style. The size depends on the count of posts that is available for that particular site tag. Since we are specifying the font size in percentage here, I have done offsetting by 80 after multiplying the post count by 4. By doing this, tags with just one post will be sized at 84%, those with 2 posts will have size of 88% and so on… You may want to change these offset values as per your liking. We can add a bit more styling to the Tag cloud. Just some basic stuff like making them inline and adding some CSS styles.
