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 %}
      {{voice.name}}
      {{voice.band}}
    {% endfor %}
  

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

collections:
 - 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.

Advanced

Filters

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:

modes:
  - { 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 %}
    {{mode.name}}
    {{mode.color}}
  {% 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

Done

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

I'm launching a board game. If you'd like to know when it launches feel free to signup to my mailing list:

Mailing List

I hate spam just as much as you do and will probably never send an email out because I consider myself spam.