How to paginate in jekyll?

Question

I need to put Paging on my jekll site but when I try the posts disappear.

I use jekyll 3.8.6 and to include the jekyll-paginate plugin, I use the gem command 'github-pages', '170', group:: jekyll_plugins in the _config.yml file.

I want to paginate in index.html

code index.html :

---
layout: default
---

{% for post in paginator.posts %}
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
<p class="author">
  <span class="date">{{ post.date }}</span>
</p>
<div class="content">
  {{ post.content }}
</div>
{% endfor %}

<!-- Pagination links -->
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}" class="previous">
      Previous
    </a>
  {% else %}
    <span class="previous">Previous</span>
  {% endif %}
  <span class="page_number ">
    Page: {{ paginator.page }} of {{ paginator.total_pages }}
  </span>
  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path }}" class="next">Next</a>
  {% else %}
    <span class="next ">Next</span>
  {% endif %}
</div>

code _config.yml

# Welcome to Jekyll!
#
# This config file is meant for settings that affect your whole blog, values
# which you are expected to set up once and rarely edit after that. If you find
# yourself editing this file very often, consider using Jekyll's data files
# feature for the data you need to update frequently.
#
# For technical reasons, this file is *NOT* reloaded automatically when you use
# 'bundle exec jekyll serve'. If you change this file, please restart the server process.

# Site settings
# These are used to personalize your new site. If you look in the HTML files,
# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: <>Davi Luis</>
email: [email protected]
description: Experências no Mundo da Tecnologia
baseurl: "" # the subpath of your site, e.g. /blog
url: "www.daviluis.com.br" # the base hostname & protocol for your site, e.g. http://example.com

paginate: 5
paginate_path: "/blog/page:num/"
comments: true

gem 'github-pages', '170', group: :jekyll_plugins


# Build settings
theme: minima

# minima theme settings
show_excerpts: false # set to true to show excerpts on the homepage

# Minima date format
# refer to http://shopify.github.io/liquid/filters/date/ if you want to customize this
minima:
  date_format: "%b %-d, %Y"

disqus:
  shortname: https-www-daviluis-com-br

# If you want to link only specific pages in your header, uncomment
# this and add the path to the pages in order as they should show up
#header_pages:
# - about.html

# social links
#twitter_username: jekyllrb
github_username:  daviluis321
#rss: rss
# dribbble_username: jekyll
# facebook_username: jekyll
# flickr_username: jekyll
# instagram_username: jekyll na
# linkedin_username: jekyll
# pinterest_username: jekyll
# youtube_username: jekyll
# googleplus_username: +jekyll

# Mastodon instances
# mastodon:
# - username: jekyll
#   instance: example.com
# - username: jekyll2
#   instance: example.com


# Exclude from processing.
# The following items will not be processed, by default. Create a custom list
# to override the default setting.
# exclude:
#   - Gemfile
#   - Gemfile.lock
#   - node_modules
#   - vendor/bundle/
#   - vendor/cache/
#   - vendor/gems/
#   - vendor/ruby/

I index code node I try to print the posts and their page number.

be careful about; paginate_path: "/blog/page:num/"... In which directory your posts are located? — Umut D.

Umut D. Umut D. · Accepted Answer · 2019-08-27T18:49:50

In Minima theme's root folder. Change index.md file name to index.html Then paste pagination codes above it.

{% for post in paginator.posts %}
<h1><a href="{{ post.url }}">{{ post.title }}</a></h1>
<p class="author">
  <span class="date">{{ post.date }}</span>
</p>
<div class="content">
  {{ post.content }}
</div>
{% endfor %}

<!-- Pagination links -->
<div class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}" class="previous">
      Previous
    </a>
  {% else %}
    <span class="previous">Previous</span>
  {% endif %}
  <span class="page_number ">
    Page: {{ paginator.page }} of {{ paginator.total_pages }}
  </span>
  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path }}" class="next">Next</a>
  {% else %}
    <span class="next ">Next</span>
  {% endif %}
</div>

Note: If this is not works, remove paginate_path: "/blog/page:num/" line in your config.yml file.

How to paginate in jekyll?

2 Answers