View posts grouped by month in Hugo

A few months ago, I wrote a post on creating a feed page to list all posts on my Hugo website in a card format with pagination. Even though I am able to view the full posts, I wanted a clearer month-by-month view. After researching, I updated the feed to organize posts by month. Now, I’m sharing the setup details below for anyone interested in creating a similar layout.

There are three steps involed to create a page where posts showing month wise.

• Create the index file.
• Then create the layout of the monthly view.
• Finally add the menu in the config file.

Let’s deep dive into the above steps.

Create the index file

Create an _index.md page in the content/feed folder as shown below.

---
type : "tags"
Title: "Feed"
Subtitle: ""
---

Listing all the posts in reverse chronological order.

Create the layout of the monthly view

• Create a file in your theme folder in the /layouts/section/ and name it as feed.html.
• Added the below code in the feed.html.

feed.html

{{ define "main" }}
<div class="container" role="main">
    <div class="row">
        <div class="col-lg-12 col-md-12 pb-3">
            <p class="m-0">Listing all the posts in reverse chronological order. To view the tags click <a
                    href="/tags">here</a>.</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            {{ with .Content }}
            <div class="well">
                {{.}}
            </div>
            {{ end }}
        </div>
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            {{ range (where .Site.RegularPages "Type" "in" (slice "notes" "blogs")).GroupByDate "January 2006" }}
            <h3 class="mt-4">{{ .Key }}</h3>
                {{ range .Pages }}
                <div class="card mb-2 p-2">
                    <a class="title" href="{{ .Params.externalLink | default .RelPermalink }}">
                        {{ $datestr := default (i18n "dateFormat") .Site.Params.dateformat | .Date.Format }}
                        <a href="{{ .Permalink }}" aria-label="Link to {{ .Title }}">
                            {{ if .Title }}
                            <h4 class="post-title fw-light m-0">{{ .Title }}</h5>
                            {{ else if $datestr }}
                            <h4 class="post-title fw-light m-0">{{ $datestr }}</h5>
                            {{ end }}
                        </a>
                </div>
                {{- end -}}
            {{ end }}
        </div>
    </div>
</div>
{{ end }}

Add the menu

Finally you can add the feed page link in the menu by adding the below code in your hugo.toml config file.

[[menu.main]]
    name = "Feed"
    url = "/feed/"
    weight = 2 #Give the required menu weight here

Ya, that’s all we need to do. You can run your Hugo website by running the command hugo server and look into the Feed menu for view the posts in monthwise.

Explanation of the code

This Hugo template code does the following:

1. Filters pages by type: It filters the .Site.RegularPages to include only specific types (e.g., “notes”, “blogs”, etc.). You can give your folders in the content folder.
2. Groups pages by date: The .GroupByDate function groups the filtered pages by the “January 2006” date format.
3. Iterates over each group: For each group, it displays a header with the month/year ({{ .Key }}), and iterates over the pages within the group.
4. Displays title or date: For each page, it displays the title if available, otherwise, it shows the post’s publication date.

This setup organizes posts in your feed by month, making it easier to navigate your content. Hope you understood how we can create a feed page in Hugo.