How to Create a Blog Index Page in Jekyll with Pagination

Creating a blog index page in Jekyll with pagination allows you to display a list of your blog posts across multiple pages, improving navigation and user experience. This guide will walk you through the steps to set up pagination in your Jekyll site.

Prerequisites

• A Jekyll site set up and running
• Basic understanding of Liquid templating
• Access to your site's source files

Step 1: Configure Pagination in _config.yml

Open your _config.yml file and add or modify the pagination settings:

paginate: 5
paginate_path: "/page:num/"

This configuration sets the number of posts per page to 5 and defines the URL structure for paginated pages.

Step 2: Create the Index Page

Create a new file named index.html in your root directory or modify your existing index file. Use the following code to set up the paginated index:

{% raw %}{% if paginator %}{% for post in paginator.posts %}
  
{{ post.title }}
  
{{ post.excerpt }}
{% endfor %}


  {% if paginator.previous_page %}
    Previous
  {% endif %}
  {% for page in (1..paginator.total_pages) %}
    {% if page == paginator.page %}
      {{ page }}
    {% else %}
      {{ page }}
    {% endif %}
  {% endfor %}
  {% if paginator.next_page %}
    Next
  {% endif %}

{% endif %}{% endraw %}

This code displays your posts with pagination links. Make sure to style the .pagination class in your CSS for better appearance.

Step 3: Test Your Pagination

Run your Jekyll site locally using bundle exec jekyll serve and navigate to your index page. Click on the pagination links to verify that posts are correctly paginated across pages.

Additional Tips

• Customize the number of posts per page in _config.yml.
• Use CSS to style pagination links for better user experience.
• Consider adding a "Go to first" or "Go to last" link for easier navigation.

By following these steps, you can create an effective paginated blog index in Jekyll that enhances your site's usability and organization.