Why and how to use collections in jekyll

06 March 2019

.

Jekyll makes creating a static site as easy as pie 🥧. But, what is a Jekyll Collection? Why would that be useful and what is the process to add in a collection? Let’s dig in!

Why Use Collections?

This site is built on Jekyll which we’ll write more about later but essentially this site is built as a blog. We also have quite a few social media posts that we want to provide more content about on our website. This way, we can share some content on social media and send readers to our site for more information. Since we have long form blog posts already that is our posts type. We wanted another way to provide another type of content but didn’t want it to be a full post. Enter what we call _social posts These are a collection (see what we did there?) of all the social media posts on the site. This way to display them we can avoid any needless filtering of the blog post by a certain tag or category. Jekyll collections give us an easy way out of the box to create a subtype on our blog 🙌.

How

The first thing we needed to do was update our config to “register” the new collection:

collections:
  social-posts:
    output: true

Here we name the collection social-posts and declare that we want it to output a page for each document. This way each social post will have it’s own dedicated page so when users go to our site to learn more information they can see an entire page dedicated to Text navigation: jumping between words for example.

Now that we have that, we need to make the directory so Jekyll knows to grab the social posts. So, in the root of our project we make the directory:

mkdir _social_posts

Then create our post within that directory. We change directory (cd) into the directory (folder) we just made and then create (touch) the first post:

cd _social__posts
touch text-navigation.md

And bingo! We have a new collection of social media posts with one post (text-navigation). Want to see how we integrated it on this site? Check out our commit because don’t talk about it, code about it. We’ll be posting much more about how this site was built and as we add in more features we’ll of course blog about it, because sharing is caring.