Better Jekyll GitHub pagination without Plugin

Example code for pagination within Jekyll with easy to follow guide, with this pagination solution you can create pagination in a few steps in Jekyll.

Better Jekyll GitHub pagination without Plugin

Pagination within Jekyll can be a pain. But with this simple pagination solution your totally covered with pages in Jekyll.

I love the way GitHub let’s you publish your own site with Jekyll. There is however one minus you can live with or without. You cannot use extra Jekyll plugins besides the plugins provided on GitHub pages. And pagination can only be done in a nice way when you have a extra plugin, or is there a way?

So I have this other dutch blog vandersluijs.nl that has already over 200 articles. Now showing 10 article excerpts er page, meaning there are a little over 20 pagination links.

Jekyll Pagination on Github without plugin

Now this just fits on a desktop screen. But it ain’t fitting any mobile. And when more articles arrive, the number will only grow.

Usually you would install a Jekyll plugin to take care of this, that you will only see a few pagination links, like Google used to do on it’s search page.

Without a plugin I created a other solution that works perfectly on GitHub with Jekyll.

Github Jekyll pagination

Solution Github Jekyll Pagination

The first thing you do is add a few extra lines to your _config.yml

str_next_page: "Volgende"  str_previous_page: "Vorige"

and

pagination_nr: 5paginate_path: /page:num/

So the first 2 lines are for showing the words : Next and Previous in the pagination part. The Words “Volgende” en “Vorige” are dutch. Change them to your likings.

The pagination_nr is to show 5 previous and 5 next links to pagination pages.

If you only want to show 2, make it 2 and 3 when you want to make it show 3.

paginate_path is to set the right path to the next or previous pagination page, you can leave this as it is.

Now I’ve got an extra file in the _includes folder called : pagination.html that I load in the index.html

{% raw %}{% include pagination.html %}{% endraw %}

Github Jekyll Pagination script

The pagination file looks like this

{% if paginator.total_pages > 1 %}
<div class="pagination">
  {% if paginator.previous_page %}
    <a  class="ml-1 mr-2" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">« {{site.str_previous_page}}</a>
  {% else %}
    <span>« {{site.str_previous_page}}</span>
  {% endif %}

  {% assign page_start = paginator.page | minus: site.pagination_nr %}
  {% assign page_end = paginator.page | plus: site.pagination_nr %}

  {% for page in (page_start..page_end) %}
    {% if page < 1 %}
      <!-- do freaking nothing -->
    {% elsif page == paginator.page %}
      <span class="ml-1 mr-1">{{ page }}</span>
    {% elsif page == 1 %}
      <a  class="ml-1 mr-2" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
    {% else %}
      <a  class="ml-1 mr-2" href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
    {% endif %}
  {% endfor %}

  {% if paginator.next_page %}
    <a  class="ml-1 mr-2" href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">{{site.str_next_page}} »</a>
  {% else %}
    <span>{{site.str_next_page}} »</span>
  {% endif %}
</div>
{% endif %}
@MihajloNesic
MihajloNesic commented on 29 Apr 2019
Thank you for this!

I suggest adding these 2 lines of code after the {% if page < 1 %}, because you will get a higher number of pages than you actually have.

{% elsif page > paginator.total_pages %}
      <!-- Do nothing -->
So the whole for loop would be:

{% for page in (page_start..page_end) %}
    {% if page < 1 %}
      <!-- do freaking nothing -->
    {% elsif page > paginator.total_pages %}
      <!-- Do nothing -->
    {% elsif page == paginator.page %}
      <span class="ml-1 mr-1">{{ page }}</span>
    {% elsif page == 1 %}
      <a  class="ml-1 mr-2" href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
    {% else %}
      <a  class="ml-1 mr-2" href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
    {% endif %}
{% endfor %}

Have fun!!!