When you’re considering Jekyll as your blogging platform, you’ll soon discover it’s tags support is not complete.
Tag feature basically consists of three abilities: a) adding tags to posts, b) displaying all tags, with posts count and c) browsing posts by tag.
As Jekyll has a built-in support for adding metadata to posts, with tags being part of it, the first two requirements are completed by rendering the metadata. The last feature however, requires the content to be dynamically generated (e.g. displaying all tags).
Typically, the server stores posts in a database, along with the tags. Upon request, a page with a list of post for a certain tag can be generated, either on the server (e.g. JSP) or client-side, with MVC frameworks, like Angular.JS or Ember.JS.
Jekyll, on the other hand. is a static page generator, which means the content is pre-generated and the pages are server ‘as-is’. A dynamic page, like a list of post for a tag, can’t be thus generated on demand. In this post, I’ll show one way of making up for this shortcoming.
Displaying tags on a post
As mentioned previously, Jekyll stores tags in post’s metadata, so displaying it is as easy as accessing it:
Listing all tags
Secondly, we want to be able to list all available tags, somewhere on the index page, to achieve a result like here
Jekyll offers global array
site.tags which contains information on all the tags. Each
element is an array as follows:  - tag name and  - all posts for the tag.
Knowing this, creating a list of tags requires just proper formatting:
Browsing posts by tag
Now, for the dynamic content. The trick presented below uses client-side filtering. The code uses jQuery for DOM manipulation, so you need to add this to the
That’s all! There are other ways of adding tag support to Jekyll. A different approach generating all tag pages up-front, upon deployment is described here