Slow Blogging: Fuzzy Dates with Hugo

There’s a term called “slow blogging.” It’s in the same vein as terms like “slow food” and even “slow television.” While I won’t offer my own definiton here, in general it refers to the practice of writing more contemplative blog posts at a slower rate, instead of churning out new content at a breakneck pace regardless of quality.

There’s just one issue with most blogging platforms as it relates to slow blogging: by default they show a date like “June 17th, 2021”, as if people care about the exact day something was posted.

If you are writing a news blog or political commentary, the date can be useful to readers. But if your blog’s content skews more toward that of a biweekly magazine or monthly journal, having the exact date of the month doesn’t offer much value.

With a static site generator like Hugo you can change the date format of a post to only show the month and the year (e.g. “June 2021”); that can be a great option for many blogs. But while I wanted to move away from precise dates, I wanted to give readers some indication of what time of month it was posted: for example, a post would be labeled “Early June 2021” or “Mid-June 2021” or “Late June 2021.”

Here’s how I implemented this on my Hugo-based blog:

I created a new file in the layout/partials folder of my site’s template called fuzzydate.html. It contains the following code:

{{- if .Date -}}
<date>
    {{- if lt (.Page.Date.Format "2") (11) -}}
        Early {{.Page.Date.Format "January 2006"}}
    {{- end -}}
    {{- if and 
        (gt (.Page.Date.Format "2") 10) 
        (lt (.Page.Date.Format "2") 20)
    -}}
        Mid-{{.Page.Date.Format "January 2006"}}
    {{- end -}}
    {{- if gt (.Page.Date.Format "2") (19) -}}
        Late {{.Page.Date.Format "January 2006"}}      
    {{- end -}}
</date>   
{{- end -}}

Then I edited the main index template as well as the single-post template to include the following line where I want to insert the post’s date:

{{- partial fuzzydate.html . -}}

Voilà – now my blog’s visitors can see what year, month, and general time of the month that something was posted without anyone worrying about the exact date!

July 2021 Update: Just in case search engines, etc are looking for an exact date, I decided to include that in the HTML code of my pages, but in a <date> tag that is hidden for human visitors. Now my layouts/partials/fuzzydate.html looks like this:

{{- if .Date -}}
<div class="date">
    {{- if lt (.Date.Format "2") (11) -}}
        Early {{.Date.Format "January 2006"}}
    {{- end -}}
    {{- if and 
        (gt (.Date.Format "2") 10) 
        (lt (.Date.Format "2") 20)
    -}}
        Mid-{{.Date.Format "January 2006"}}
    {{- end -}}
    {{- if gt (.Date.Format "2") (19) -}}
        Late {{.Date.Format "January 2006"}}      
    {{- end -}}
</div>   
<date>{{.Date.Format "January 2, 2006"}}</date>
{{- end -}}

And in my CSS I have the following line:

date {display:none;}

Comments

No comments yet.