How to use Jekyll-paginate without index.html?

Viewed 4880

I'm trying to build my blog on Github pages and I have to use Jekyll-paginate for obvious reasons. The problem is, I don't use the index.html page for anything other than a welcome page. I have a separate page called index.html in a folder called articles, thus the url for the blog should be xyz.github.io/articles/.

However, this presents a major problem - apparently jekyll-paginate refuses to work without an explicit index.html in the root directory of the blog. So, I tried using jekyll-paginate-v2 which has no such restrictions, and it worked perfectly!

However, github pages don't support jekyll-paginate-v2, and thus, I'm back to square 1. What should I do?

NOTE : Here's my code:

index.md

---
layout: home
title: SomuSysAdmin
---

If you're new to this site and have no idea what's going on, first go and read the [About](about.md) section of the blog.

Here's a list of all the major articles this blog contains: 

## [Red Hat Certified Systems Administrator (RHCSA) Guide]({% post_url 2017-09-11-RHCSA %})

And here's my _config.yml:

# -----------------------------------------------------------------------------
#  User configuration
# -----------------------------------------------------------------------------

title:               SomuSysAdmin

# The unique resource location of your page.
# Set to `https://<username>.github.io` when hosting on GitHub Pages
url:                 https://somuSysAdmin.github.io

# Set to '' when hosting a blog on GitHub Pages, ie on `//<username>.github.io`
# Set to '/<reponame>' when using the `gh-pages` branch of a repository
baseurl:             ''

# A very short description of your page
tagline:             Easiest way to earn some SysAdmin mojo!

# A short description of the page, used in the sidebar and as fallback for the meta description tag.
# Markdown enabled, but don't use more than one paragraph (enforced by `>`)
description:         >
  A short set of notes and pointers concerning everything I know about System Administration.
# This should be the same author as first entry in `_data/authors.yml`
author:
  name:              Somenath Sinha
  email:             somu.sysa_fakeID@gmail.com

# Fallback image and color
image:               /assets/img/nap.jpg
color:               '#4ea97e'

# The font used for headings. Expects a string that is a valid CSS font-family value.
font_heading:        "'Roboto Slab', Helvetica, Arial, sans-serif"

# The text font. Expects a string that is a valid CSS font-family value.
font:                "'Noto Sans', Helvetica, Arial, sans-serif"

# The string encoding what fonts to fetch from Google Fonts.
# See: https://qwtel.com/hydejack/docs/configuration/
google_fonts:        Roboto+Slab:700|Noto+Sans:400,400i,700,700i

# If you do not use a Google Fonts, uncomment the line below
# no_google_fonts:     true

# Set your Google Analytics id to receive `pageview` events.
# To remove Google Anaylics from your page, remove the line below.
google_analytics:    <UA-XXXXXXXX-X>

# Setting a disqus shortname will enable the comment section on pages with `comments: true` in the front matter
disqus_shortname:    somusa

# This text will appear in the footer of every page. Markdown enabled.
copyright:           '&copy; 2017 Somenath Sinha. All rights reserved.'

# Format of the permalinks
permalink:           pretty

# Pagination configuration (used by the `blog` layout)
paginate:            5
paginate_path:       '/page-:num/'

# If you are upgrading form a v5 verison of Hydejack, uncomment the two lines below,
# so that the location of the feed XML stays the same.
# feed:
#   path:              atom.xml

# Set to true when building with the `--lsi` option
# See: https://jekyllrb.com/docs/variables/#site-variables
# use_lsi:             true

# Set to `true` if you don't want to show an icon after each link that opens to an external site
# no_mark_external:    true

# Uncomment this line if third party plugins fail to work with dynimically loaded pages
# disable_push_state:  true

# Uncomment this line if want to disable the touch drawer on mobile
# disable_drawer: true

# -----------------------------------------------------------------------------
#  Collections
# -----------------------------------------------------------------------------

collections:
  featured_categories:
    permalink:       /category/:name/
    output:          true
  featured_tags:
    permalink:       /tag/:name/
    output:          true
  projects:
    permalink:       /projects/:path/
    output:          true

# -----------------------------------------------------------------------------
#  Advanced configuration
# -----------------------------------------------------------------------------

gems:
  - jekyll-default-layout
  - jekyll-feed
  - jekyll-optional-front-matter
  - jekyll-paginate
  - jekyll-redirect-from
  - jekyll-relative-links
  - jekyll-sitemap

exclude:
  - README.md
  - node_modules
  - package.json
  - package-lock.json
  - Gemfile
  - Gemfile.lock

kramdown:
  footnote_backlink: '&#x21a9;&#xfe0e;'
  math_engine:       mathjax
  math_engine_opts:
    preview:         true
    preview_as_code: true

compress_html:
  comments:          ["<!-- ", " -->"]
  clippings:         all
  endings:           all
  ignore:
    envs:            [development]

sass:
  style:             compressed

Here's the content of my articles/index.md:

---
layout  : blog
title   : Articles
menu    : true
order   : 1
---

So, is there any way I can use jekyll-paginate without using an explicit index.html?

Here's what happens when I try to run jekyll on my present blog without an index.html:

$ bundle exec jekyll serve --incremental
Configuration file: D:/Git/blog/_config.yml
      Deprecation: The 'gems' configuration option has been renamed to 'plugins'. Please update your config file accordingly.
      Source: D:/Git/blog
      Destination: D:/Git/blog/_site
Incremental build: enabled
    Generating...
      Pagination: Pagination is enabled, but I couldn't find an index.html page to use as the pagination template. Skipping pagination.
                    done in 1.736 seconds.
Please add the following to your Gemfile to avoid polling for changes:
    gem 'wdm', '>= 0.1.0' if Gem.win_platform?
Auto-regeneration: enabled for 'D:/Git/blog'
  Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

As you can see, the pagination doesn't work at all! So, how do I fix it? I'm new to markdown and jekyll, so I may even be missing something obvious! Please help me fix it!

2 Answers

For me the solution was:

What you need to do, if you want to have your blog page outside of index.html completely.

blog                   # New directory
└── index.html         # Your new blog page

In your this blog/index.html you need to add this which will render the blog page (the home layout is where you have the paginator.posts)

---
layout: home
title: Blog
permalink: /blog/
---

And then make sure you have the paginator config in your _config.yml with:

# PAGINATION
paginate: 5
paginate_path: "/blog/page:num"
Related