Collections don't order properly on Github Pages

Help
1

Hello, I have an issue with the order and sort_by inside collections. The problem is, that the order works properly locally, but when I push to github pages, the ordering doesn’t work. I tried using a specific order, and then I added a variable “reading_order” to all of my files.

Here is my _config.yml

baseurl: "/blank_textbook/" # the subpath of your site, e.g. /blog
title: "Book Title"
author: "Author Name"
tagline: "Catchy tagline of book"
blurb: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec bibendum metus a augue cursus dictum eu eget dolor. Curabitur purus felis, maximus in blandit id, ullamcorper ac nunc. Proin rhoncus non eros non sollicitudin. Pellentesque venenatis mollis ex. Nulla et ultricies sapien, vel dictum ipsum. Pellentesque lorem elit, fringilla id pretium id, lobortis eget odio. Ut nisl augue, facilisis non consectetur vitae, vestibulum a magna. Suspendisse id maximus quam. Nunc mollis, leo eget tempus ultricies, velit justo iaculis nibh, quis feugiat tellus neque ac nisi."
description: "Catchy description of Book"
sass:
  sass_dir: assets/css
permalink: /:categories/:title/
plugins:
  - jekyll-seo-tag
  - jekyll-sitemap
  - jekyll-redirect-from
  - jemoji
collections:
  chapters:
    output: true
    sort_by: reading_order

The front matter for the first item:

---
title: "Introduction"
layout: chapter
reading_order: 0
categories: chapter
---

And here is the index.html page that shows the order:

---
layout: default
title: Home
---
<article>
  <header class="article-header">
    <h1 class="display-4">{{ site.title }}</h1>
    <p class="h1">{{ site.author }}</p>
    <figure class="figure">
      <img src="holder.js/760x300" class="img-fluid img-fluid rounded" alt="A generic square placeholder image with rounded corners in a figure.">
    </figure>
    <p class="lead">{{ site.tagline }}</p>
  </header>
  <hr>
  <section class="container">
    <div class="row wrap">
      <div class="col-6">
        <p>{{ site.blurb }}</p>
      </div>
      <div class="col-6">
        {% for chapter in site.chapters %}
          <div class="container ml-2 mr-2">
              <h2>Chapter {{ forloop.index }}. <a href="{{ site.baseurl }}{{ chapter.url | remove_first:'/'}}">{{ chapter.title }}</a></h2>
          <hr>
          </div>
        {% endfor %}
      </div>
    </div>
  </section>
  <hr>
  <footer class="article-footer">
  </footer>
</article>

Is this a bug, or would there be any other reason why this works locally but doesn’t work on github pages? I’ve tried cleaning the directory, clearing my browser cache etc, all that stuff - with no luck. Any ideas?

2

Quickest way to isolate this out as your issue is to use the github-pages gem. Just adjust your GEMFILE as described here.

Github Pages does not yet support the latest version of Jekyll, which can affect lots of little things like which Liquid filters are available (e.g. remove_first may or not be supported in the version of Jekyll that Github Pages uses, but you’re likely using the latest version of Jekyll locally.).

If you’re still seeing the issue, just report back we can continue troubleshooting.

3

sort_by is a Jekyll 4 feature. GitHub Pages is using an older version.

You can still use the reading_order property you created but you need apply the sort filter on the documents before passing them into your for loop.

Something like this should work:

{% assign chapters = site.chapters | sort: "reading_order" %}
{% for chapter in chapters %}
  ...
{% endfor %}
1 Like
4

Ahh, I naively thought github pages used my gemfile in terms of versions. That makes a lot of sense. Thanks for the pointers on local building @ckruse, and @mmistakes that approach worked perfectly.

1 Like