Pagination question: Where does index.html go?

I’m running Jekyll 3.4.0.

I’m new to Jekyll and I’m trying to get pagination to work. I’ve read though Jekyll’s pagination documentation and have installed jekyll-paginate (1.1.0) and included jekyll-paginate in the gems list in _config.yml file and listed pageinate: 5 in the same file. I am forking the Minima theme and have a home.html page in _layouts that is powering the homepage (somehow). I understand that I need to create an index.html file in the home directory and basically include the same contents of the home.html file in _layouts.

Is that correct?

I’ve tried putting index.html in both the _layouts and home directories of my repo but no luck. My index.html file doesn’t seem to become the source file of my website (I can edit the contents of index.html file but the contents of my site don’t change).

Thanks for your help!

You’re close.

  1. Add index.html to the root of your site and make sure it has layout: home
  2. Edit _layouts/home.html to loop through the paginator object. {% for post in site.posts %} will become {% for post in paginator.posts %}

You’ll probably want to add some sort of next/previous links to the home layout as well. The link you included above has a complete example that you could replace the entire contents of the home layout with.


---
layout: default
title: My Blog
---

<!-- This loops through the paginated posts -->
{% 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>

Hope this helps.

Thanks for helping @mmistakes! So, index.html doesn’t have any content in the file except for the following header/frontmatter?

---
layout: home
---

I guess that means index.html just pulls in the contents of _layouts/home.html ?

I tried that, and edited _layouts/home.html with the markup you mentioned but no luck :frowning:

I wonder if I am including the gem correctly? Here’s what I included in Gemfile

gem 'jekyll-paginate', "1.1.0"

Yeah you can either put it all in the home.html layout or copy that code and put it directly in index.html. It’s up to you. The Minima theme went with the former which is why I suggested that way.

Are you getting any sort of errors? Have you added the paginate settings to your _config.yml file along with:

gems:
  - jekyll-paginate

Yes, I have this in _config.yml

gems:
- jekyll-feed
- jekyll-paginate
paginate: 5

the jekyll-feed gem is working fine…

I’m not getting any errors in terminal related to index.html or the home.html files…

@mmistakes I did some more digging and I noticed that if I set the template for index.html as default my homepage is still showing the contents of _layouts/home.html

---
layout: default
---

Any idea why that might be?

Ah! I figured it out. there was a file called index.md in the root that was taking priority over the index.html file I created. I removed the index.md file and everything seems to be working now :slight_smile:

That was going to be my next suggestion. It’s a fairly common mistake to have them both. I think jekyll new creates index.md which can be easily missed if you create your own index.html to paginate.

1 Like

@mmistakes A quick followup question: I have pagination links working now and the blog archive page (e.g. blog/page2/) loads correctly bit it has the same template as index.html (_layouts/home.html). How can I make the template loaded in blog/page2/ just use the default template?

To my knowledge you can’t. The paginated pages are essentially the same thing as index.html but with the appropriate posts. They use the same layout as index.html by design.

i’m tinkering around here with trying to get pagination to work on the homepage blog feed. do you know why it created all these in the top menu?

image

and this using the index.html template file that @mmistakes provided above.