Displaying posts in your Jekyll site

by Jay Mistry · Jun 26, 2019

Build your blog with Jekyll

In the previous tutorial, we learnt how to setup our Jekyll site and host it for free on GitHub Pages. In this post, we will see how we can create posts for our site, and how to display them.

Where should we store our posts?

First we will create a _posts directory in the root directory of our blog project.

  $ mkdir _posts

All the posts you create in this folder will be available to you for use in the site.posts variable in liquid syntax.

Let’s create some posts!

We will create three simple posts for three characters - Naruto, Goku & Luffy in Markdown. As we will mainly focus on text-based posts in this tutorial, we are using Markdown.

  $ touch _posts/2019-06-26-naruto.md 
  $ touch _posts/2019-06-26-goku.md
  $ touch _posts/2019-06-26-luffy.md

Note : The name of posts should be in the format yyyy-mm-dd-post-name.<file-ext>, where yyyy is the year of post’s creation, mm is the month & dd is the date. After that, you can name your post accordingly. This name will be used to create the URL of your post. So, the URL of our post for Naruto will be `mydomain.com/2019/06/26/naruto.md’.

Let’s create some content in the posts-

2019-06-26-naruto.md

---
title: "Uzumaki Naruto"
anime: "Naruto, Naruto Shippuden"
author: "Tech no Kami"
description: "A descriptive post about Naruto Uzumaki"
layout: base
---


# Uzumaki Naruto

### Anime: Naruto, Naruto Shippuden

Naruto Uzumaki is a shinobi of Konohagakure's Uzumaki clan...
2019-06-26-goku.md

---
title: "Son Goku"
anime: "Dragon Ball metaseries"
author: "Tech no Kami"
description: "A descriptive post about Son Goku"
layout: base
---


# Son Goku

### Anime: Dragon Ball series

Goku, born Kakarot, is the main protagonist of the Dragon Ball metaseries...
2019-06-26-luffy.md

---
title: "Monkey D. Luffy"
anime: "One Piece"
author: "Tech no Kami"
description: "A descriptive post about Monkey D. Luffy"
layout: base
---


# Monkey D. Luffy

### Anime: One Piece

Monkey D. Luffy, also known as "Straw Hat Luffy" and commonly as "Straw Hat"...

All the variables defined in the front matter are available in the page as page.variable.

Now, let’s list our posts on the Home Page of OtakuBook. Edit the index.html file and add the following code after the titles.

index.html
{% for post in site.posts %}
	<a href="" class="mx-4">
		<div class="card">
			<div class="card-header">{{ post.title }}</div>
			<div class="card-body">{{ post.description }}</div>
		</div>
	</a>
{% endfor %}

The code enclosed between {%...%} is liquid syntax. In the first statement, we are looping through all the posts of the website available through site.posts. In the next statements, we display the post links accordingly. Statements enclosed in {{...}} are replaced by their outputs while the site is compiled. The last statement ends the loop.

Let’s see how the site looks now with the posts!

Create posts in a Jekyll Blog

Bonus!

As we can see, we are able to display the posts here. But let’s do something more!

Let’s create a separate layout for the posts, to make them more distinct from normal pages!

Create a new file in the _layouts directory for the post layout.

  $ touch _layouts/post.html

Insert the following contents in your post.html file.


---
layout: base
---


<h1>Displaying posts in your Jekyll site</h1>

<h3><b>Anime</b>: </h3>

{{ content }}

Now we will edit the post files, I will show you the changes for 2019-06-26-naruto.md file, which you can apply similarly to the other posts.

2019-06-26-naruto.md

---
title: "Uzumaki Naruto"
anime: "Naruto, Naruto Shippuden"
author: "Tech no Kami"
description: "A descriptive post about Naruto Uzumaki"
layout: post
---


Naruto Uzumaki is a shinobi of Konohagakure's Uzumaki clan...

As you can see here, we have changed the layout variable in the front matter from ‘base’ to ‘post’, and also removed the two titles here, as they are now created in the post.md layout.

Now, if you want to change how your posts look, you can make changes to the post.html layout, and it will be reflected in every post, without affecting the home and about pages. Pretty cool, huh?

In the next tutorial, we will see how we can customize our site using SCSS. Till then, you can practise whatever you have learnt till now!

See you then! Adios folks!