+++
date = "2019-09-30T01:00:34+00:00"
publishdate = "2023-12-29T07:08:55+00:00"
title = "Generating Archive Pages with Hugo"
slug = "generating-archive-pages-with-hugo"
author = "Thedro"
tags = ["hugo"]
type = "posts"
summary =  "In the absence of a search engine --- archive pages are a quick and simple way to find older arcticles quicky."
draft =  ""
syntax =  "1"
toc =  ""
updated =  "2020-10-05"
+++

{{< image source="/images/generating-archive-pages-with-hugo.png" title="Archive Page" >}}
Archive Page {{< /image >}}

In the absence of a search engine --- an
{{< sidenote mark="archive" set="right" >}}Check out
[my posts archive page.](/posts/archive){{< /sidenote>}} page is a simple way to
find older articles quickly. Here is a quick and dirty way to create multiple
archive pages with [Hugo.](https://gohugo.io/)

There are a few requirements. The archive pages should be a bit modular. We
should be able to just drop an `archive.md` file into any folder within the
content directory and generate a single archive page for that topic.

```text
hugo
|__ content
    |__ posts
        |__ archive.md
        projects
        |__ archive.md
```

We should be able to generate clean slugs. Hugo makes that
{{< sidenote mark="easy." set="right" >}}`URL`s are typically generated according
to the file directory structure.{{< /sidenote>}} The slugs for each archive page
topic would be of the form `/posts/archive` and `/projects/archive`.

We could also take a more pragmatic approach by using the following file
directory structure which results in slugs like `/archives/posts` or
`/archives/projects`.

```text
hugo
|__ content
    |__ archives
        |__ posts.md
        |__ projects.md
```

The content of each archive page will be determined by the parameters within the
front matter, particularly the `layout` parameter. The front
{{< sidenote mark="matter" set="right" >}}The front matter is the only data in
this file actually.{{< /sidenote>}} content in `posts/archive.md` will contain
the needed parameters to generate that page.

```yaml
---
title: "Posts Archive"
layout: archive
hidden: true
type: posts
summary: This page contains an archive of all posts.
---
```

The `layout` parameter will reference the template
`layouts/_default/archive.html` to render a single archive page. That template
file is shown below.

```html
{{ define "main" }}
<section>
  {{ $type := .Type }}
  {{ $.Scratch.Set "count" 1 }}

  {{ range (.Site.RegularPages.GroupByDate "2006") }}
    {{ if and (gt .Key 1) (gt (where .Pages "Type" $type) 0) }}

      {{ range (where .Pages "Type" $type) }}
        {{ if (eq ($.Scratch.Get "count") 1) }}
          {{ $.Scratch.Set "count" 0 }}
          <h1>{{ .Date.Format "2006" }}</h1>
        {{ end }}
      {{ end }}

      {{ $.Scratch.Set "count" 1 }}

      <ul>
      {{ range (where .Pages "Type" $type) }}
        {{ if (ne .Params.hidden true) }}
          <li>
            <a href="{{ .RelPermalink }}">
              <span>{{ .Date.Format "02 Jan" }}</span> — {{ .Title }}
            </a>
          </li>
        {{ end }}
      {{ end }}
      </ul>
    {{ end }}
  {{ end }}
</section>
{{ end }}
```

This template groups all posts for a particular topic by year and orders them by
the month, taking into account the `type` parameter from the front matter of
`archive.md`. Note the use of the `.Scratch`
{{< sidenote mark="function." set="left" >}}[.Scratch](https://gohugo.io/functions/scratch/)
allows us to create a sort of scratchpad for variables. Is this the best way to
set up a boolean variable? Who knows ...{{< /sidenote>}} There is most
likely a much cleaner {{< sidenote mark="implementation" set="right" >}}The
count variable ends the iteration early and grabs the year once before
displaying the article titles. The [first](https://gohugo.io/functions/first/)
function would have been a better choice.{{< /sidenote>}} but this is good
enough.

There are quirks when implementing an archive page as a single post. We may want
to adjust the `RSS` and pagination templates to hide additional data produced by
an archive page with the `hidden: true` attribute.