Welcome the continuing series on using Jekyll. In this tutorial we will go through making your first blog post.
We will go through all of the steps to create a new post, add metadata such as title/categories/tags/date, and then make it live on the site.
Section 1: Creating the file
Thr first step is to create a new file to hold the content of the blog post. In Jekyll all of the blog post are markdown files and are stored in the _post directory. When you commit this file to Github, it will be compiled into a static html
The filename is in the format of year-month-day-title-separated-by-dashes.md.
Go ahead and create your file now.
To create a file open a web browser and navigate to your [username.github.io repository.
Go into the _post directory and click the + icon to add a new file.
Name the file yyyy-mm-dd-my-first-post.md where yyyy = 4digit year, mm = 2 digit month, and dd = 2 digit day of montmonth.
Head to the next section and fill out the metadata about the post (ie: title, date, is published, categories, etc)
Section 2: Creating metadata
Now we need to define some information about our blog post. All of the information such as title, is published, categories, publish date, etc are stored at the top of the file in what is called Front Matter.
To define the front matter section you have a line with 3 dashes in it and then repeat this same line to signal the end of the front matter section.
Below are common metadata you will want to fill out.
layout: is the name of the layout from the _layouts directory. If followed part 1 and cloned the jekyll-now repository, then the name is post.
title: the title of the blog post that will showbon the site. Should be in quotes to avoid conflict with front matter parameter.
published: true or false. Determines if the post shows on the website or not.
date: date of the post. this is optional and if not defined will use date in filename.
categories: list of categories. comma delimited. put in quotes for multi word categories. optional but recommended.
tags: list of tags that would be used to build a tag cloud. optional but recommended.
Sample Front Matter
title: Your First Post
Now on to creating actual content in your post.
Section 3: Creating content
The content of the post will be written in markdown and will be directly below the front matter section .
Below are common markdown tags that you will want to use. headers, lists, bold, bullets, links and code highlighting.
Common Markdown Tags
A ‘#’ starting a line indicates to makebitba header and the number ‘#’ indicates the size of the header tag.
# = h1
## = h2
and so on up the an h6
Numbered list or Bullets
For bullets: start a line with a * or -.
* sample list
* next bullet
For numbered list start with a 1 or the number you want to start with.
1. sample ordered list
2. number 2
sample ordered list
surround the text you to build with 2 ** and then put 2 more after the text to end the bold.
Most of the time you are not going to write and publish the blog post in one sitting but you need to save your work without it showing up in the website. This is called saving a draft and it is super simple to do. By setting the front matter
published tag to false it will tell jekyll to not publish it.
other front matter tags
You can also create a drafts folder and save the file in the but if you do that then you will need to move the file to the _post folder when you are ready to publish.
Section 5: Publishing post
Publishing a post is as simple as changing the front matter published to true and committing the change to the github repository.
other front matter tags
Github will take care of the conversion from markdown to an html page. This should happen automatically within a minute and show up on the blog home page at the top.
If it doesn’t show up then check your email that you registered on github with to see if there was a jekyll compile error email.
This lesson is one of the key lessons as you need to kow how to create new blog post. Creating new blog post is really easy with Jekyll and a little bit of markdown. Once you learn the different markdown tags, you will be writing blog post in
no time at all.
See you in the next lesson, where we will discuss how to add the ability to comment on blog post.