Generating Archive Pages with Hugo

Archive Page
Archive Page

In the absence of a search engine — an Check out my posts archive page. page is a simple way to find older articles quickly. Here is a quick and dirty way to create multiple archive pages with Hugo.

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 URLs are typically generated according to the file directory structure. 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 The front matter is the only data in this file actually. 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 .Scratch allows us to create a sort of scratchpad for variables. Is this the best way to set up a boolean variable? Who knows … There is most likely a much cleaner The count variable ends the iteration early and grabs the year once before displaying the article titles. The first function would have been a better choice. 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.

30 September 2019 — Written
5 October 2020 — Updated
Thedro Neely — Creator
generating-archive-pages-with-hugo.md — Article

More Content

Openring

Web Ring

Comments

References

  1. https://thedroneely.com/git/
  2. https://thedroneely.com/
  3. https://thedroneely.com/posts/
  4. https://thedroneely.com/projects/
  5. https://thedroneely.com/about/
  6. https://thedroneely.com/contact/
  7. https://thedroneely.com/abstracts/
  8. https://ko-fi.com/thedroneely
  9. https://thedroneely.com/tags/hugo/
  10. https://thedroneely.com/posts/generating-archive-pages-with-hugo/#isso-thread
  11. https://thedroneely.com/posts/rss.xml
  12. https://thedroneely.com/images/generating-archive-pages-with-hugo.png
  13. https://thedroneely.com/posts/archive
  14. https://gohugo.io/
  15. https://thedroneely.com/posts/generating-archive-pages-with-hugo/#code-block-66020b6
  16. https://thedroneely.com/posts/generating-archive-pages-with-hugo/#code-block-be402dc
  17. https://thedroneely.com/posts/generating-archive-pages-with-hugo/#code-block-15d3ecc
  18. https://thedroneely.com/posts/generating-archive-pages-with-hugo/#code-block-2659d5d
  19. https://gohugo.io/functions/scratch/
  20. https://gohugo.io/functions/first/
  21. https://www.thedroneely.com/posts/generating-archive-pages-with-hugo.md
  22. https://thedroneely.com/posts/nixos-in-the-wild/
  23. https://thedroneely.com/posts/a-few-abstracts/
  24. https://thedroneely.com/posts/writing-strategy/
  25. https://git.sr.ht/~sircmpwn/openring
  26. https://drewdevault.com/2022/11/12/In-praise-of-Plan-9.html
  27. https://drewdevault.com/
  28. https://mxb.dev/blog/the-indieweb-for-everyone/
  29. https://mxb.dev/
  30. https://www.taniarascia.com/simplifying-drag-and-drop/
  31. https://www.taniarascia.com/
  32. https://thedroneely.com/posts/generating-archive-pages-with-hugo#isso-thread
  33. https://thedroneely.com/posts/generating-archive-pages-with-hugo#code-block-66020b6
  34. https://thedroneely.com/posts/generating-archive-pages-with-hugo#code-block-be402dc
  35. https://thedroneely.com/posts/generating-archive-pages-with-hugo#code-block-15d3ecc
  36. https://thedroneely.com/posts/generating-archive-pages-with-hugo#code-block-2659d5d
  37. https://thedroneely.com/posts/kubernetes-in-a-linux-container/
  38. https://thedroneely.com/posts/hugo-is-good/
  39. https://thedroneely.com/posts/web-browsers/
  40. https://thedroneely.com/posts/programming-sans-internet/
  41. https://thedroneely.com/archives/projects/
  42. https://drewdevault.com/2022/09/16/Open-source-matters.html
  43. https://mxb.dev/blog/make-free-stuff/
  44. https://thedroneely.com/sitemap.xml
  45. https://thedroneely.com/index.json
  46. https://thedroneely.com/resume/
  47. https://gitlab.com/tdro
  48. https://github.com/tdro
  49. https://codeberg.org/tdro
  50. https://thedroneely.com/analytics
  51. https://thedroneely.com/posts/generating-archive-pages-with-hugo#
  52. https://creativecommons.org/licenses/by-sa/2.0/
  53. https://thedroneely.com/git/thedroneely/thedroneely.com
  54. https://opensource.org/licenses/GPL-3.0
  55. https://www.thedroneely.com/
  56. https://thedroneely.com/posts/generating-archive-pages-with-hugo/#