Build Websites with Hugo

Adding Pagination

Once you have more than a handful of posts, your archives pages are going to get very long. And your main blog list page will grow and grow until it’s too big to be useful. To handle this, you can break up the list of results into multiple pages, with links to navigate between the list pages. This process is known as pagination.

Hugo has built-in pagination support, and it’s enabled by default. All you have to do is change how you fetch pages and add pagination navigation to your layouts.

To use pagination, use .Paginator.Pages instead of .Pages in your range statement, like this:

{{ range .Paginator.Pages }}

Hugo defaults to showing 10 pages at a time with its paginator, but you can override this in the layout. Let’s explore ...