How to loop through and render collections in Jekyll

30 May 2020
·
jekyll
{% for collection in site.collections %}
    {% if collection.label != 'posts' %}
        <h2>{{ collection.label }}</h2>
        {% for item in site[collection.label] %}
            <br><a href="{{ item.url }}">{{ item.title }}</a>
        {% endfor %}
    {% endif %}
{% endfor %}

Posts will count as a collection even if it's empty, so I have taken the step of filtering it out above.

The {% %} syntax is from a templating language called Liquid.

How to render your collection on the home page

If you are using a template like minima, you can override the existing home page by creating a new file inside of _layouts/home.html. I would recommend copy-pasting the existing code for the home.html page and modifying it.

How to define a collection

In your _config.yml file, add a new line for each collection.

collections:
  - collectionName
  - collectionName2

Adding posts to your collection

Create a folder at the root level called _collectionName for each collection that you have defined in your config file.

Each .md file within that, that contains a title in the frontmatter:

---
title: Hello world
---

Will be counted as an item in the collection.

🦉 Subscribe to my monthly newsletter for updates on my latest posts and projects.