How can I create a multi-page blog post in Jekyll?

I am trying to re-create this Wordpress blog post on Jekyll. The post is made up of images with descriptions, with 5 or 6 such images per page.

I created the page with a Wordpress pagination plugin. Jekyll uses a paginate plugin to paginate blog menus, but it seems I cannot re-use that for a single blog post because:

the number of items per page must be hard-coded in _config.yml
I don't have the same number of elements on every page of my blog post anyway

I use a script to create this post, so I can use HTML, markdown, whatever. I could also make a separate file for each page--and hopefully, figure out how to direct Jekyll to find them without the date prefix.

I don't know Javascript or Ruby, but I can mostly find my way around. What I really need to know is which strategy to take so I can work toward that instead of spending all morning on something that won't work well.

So, how would you do it?

Solution

Here's my idea of what it could look like in Jekyll. This is a hack with some potential issues.

TL;DR

The blog post you have shared is using two different layouts for the start page and the subpages. The index has a different position for the menu and the intro. Also, the page content differs.

Good news: Jekyll has layouts, powerful collections (beside posts), as well as includes to reuse content. See the details with some notes below. I have also added short post about the solution to my own blog.

You need two layouts

_layouts\paginated-post.md

---
---

<p>tags here</p> 

<h2>{{ page.title }}</h2>

<!-- page menu -->
<ul>
    <li><a href="{{ page.index | relative_url }}">{{ page.title }}</a></li>
    {% for item in page.page_urls %}
        <li><a href="{{ item.url | relative_url }}">{{ item.title }} Palettes</a></li>
    {% endfor %}
</ul>

{{ content }}

<h2>Pages</h2>

<ul>
    <li><a href="{{ page.index | relative_url }}">1</a></li>
        {% for item in page.page_urls %}
            {% assign page_number = forloop.index  | plus: 1 %}
        <li><a href="{{ item.url | relative_url }}">{{ page_number }}</a></li>
    {% endfor %}
</ul>

_layouts\paginated-post-index.md

---
---

<p>tags here</p> 

<h2>{{ page.title }}</h2>

I created Artificial Intelligence to produce these palettes ...

<h2>Menu</h2>

<!-- page menu here -->
<ul>
    <li><a href="{{ page.index | relative_url }}">{{ page.title }}</a></li>
    {% for item in page.page_urls %}
        <li><a href="{{ item.url | relative_url }}">{{ item.title }} Palettes</a></li>
    {% endfor %}
</ul>

{{ content }}

<h2>Pages</h2>

<ul>
    <li><a href="{{ page.index | relative_url }}">1</a></li>
        {% for item in page.page_urls %}
            {% assign page_number = forloop.index | plus: 1 %}
        <li><a href="{{ item.url | relative_url }}">{{ page_number }}</a></li>
    {% endfor %}
</ul>

Add a new collection

_config.yml

Note: I have chosen permalink path here, the defaults are optional if you set a layout in each collection item). Learn more about Jekyll collections in the docs.

collections:
  palettes:
    output: true
    permalink: /:path/

defaults:
  - scope:
      path: ""
    values:
      layout: paginated-post

New collection folder (_palettes) with two files:

The index on each page defines the palettes index.

_palettes\index.md

---
layout: paginated-post-index
title:  AI-Generated Palettes
index: palettes-index
page_urls: 
  - title: Wes Anderson
    palette: Kind of Bird
    url: /wes-anderson-kind-of-bird/
---

{% include palettes/wes.html %}

_palettes\wes-anderson-kind-of-bird.md

---
title: AI-Generated Palettes
subtitle: Wes Anderson – Kind of Bird
index: palettes-index
page_urls: 
  - title: Wes Anderson
    palette: Kind of Bird
    url: /wes-anderson-kind-of-bird/
---

{% include palettes/wes.html %}

Include file used above in _includes\palettes\wes.html

Note: the first line is the only line which will cause issues in other palette include files - maybe you will find your own solution or can just adjust the index here.

<h2>{{ page.page_urls[0].title }} </h2>

image here

Merin’s Fire: ff9506  
Trojan Horse Brown: 7b571e  
Minestrone: c4280d  
Punch of Yellow: efd185  
Root Brew: 2b0f0b  
Green Ink: 12887f