3 Easy Steps to Implement Jekyll Collections!

Why ‘Jekyll Collections’?

While blogging you will realize that you have some things that do not fit into the category of posts nor into pages. Here is a comparison between the three.

Posts:

Chronologically arranged items - generally date wise arrangement.

Pages:

No particular arrangement or connection between individual items. For example, a Contact page has nothing to do with an About page and they can be arranged in any manner.

Collections:

Collections is a set of items which has a certain relation between individual items but may not have a chronological arrangement.

For example, let’s consider you have a blog which is about movie reviews. You write your reviews as posts. So for every movie you create a post. Let’s say you want to make a list of Top 25 must watch movies or Top 10 scary movies which will have all the details of each movie. In this case, posts or pages are not a good choice to go with. We can use collections instead. It is a collection of certain kind of movies. You can have any number of collections.

Do not remove this line (it will not be displayed)

A better example would be from my own blog. There is a section called Themes in the menu bar. I have a collection of themes on that page. If I make new posts for all my themes then it wouldn’t make sense. Why would anyone put themes in between tutorials? I can make individual pages for all the themes but how many pages should I make? How should I list those pages? So it had to be a collection.

Jekyll collections

Jekyll collections initial setup

Using Jekyll collections is very easy. The first thing to do is to mention your new collection in your _config.yml file. Let’s say I want two collections in my Jekyll blog. One is Themes where I put all the themes I created and another one is Designs where I keep all my designs to show off.

This is how you define collections in _config.yml.

collections: 
  - themes 
  - designs

You can add more metadata if needed

 
collections:
  themes:
    output: true
    permalink: /jekyll-themes/:path/
  designs:
    output: true
    permalink: /my-designs/:path/

Jekyll Collections Folders

Now at the root of the repository, create two folders(because we mentioned two collections) with the names _themes and _designs. Underscore is necessary, do not leave it out.

We have to keep our collection inside these folders. Let’s keep some files inside _themes folder. I have created 3 themes so far. I want them to be showed as a collection with certain details. Then I will have to showcase them as a list or a grid.

This is pretty much like how we keep all the posts inside the _posts folder and show them via a list on the homepage.

Here is how I have defined individual collection file

 
---
title: Purple
layout: page
img: webjeda-purple-jekyll-theme.jpg
description: Webjeda Purple is a minimal theme built on default jekyll theme. It is very light highly customizable. Suitable for minimal blogs.
link: http://webjeda.com/purple/
---

# Features

## Customizable theme

The theme can be customized just by changing few variables in **\_config.yml** file.

## Lightweight

Since the theme is based on default Jekyll theme, it is very lightweight. No JavaScript except analytics is used!

[**Preview**]({{page.link}})

You can provide any layout you prefer. I’m providing some more data in the YAML front matter since I need them. This one is for the Purple theme. Here is another one for the Thunder theme.

 
---
title: Thunder
layout: page
img: thunder-jekyll-theme.png
description: Thunder is a lightning fast responsive theme based on default Jekyll theme. It is minimal and free from JavaScript. It has a css file of size 5kb. This theme is best suited for minimal blogs.
link: http://webjeda.com/thunder/
---

# Features

## Customizable theme

The theme can be customized just by changing few variables in **\_config.yml** file.

## Inline CSS

Since the style used in this theme is very less, I'm inlining it. This will save a request and hence speeds up website loading.

## Light-weight

Since the theme is based on default Jekyll theme, it is very light-weight. No JavaScript except analytics is used!

[**Preview**]({{page.link}})

Jekyll Collections Index

So I have two themes in my Theme collection. How to show them on a page? we have to create an index file. Create a file with the name themes.md in the root.

 
---
layout: default
title: Jekyll Themes
---

{% for themes in site.themes %}

<a href="{{ themes.url | prepend: site.baseurl }}">
  <h2>{{ themes.title }}</h2>
</a>

<p class="post-excerpt">{{ themes.description | truncate: 160 }}</p>

{% endfor %}

Above liquid syntax will find all the theme files inside _themes folder and list them out along with their title and description. I have also included images in my theme collection using {{page.image}}. For simplicity, I haven’t included it here. This will render a theme list like this.

By clicking on one of them will open up the theme file we created in the beginning. which will look something like this

This is how Jekyll Collections are made.

Conclusion

Try to fit in any content into a post or a page first. If they don’t fit in, then think of using collections. Many times a simple list would do the job. Compare your Jekyll blog to a grocery store where things can be segregated into different collections. A collection of fruits, a collection of veggies, collections of beverages etc. Do not create collections for subsets, for example, say exotic fruits. They come under the fruit collection. In such cases use categories.

Also refer Jekyll Collections.

Thanks for reading!