Mistress of My Domain

Making a Tag Cloud

Sometimes you decide that you just need a tag (and category) cloud. The top search result was from SuperDevResources by Kanishk Kunal, which worked pretty well, but I didn't like the sizes, and wanted to have fun colours. Here's my version:

<section id="tag-cloud">
  <h2>Web Tech Blog Tag Cloud</h2>
{% assign sortedCats = site.categories | sort %}
{% for category in sortedCats %}
{% assign cat = category[0] %}
  {%- unless cat == "blog" -%}
    <a class="category-cloud" href="{{ site.blogPath }}categories/{{ cat | slugify: 'pretty' }}"
        style="color: hsl({{ "now" | date: "%N" | divided_by: 400 }}, 100%, 40%); font-size: {{ category | last | size | logn }}em">
            {{ cat }}</a>
  {% endunless -%}
{% endfor %}
{% assign taglist = site.tags | sort %}
{% for tagitem in taglist %}
   {% assign tag = tagitem[0] %}
    <a class="tag-cloud" href="{{ site.blogPath }}tags/{{ tag | slugify: 'pretty' }}"
        style="color: hsl({{ "now" | date: "%N" | divided_by: 400 }}, 100%, 40%); font-size: {{ tagitem | last | size | logn }}em">
            {{ tag }}</a>
{% endfor %}

The code is very close to the same except that site.blogPath is something I defined for my stuff that won't exist for you. Since everything is in the blog category, there didn't seem to be any point to including it in the cloud.

For fun, I set the colour with HSL with a random hue. Since the hue defaults to a number that represents a degree between 0-360 but larger numbers just act as more circuits around the circle, big numbers just add to the randomness. So, I made a pseudorandom number generator by taking the current time in seconds and dividing by 400 and rounding to an integer. It works well enough for me. ¯\_(ツ)_/¯.

For the font sizes, I wanted more size variation, but with a size cap. Obviously, I needed logarithmic math, so I had to make a filter like so:

module Jekyll
  module LogFilter
    def logn(input)
      sprintf("%.2f", 1 + Math.log(input, 3))


For style, I borrowed the basic layout from Alvaro Montoro on DEV Community like so:

#tag-cloud h2{
    text-align: center;
    margin-top: 2em;
    margin-bottom: 0;
#tag-cloud nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
#tag-cloud a {
    display: block;
    padding: 0.125rem 0.25rem;
    text-decoration: none;
    position: relative;

Post a New Comment


Note: for security reasons, a mailto link is being used. If configured on your end, this is the safest way for both parties. This activates your mailer to send the data entered. See here or here for why that might not work and what to do about it.