Making multiple post types in Jekyll

Published: Oct 27, 2017 by C.S. Rhymes

Recently I decided to make a new section of my website for short stories. This presented my with a dilemma about how best to make multiple post types using Jekyll and GitHub Pages. I found a few different ways people have done it in the past, but I found Collections were the best way of doing it so I thought I would share how I did it.

Stories

The Collection Directory

Start with creating a new directory in your project, with the name starting with an underscore. I named my collection stories to I created a directory called _stories.

Configuration

Next, update your _config.yml file with a new collections section, and under that add your collection name, this time without the underscore, in my example stories. Then, assuming you want to output each of your stories as a separate page, add output: true.

The below shows what was added.

collections:
  stories:
    output: true

Creating Pages and a Layout

Now you can start creating pages within your collection directory (_stories). It looks like either html or markdown format works, but I created mine as markdown so I could make use of a template.

I created a new template for stories as I wanted them to be a bit different from standard blog post pages. I created a story.html file in the _layouts directory. This template can be as simple as you want, as all it really needs are the {{ title }} and {{ content }} placeholders. I added some front matter to the story.html in layouts so it inherited the default layout, but you can edit this to suit your site layout.

Below is an example of a simple layout for your collection pages.

---
layout: default
---

<h1>{{ title }}</h1>
{{ content }}

Now we get to your collection content pages. All you need to do is create a separate markdown page per content page with the following front matter, layout, title and description.

---
layout: story
title: Story Title Goes Here
description: "The story description text goes here"
---

Then write your content underneath in markdown as you would on a post.

Creating an Index Page

Lastly, you probably want a way of getting to your collection pages. I created a stories.html page in the site root to act as the index page for the stories. If you prefer you can create a directory called stories and put an index.html page in there instead.

The documentation says you can create a page in the _stories directory and give it a permalink but for me this made it appear in the loop below as well so it was linking to itself.

Anyway, you can loop through the pages in the collection using a simple for loop in your stories.html page as per below.

{% for item in site.stories %}
  <h2>{{ item.title }}</h2>
  <p>{{ item.description }}</p>
  <p><a href="{{ item.url }}">{{ item.title }}</a></p>
{% endfor %}

Hopefully this is all the information you need to start creating multiple post types using Jekyll and GitHub pages. My site is all set up. Now I need to do is to start writing some stories

Latest Posts

What are Story Points?
What are Story Points?

I’ve always estimated development issues in hours or days but I recently created a new project in Jira and it only allowed me to use story points for estimates. I have always stayed away from story points as I have struggled to understand what they mean and why I should use them. But as the project only allowed me to use story points I thought I had better make a proper effort to learn what they mean.

How to motivate yourself
How to motivate yourself

Sometimes life as a developer gets you down. No matter how hard you work it seems like there is a never ending list of new bugs and change requests that keep coming in from your users. It’s easy to get fed up and start losing motivation, every day seems the same and time starts to drag. So how can you keep your motivation levels up?

Keeping Tests Simple in Laravel
Keeping Tests Simple in Laravel

When developing a Laravel web application it can often start out quite simple, but can grow in complexity over time. This complexity can also end up being reflected in your tests. Sometimes to run an end to end test you can end up spending longer creating the scenario for the test than the actual test. How can we keep tests simple and quick to write?

How NOT to make a website

How NOT to make a Website

By C.S. Rhymes

How NOT to use a smartphone

How NOT to use a Smartphone

By C.S. Rhymes