List Pages

Right now we have a home page that shows our last 5 posts that we wrote - when we click the link it brings us to a full page view of that post.

But what if we want to see a list of all our posts?

That is where Hugo’s list template comes in.

Template

Create a file called list.html inside of /layouts/_default.

Our folder structure should now look like this:

my-blog
├── archetypes
|   └── default.md
├── content
|   └── posts
|       └── my-first-post.md
├── data
├── layouts
|   ├── _default
|   |   ├── summary.html
|   |   ├── single.html
|   |   ├── list.html
|   |   └── baseof.html
|   └── index.html
├── static
├── themes
└── config.toml

Open the new list.html file and paste the following code:

{{ define "main" }}
<main>
  <header>
    <h1>{{ .Title }}</h1>
  </header>
  <div>
    {{ range .Pages }}
      {{ .Render "summary" }}
    {{ end }}
  </div>
</main>
{{ end }}

You will notice that this is very similar to our homepage template, but with one big difference.

Our homepage template used the first 5 function to render our first 5 posts, and in this template we do not use that function - so we will display all our posts.

To verify this template is working, save your changes and visit your local dev server at localhost:1313/posts.

If your dev server is running on a different port (outputted after running hugo serve) then replace 1313 with your port number.

Summary

You may also notice that we are reusing our summary.html template on this page as well. This ensures that our formatting on the homepage is exactly the same as our posts list page, because we are using the exact same code.

Note on paths

You may be wondering why we must go to /posts in our browser to see our posts. Well, this is because we put our posts inside the posts folder in our content folder.

The content folder in Hugo is special because it will create paths based on the folder and file names inside. If we put our posts inside a folder called recipes, then in our browser to see all our recipes we would need to visit the /recipes path.

Hugo will use the list.html template whenever there is a folder inside of the content folder.

For more information about what you can do inside of list pages, check out the Hugo docs on list templates.