Super simple yearly post archives for Hugo

I was looking for the most simple way to get automatic yearly archives of all blog posts for the Hugo setup responsible for (this blog).

Fortunately I ran into Rohan Verma’s template-based solution which I could then simplify into the even more straight-forward shortcode-based solution presented in this post.

For an example of the output, see the post archives here.

To make this happen on your Hugo setup is a two step process.

Step 1: Install shortcode

Save the following snippet as layouts/shortcodes/archive.html.

Note that you might have to change "posts" in the code below to whatever Hugo section contains your blog posts.


simple shortcode to display all posts in yearly sections on your archive page
by Charl P. Botha

this is a much simplified version of the yearly post archiving template at:


{{ $prev := 3000}}
{{range where .Site.RegularPages "Section" "posts"}}
{{if .Date}}
{{if gt $prev (.Date.Format "2006")}}
## {{ .Date.Format "2006" }}
{{.Date.Format "02 Jan"}} -- [{{.Title}}]({{.Permalink}})
{{ $prev = .Date.Format "2006"}}

Step 2: Use shortcode

Use the shortcode on any page as {{% archive %}}, as shown in the example below.

Note here that we’re using the shortcode syntax for markdown shortcodes, i.e. % instead of the < you might be more used to for HTML shortcodes.

title: "Posts Archive"
slug: "archive"
date: 2021-01-09T16:17:00+02:00
type: "page"

Some text that will appear before the archive.

{{% archive %}}