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 class="date">
    Last updated on {{ | date: "%B %e, %Y" }}

  {% include disqus.html %}

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 }}

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

Step 4: Create new cheatsheet files inside _cheatsheets folder

Now we will create a new cheatsheet file inside the created _cheatsheets folder named 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:

    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