I was looking for the most simple way to get automatic yearly archives of all blog posts for the Hugo setup responsible for cpbotha.net (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:
https://rohanverma.net/blog/2019/11/15/archive-pages-group-by-year-hugo/
*/}}
{{ $prev := 3000}}
{{range where .Site.RegularPages "Section" "posts"}}
{{if .Date}}
{{if gt $prev (.Date.Format "2006")}}
## {{ .Date.Format "2006" }}
{{end}}
{{.Date.Format "02 Jan"}} -- [{{.Title}}]({{.Permalink}})
{{ $prev = .Date.Format "2006"}}
{{end}}
{{end}}
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 %}}