Jekyll Collections are amazing. They allow you to create different types of content beyond the traditional blog post. You can create collections of people, items on a todo list, anything. This feature was the tipping point that made me use Jekyll for this site over a dynamic database driven CMS like Drupal. This article will show you how to use collections by example, from the basics to advanced techniques.

The Basics

I use collections all over this site. In the Voices in Colour section each voice is an item in a ‘voices’ collection. Each item in the collection is a YAML file with keys and values:

name: Chris Martin
band: Coldplay
type: blue
color: '#306d8c'

This file can be called anything and is put in the collections folder, in my case called _voices.

You then print out the items in the collection with:

    {% for voice in site.voices %}
    {% endfor %}

In _config.yml the final configuration that glues it all together is:

 - voices

This tells Jekyll to look in the _voices folder and exposes the collections as the site.voices variable.

Pretty nifty yeah? You can make almost anything with these simple building blocks.



You can filter collections by a key in the YAML file. Here my key is type and my value is blue.

  {% assign blue_voices = site.voices | where: 'type', 'blue' %}

Then loop through the resulting filtered array like you would any other.

Nested Data

A collection can have nested keys and values. The structure is like this:

  - { name: 'Low', color: '#306d8c' }
  - { name: 'Mid', color: '#835340' }
  - { name: 'High', color: '#835340' }
  - { name: 'Falsetto', color: '#d1edfd' }

Here each voice has many “modes”. By using dashes we can store multiple items inside a key. Each item has a key and a value. You output the values with the usual for loop on the desired page:

  {% for mode in voice.modes %}
  {% endfor %}

File structure

Currently all collections have to be in the root of your Jekyll site. I have 6 collections on this site and the top level folder can start to get messy. One day you’ll be able to put them into a _collections folder.

A stop gap solution is to move the site building folders of Jekyll to a sub directory instead. In your _config.yml do:

  plugins_dir:  _app/plugins
  layouts_dir:  _app/layouts
  includes_dir: _app/includes

Or you can put all your ‘source’ files into a subfolder:

  source: _content


Well there you have it! Collections are a great way to manage different types of content on your site. Who needs a CMS?

Kickstarter Coming March 2018

I'm launching a board game called Delivery Duck. You're a duck, in a truck, delivering packages. It's a strategic family game for 2 to 6 players.

Check out the board game!