How to add new post types in Jekyll (using collection)

In Jekyll, posts inside _posts folder belong to a special post type and being handled automatically by Jekyll, therefore you have to do some extra configuration steps if you want to create a new post type yourself.

In this tutorial, I will create a new type called cheatsheets step-by-step from ground up. Before we begin, here is the layout of the final project:

Jekyll Project Directory Layout

Step 1: Create a new folder

As I need to create a new post type named cheatsheets, I will create a new folder named _cheatsheets in the root folder, at the same directory level with _posts.

Step 2: Create a cheatsheet layout

Create a file named cheatsheet.html inside _layouts folder with below content:


---
layout: default
---

<article class="post cheatsheet">
  <h1>{{ page.title }}</h1>

  <div class="entry">
    {{ content }}
  </div>

  <div class="date">
    Last updated on {{ page.date | date: "%B %e, %Y" }}
  </div>

  {% include disqus.html %}
</article>

Step 3: Create a html file to handle the url

Since I want users to navigate to the new post type cheatsheet using /cheatsheets/ url, I will create a new file named cheatsheets.html at the root of the project. Fill the file with the following content:


---
layout: default
---

<div class="posts cheatsheets">
  {% for cheatsheet in site.cheatsheets %}
    <article class="post">

      <h1><a href="{{ site.baseurl }}{{ cheatsheet.url }}">{{ cheatsheet.title }}</a></h1>

      <div class="entry">
        {{ cheatsheet.excerpt }}
      </div>

      <a href="{{ site.baseurl }}{{ cheatsheet.url }}" class="read-more">Read More</a>
    </article>
  {% endfor %}
</div>

Step 4: Create new cheatsheet files inside _cheatsheets folder

Now we will create a new cheatsheet file inside the created _cheatsheets folder named 2020-12-04-jekyll-so-good.md then fill the file with the following content:

---
layout: cheatsheet
title: Markdown Cheatsheet
---
This is a complete cheatsheet

Step 5: Modify project configuration

Now the final step, open the _config.yml and add the following configuration lines to the end of the file:

collections:
  cheatsheets:
    output: true
    permalink: /:collection/:title/

Now you can test your newly configuration by browsing the /cheatsheets/ url.

Pros & Cons

Using this method allows you to have separate folder beside the default _post folder but you need to configure some extra steps to have the new collection (_cheatsheets in this example) inside you feed.xml.
If you don’t have you post inside any feed.xml like files, search engines like Google can not index your posts that are inside _cheatsheets folder.
Another simpler way is to use categories & tags in posts.

Last updated on December 3, 2020