Simple Site Summary in Hugo

Here’s a simple way to organize your taxonomies and have a bird’s eye view of the number of posts per category/tag in Hugo.

The Problem

As techformist.com grew, I became more and more disorganised in maintaining taxonomies. I had some interesting situations -

• a “static-site” category coexist with “static sites” category
• confusion b/w why I chose a few terms to be tags rather than categories in their own right
• the recurring need to “rethink taxonomy structure” depending on the flavour of the month and time of the day

This often required me to go back and change a few taxonomy terms, or to reorganize site structure in order to provide better visibility to chosen topics.

I also developed this habit of referring back to the older topics with a site search / VSCode search just to copy/paste tags and categories from an older post.

This was frustrating.

The Solution

There were couple of simple solution options -

1. Create a summary page on the site
2. Include counts in the manually maintained writing/editorial calendar (and bring some automation to that side of the world while at it)
3. Analyse sitemap to get a nice summary and maintain that analysis somewhere

In the end, I felt it would be easier to create a quick summary page on the site and refer back to it, rather than over-engineer a solution.

So, I created this summary page with just a few lines of code for layout.

I can now -

1. Quickly check the categories / tags and select relevant combination for a new post
2. Keep an eye on the counts and refocus on things that I have to write more about
3. Satisfy my ego by showing the post counts and by hiding away more useful statistics such as the usefulness & longevity of the content

How to implement this in your own Hugo site?

Create a file called “summary.html” in your layouts folder.

{{ partial "header" . }} 

{{ partial "header/header" . }}

{{/*-- post count */}}
{{ $posts := (where .Site.RegularPages "Section" "==" "posts") }}
{{ $postCount := len $posts }}

{{/*-- page count */}}
{{ $pages := (where .Site.RegularPages "Section" "==" "page") }}
{{ $pageCount := len $pages }}


<div style="overflow: auto;">
  <table>
    <thead>
      <tr>
        <td style="text-align:center;font-weight: bold;width: 10em;">Description</td>
        <td style="text-align:center;font-weight: bold;">Value</td>
      </tr>
    </thead>
    <tbody>
      <tr><td>Pages</td><td>{{ $pageCount }}</td></tr>
      <tr><td>Posts</td><td>{{ $postCount }}</td></tr>
      <tr><td>Post by Categories</td>
        <td>
          {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
            <a href="/categories/{{ $name | urlize }}">{{ $name | humanize }} ({{ $taxonomy.Count }})</a>
            &nbsp;
          {{end}}
        </td>
      </tr>
      <tr><td>Post by Tags</td>
        <td>
          {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
            <a href="/tags/{{ $name | urlize }}">#{{ $name | humanize }} ({{ $taxonomy.Count }})</a>
            &nbsp;
          {{end}}
        </td>
      </tr>
    </tbody>
  </table>

{{ partial "footer" . }}

As you can see, I am no where near an expert on Hugo. Or, even basic styling in HTML :)

Next, create a content page in pages folder. This is to better organize structure in the future.

---
title: Summary of Posts
url: summary
type: page
layout: summary
date: 2020-02-20 20:20:20
comments: false
---

This is a summary of the site that lists categories, tags and what not alongside the number of posts. Not quite useful for anyone other than the publishers.

Navigate to <your site>/summary.

Have fun.