Set up a feed/ archive page in Hugo to display all posts

This website contains various types of blogs, both technical and non-technical, that can be accessed through the following links: blog, notes, and desk. I wanted to have a single page where I could see all the posts I have written on this website and track my blogging progress. That’s why I created this feed page, where you can find all my blogs from this website.

Let’s break down how we can create the feed page.

First create an _index.md page in the content/feed folder .
Then create a template in /layouts/section/feed.html to loop the posts.
Finally create a template /layouts/partials/post_preview_card_list to display the posts.

Yes that’s it. It will give you feed page where every blogs from every folder is listed in chronogical order.

Below is the _index.md, feed.html, and post_preview_card_list.html page for easy reference.

_index.md

---
type : "tags"
Title: "Feed"
Subtitle: "Listing all the posts in chronological order."
---

feed.html

{{ define "main" }}
<div class="container" role="main">
    <div class="row">
        <div class="col-md-12">
            {{ with .Content }}
            <div class="well">
                {{.}}
            </div>
            {{ end }}
        </div>
        <div class="row justify-content-center">
            {{ $paginator := .Paginate .Site.RegularPages}}
            {{ range $paginator.Pages }}
            // Partial page to display the contents
            {{ partial "post_preview_card_list.html" .}}
            {{ end }}
        </div>
    </div>
</div>

<div class="container">
    <div class="row font-sans">
        <div class="col-md-12 mt-10">
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-end">
                    {{ template "_internal/pagination.html" . }}
                </ul>
            </nav>
        </div>
    </div>
</div>
{{ end }}

post_preview_card_list.html

<div class="col-sm-12  col-md-12 col-lg-12 col-xl-12 mb-3">
    <a href="{{ .Permalink }}" aria-label="Link to {{ .Title }}">
        <div class="card">
            <div class="card-body">
                {{ if .Title }}
                <h3 class="post-title">{{ .Title }}</h3>
                {{ end }}

                {{ if .Params.subtitle }}
                <h3 class="post-subtitle">
                    {{ .Params.subtitle }}
                </h3>
                {{ end }}
                <p class="post-meta">
                    {{ partial "post_meta_notes.html" . }}
                </p>
                {{ print }}
                <div class="post-entry">
                    {{ if .Description }}
                    {{ .Description }}
                    {{ else }}
                    {{ .Summary }}
                    {{ end }}
                    
                </div>
                <div class="read-more-section pt-3 ">
                    <h6><a href="{{ .Permalink }}" class="text-muted link-underline" alt="Link to {{ .Title }}">Read more <i
                        class="bi bi-arrow-right"></i></a> </h6>
                </div>
            </div>

            {{ if .Params.tags }}
            <div class="card-footer text-muted">
                <div class="blog-tags">
                    {{ range .Params.tags }}
                  
                    <a href="{{ $.Site.LanguagePrefix | absURL }}/tags/{{ . | urlize }}/">{{ . }}</a>
                    {{ end }}
                </div>
            </div>
            {{ end }}
        </div>
    </a>
</div>

Hope you understood how we can create a feed page in Hugo.