Create Page With All Articles Using Hugo

The back story

When creating content for the site. I would often get many ideas, then need to track them with a “stub”. The workflow for content creation is mostly defined in the hugo stub. I needed a page where I could see a word count of all articles at a glance. I mainly use the archive page to determine which stub to work on next. I run two versions of the site. One is development, which is only available on my local network, and one production which is serviced by the CDN. This allows me to create many stubs for future articles.

Running a production and development version of Hugo

It was important to me to maintain a single copy of content I was publishing. Maintaining multiple revisions of content is confusing and error prone. Hugo has native support for Draft representation. Using draft: True in page front matter prevents the page from being published to the production Apache VirtualHost(Macros).

I implement two VirtualHost and run two instances of Hugo output. Hugo output is where the Hugo process watches the same directory and writes the contents of “public” to differnt locations.

Hugo output “versions”

Production

hugo -b https://65483.rasor.org --poll 3s -w

Development

hugo -D -b https://65483-d.rasor.org --poll 3s -w -d /www/65483-d.rasor.org/public

The archive

The archive page on either host allows me to evaluate the wordcount for each article allowing me to prioritze creating content based upon title. In the development version all “stubs” are listed. This process allows me to quickly determine what articles I need to work on.

The development version will output content to the “public” directory that is only serviced locally. This allows me to define pages with front matter that I only want to view locally.

create the required files and directories

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

{{ define "main" }}

<div class="container" role="main">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
  <main>
      {{ .Content }}

        {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
        {{ range $pages.GroupByPublishDate "January 2006" }}
        <h2 class="archive-year" id="{{.Key | urlize}}">{{.Key}}</h2>
                <ul class="year-of-posts">
                        {{ range sort .Pages "PublishDate" "desc" }}
                        <li>
                                <p>
                                        <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05-07:00" }}"></time>
                                        {{ .PublishDate.Format "January 2" }}: <a href="{{.Permalink}}">{{.Title}} </a>
                                        ({{- partial "time-to-read.html" . -}})
                                </p>
                        </li>
                        {{end}}
                </ul>
        {{end}}
  </main>
</div>
</div>
</div>

{{end}}

Line 9 is highlighted above

I wanted a way to exclude some sections from the archive. Line 9 calls an array from the hugo configuration file for which “sections” to include in the archive.

My hugo.toml files contains the following array. Which allows the sections listed to be populated into the archive “section”
mainSections = ["trips", "maintenance", "modifications", "tech"]

make a section

In my “content” folder I made a directory “all-trips” in that directory I placed a file _index.md Filename: _index.md

---
layout: archive
date: 2024-04-24T17:57:14-07:00
description: "The archive, all trips taken"
---

The above will allow you to have a archive page

If you would like email or rss feed updates. Visit the Subscribe page