How to Create Simple Pagination in Hugo

If you start looking how to paginate your blog in Hugo, it’s a very good sign 🤗 ! why? it means you take your blog seriously, you post more than once (at least 😅). Luckily, Hugo make it very simple to create a pagination

Add in config

Add pagination info in your config.yaml(.toml) file

paginate : 12 //depend on how much post per page

Loop with page

Change how you loop your post with .Paginator.Pages

{{ range .Paginator.Pages }}
    //each post
{{ end }}

Add number

Add your pagination’s number!

 {{ template "_internal/pagination.html" . }}

The last snippet will gave you ready-to-use pagination number, but you also can make it look simpler, for example just the next and previous button,

{{ if .Paginator.HasPrev }}
    <a href="{{ .Paginator.Prev.URL }}">  Prev </a>
{{ end }}
{{ if .Paginator.HasNext }}
    <a href="{{ .Paginator.Next.URL }}">  Next </a>
{{ end }}

We check, if the pagination has previous or next, if exists, write any text/image your want between the “a” tag, and assign a link for it.