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 asfeed.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:
- 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 thecontent
folder. - Groups pages by date: The
.GroupByDate
function groups the filtered pages by the “January 2006” date format. - Iterates over each group: For each group, it displays a header with the month/year (
{{ .Key }}
), and iterates over the pages within the group. - 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.
What are your thoughts on this post?
I’d love to hear from you! Click this link to email me—I reply to every message!
Also use the share button below if you liked this post. It makes me smile, when I see it.