Guide to implementing jekyll pagination for blog section

The jekyll-paginate plugin is a simple tool for creating paginated navigation in Jekyll sites. Here’s a guide to get you started with using it effectively.

Step 1: Add the jekyll-paginate plugin

First, add the plugin to your Jekyll project, if you’re using Bundler (recommended), add jekyll-paginate to your Gemfile like below. Make sure to change gem version number to the latest one or the one compatible with your setup.

  group :jekyll_plugins do
    gem 'jekyll-paginate', '~> 1.1'
  end

Step 2: Install the jekyll-paginate plugin

Open your terminal, navigate to your project directory and run the following command:

  bundle install

Step 3: Enable the Plugin in _config.yml

Add the following line to your _config.yml file to enable jekyll-paginate plugin.

  plugins:
    - jekyll-paginate

Step 5: Set the pagination settings

Now is time configure some pagination options, such as the number of posts per page and URL pattern for pagination pages.

  paginate: 5 
  paginate_path: "/page:num"

Setting above will display 5 posts per page and the pagination links will be in the format of /page:num

The :num placeholder will be replaced by the page number.

Step 6: Configure pagination template

Note: pagination will apply only to pages with file name index.html

As blog listing is not my home page, I decided to create a folder called blog inside root directory and I placed index.html file inside it.

Now it time to add code to show posts in a paginated manner and posts pagination links on the bottom.

• You can access the paginated posts via paginator.posts
• The paginator.posts variable holds the posts for the current page.
• The paginator.previous_page and paginator.next_page are used to create “Previous” and “Next” links for pagination.
• paginator.page is the current page number starting from 1.
• paginator.total_pages is the total number of pages, calculated based on the number of posts and the paginate setting in your _config.yml.

Here is a simplified template I used to display paginated posts.

  
    <!-- looping posts -->
    {% for post in paginator.posts %}
      <div>
        <img src="{{ post.image }}" alt="{{ post.title }}" />
        <h2>{{ post.title }}</h2>
        <p>{{ post.snippet }}</p>
        <a href="{{ post.url }}" title="{{ post.title }}">
          Read blog post
        </a>
      </div>
    {% endfor %}

    <!-- Pagination links -->
    <div>
      {% if paginator.previous_page %}
        <a href="{{ paginator.previous_page_path }}" title="Previous page"> 
          Previous
        </a>
      {% endif %}

      <p>Page: {{ paginator.page }} of {{ paginator.total_pages }}</p>

      {% if paginator.next_page %}
        <a href="{{ paginator.next_page_path }}" title="Next page">
          Next
        </a>
      {% endif %}
    </div>
  

Step 7: Customize layout for blog listing

Now you can customize the pagination navigation to fit your site’s design. The code in the pagination block above checks if there are previous or next pages and displays appropriate links for them.

By following these steps, you should have paginated blog or post pages on your Jekyll site same as https://josefzacek.com/blog website.