DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Dev Diaries
Dev Diaries

Posted on

Why and how to use collections in jekyll

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.

Original Post on Dev Diaries

Top comments (0)

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.