published on 22.08.2020

Tags in Hugo is a default taxonomy and we don’t need any special configuration to use tags. We just enter the tags in the post’s front-matter. This can be YAML, TOML, or JSON. I’m using the YAML format, just a personal preference.

tags: ["hugo", "tags"]

In this example, Hugo will create tags/hugo and tags/tags pages for us. These pages are called term pages and the /tags is a taxonomy page. If you want to change these pages you need to create templates: /layouts/tags/list.html for tags page and /layouts/tags/term.html term pages. I write a bit about Hugo templates in and this post and this post. This is a different topic.

Render Tags

In this post, I’ll explain “how to get tags of specific pages” and “how to generate tag cloud”. To achieve the first one, I’ve created a partial called get_tags.html. After that, you can use it where ever you want.

{{ with .Param "tags" }}
  {{ range $index, $tag := (. | sort) }} 
  {{ with $.Site.GetPage (printf "/%s/%s" "tags" $tag) }}
    <a href="{{ .Permalink }}">#{{ $tag | urlize }}</a>
  {{ end }}
  {{ end }}
{{ end }}

This code gets the tags from the page’s front-matter. Sorts them alphabetically then returns HTML links. I also added the hash “#” symbol at the beginning of the tag, and the styling will come from the CSS.

To create a tag-cloud I’ve found two solutions online, both works. The first one is the one I’m using, will create a tag-cloud using relatively bigger font sizes for more frequent tags. The other is more simple, it’ll just gather all tags, all with the same font-size.

<div class="container tagcloud">
    {{ if ne (len $.Site.Taxonomies.tags) 0 }}
      {{ $largestFontSize := 1.4 }}
      {{ $smallestFontSize := 1.0 }}
      {{ $fontSpread := sub $largestFontSize $smallestFontSize }}
      {{ $max := add (len (index $.Site.Taxonomies.tags.ByCount 0).Pages) 1 }}
      {{ $min := len (index $.Site.Taxonomies.tags.ByCount.Reverse 0).Pages }}
      {{ $spread := sub $max $min }}
      {{ $fontStep := div $fontSpread $spread }}
        {{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
          {{ $tagCount := len $taxonomy.Pages }}
          {{ $currentFontSize := (add $smallestFontSize (mul (sub $tagCount $min) $fontStep) ) }}
          {{ $weigth := div (sub (math.Log $tagCount) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
          {{ $currentFontSize := (add $smallestFontSize (mul (sub $largestFontSize $smallestFontSize) $weigth)) }}
            <a href="{{ "/tags/" | relURL }}{{ $name | urlize }}" 
            class="tagcloud-item" style="font-size: {{ $currentFontSize }}rem;">
              {{ $name }}<sup>{{ $tagCount }}</sup>
        {{ end }}
    {{ end }}

I’ve changed the code a little and colorized each item using a little sass, you can see the result at Tags.

Happy tweaking!

You are reading the 8th of 19 episodes in Hugo.
Published on 22.08.2020 by Mert Bakır with commit de81d3f.
#hugo #static-site
Next episode:
Last Modified Date in Hugo
published on 22.08.2020

I like to display “published date” and “last modified date” info for my posts. Date info comes from the date parameter and last modified info comes from the lastmod parameter, both defined in the front-matter. […] …

published on 22.08.2020

We talked about rendering dates and the last modification date in the last post. Now, we’ll look into how can we convert month names into another language? I’ve had a similar experience last year with jekyll. The idea is the same, we need to map each month to their version of the …

published on 29.08.2020
edited on 17.01.2022

In Hugo and generally other static website generators, we are using data files to store data. These files can be in YAML, TOML, or JSON formats. You can always read more about data template in the original documentation. Yet, I want to give some examples from my blog. First of all, converting dates …

published on 10.07.2022

Previously, I’ve published a blog post about deploying static content on heroku with basic authentication. The main purpose was to get basic auth for a freely hosted static website. In that post, we hosted the source code on GitLab and configured a CI/CD pipeline to render the static content …

published on 28.05.2022

Each git commit has a field called Author which consists ‘’ and ‘’. We usually set these variables once, after installing git, with git config --global so that each repo gets the variables from the global definition. We can also set them locally for a …

published on 25.05.2022

In this post, I’ll first walk through hosting static content with basic authentication. Then, we’ll look into deploying to Heroku using GitLab Pipelines, more specifically deploying a certain sub-directory within the project instead of pushing the whole project. Also, I’ll share …

published on 17.04.2022
edited on 15.07.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …