Jekyll 3 - How to enable pagination of blog page?

Zelian Shao, 20 May 2025

Pagination is common practice if there are more posts in your blog. Jekyll also supports this feature by “jekyll-paginate” plugin.

Notes: Pagination only works with HTML files.

Reference:

Pagination | Jekyll

Steps:

1. Install “jekyll-paginate” plugin.
2. Enable pagination in _config.yml.
3. Update blog HTML page to render the pagination.

1. Install “jekyll-paginate” plugin.

• Update “Gemfile” to include the plugin.

  # Gemfile file
  gem "jekyll-paginate"

• Open a new command window.
• Navigate to project root folder.
• Run “bundle install” command.

2. Enable pagination in _config.yml.

• Add additional configuration in “_config.yml” file.

  # _config.yml file
  paginate: 5
  paginate_path: "/blog/page:num/"

3. Update blog HTML page to render the pagination.

For example, if you have “blog.html” to list all posts.

{% if paginator.total_pages > 1 %}
<div class="pagination">
	{% if paginator.previous_page %}
		<a href="{{ paginator.previous_page_path | relative_url }}">« Prev</a>
	{% else %}
		<span>« Prev</span>
	{% endif %}<br/>
	{% for page in (1..paginator.total_pages) %}
		{% if page == paginator.page %}
			<em>{{ page }}</em>
		{% elsif page == 1 %}
			<a href="{{ site.paginate_path | relative_url | replace: 'page:num/', '' }}">{{ page }}</a>
		{% else %}
			<a href="{{ site.paginate_path | relative_url | replace: ':num', page }}">{{ page }}</a>
		{% endif %}
	{% endfor %}
	{% if paginator.next_page %}
		<a href="{{ paginator.next_page_path | relative_url }}">Next »</a>
	{% else %}
		<span>Next »</span>
	{% endif %}
</div>
{% endif %}

• Open a new command window.
• Navigate to project root folder.
• Run “jekyll serve” command to start the website.