Search
Create and manage blogging content quickly with Jekyll's easy-to-use post setup.
# Starting repo
git clone https://github.com/CloudCannon/jekyll-learn-blog-template.git
# Starting branch:
git checkout blogging-intro-start
# Finished branch:
git checkout blogging-intro-finish
A blog wouldn’t be complete without articles of some kind. Fortunately, Jekyll makes it easy to manage your blog posts. In this lesson we will explain the conventions for Jekyll posts and how to display them on your site. Read more on posts on Jekyll's official site.
A new Jekyll project is automatically generated with a _posts folder and a single post example. For this lesson, we will be creating some posts about a few of our country’s curious feathered friends.
Before we start, there are a few conventions worth noting:
[year]-[month]-[day]-[post-name].md
. For example, 2021-01-01-my-post.md
.Let’s now create some posts following those conventions. Add any number of posts you feel like, which should look like this:
---
title: A blog post
---
Your blog post content
For those following along, you will find a posts.txt
in the _posts
folder. Simply follow the instructions to extract the posts into the _posts
folder, substituting the current date (or any past date) for “year-month-day” where appropriate.
Now that we have some posts, let’s use Liquid to display them. Each time Jekyll builds our site, it does a number of things for us:
To begin with, we need a page to list existing posts out, so let’s create blog.html
in our root directory, with the following, simple content:
---
layout: default
title: Blog Page
---
<ul>
{% for post in site.posts %}
<li><a href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
As you can see, this is still simple HTML styling, but all post titles with links to their content will be shown within the default layout. For nicer styling, you can use this instead:
<h1 class="col-header dark-orange">All posts</h1>
{% for post in site.posts %}
<div class="post-preview">
<img class="post-preview__left" src="{{ post.image }}" alt="{{ page.image_alt }}">
<div class="post-preview__right">
<a class="preview-title" href="{{ post.url }}">{{ post.title }}</a>
<span>{{ post.date | date: "%b %d, %Y" }}</span>
<div class="tag-group">
{% for tag in post.tags %}
<div class="tag"><span class="tag-text">{{ tag }}</span></div>
{% endfor %}
</div>
</div>
</div>
{% endfor %}
When we click on a post from above, we end up with an unstyled page. This is because we didn’t specify a layout to use, so let’s create one.
First, add post.html
to our _layouts
folder, with the following content (some CSS has already been written to handle style):
---
layout: default
---
<div class="b-hero">
<img class="b-hero__image" src="{{ page.image }}" alt="{{ page.image_alt }}">
<div class="b-hero__info">
<h1 class="b-hero__title">{{ page.title }}</h1>
<div class="b-hero__author-date">
<span>Written by: {{ page.author }}</span>
<span>{{ page.date | date: "%b %d, %Y" }}</span>
<div class="tag-group">
{% for tag in page.tags %}
<div class="tag">
<span class="tag-text">
<a href="#">{{ tag }}</a>
</span>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{{ content }}
We are using inheritance again to avoid the hero section from the homepage. Only one small step remains: letting our posts know to use this layout. Go back into each post and add layout: post
to the front matter.
Now we should have nicely formatted posts to view when we run our local server.
Using Jekyll, we can easily set up a blog and manage our posts. But a blog post is not the only way to group our content, especially if the publishing date is not important.
Next, we’ll look at collections - a way to group related content.
Jekyll Beginner Tutorial Series