Blogging is built right into Jekyll, so it's easy to use and setup.
Clone: git clone https://github.com/CloudCannon/jekyll-learn-blog-template.git
Starter branch: git checkout blogging-intro-start
Finished lesson: git checkout blogging-intro-finish
Creating blog posts
Accessing post content
Creating a layout for individual posts
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,
Let’s now create some posts following those conventions. Add any number of posts you feel like, which should look like this:
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:
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:
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.
post.html to our
_layouts folder, with the following content (some CSS has already been written to handle style):
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.