Getting started with a Github Page Blog using Jekyll

Octo-Jekyll

I recently started research on Jekyll for creating github page and fell in love with the simplicity and easy implementation.

I worked on Wordpress and managing and maintaining a blog but for my githib page, I was looking for a simple and easy to implement blogging platform without the hassle of different installations and then I found the perfect option.

Jekyll : Transform your plain text into static websites and blogs.

In this article I will be helping you to get started with Github Page blog using Jekyll, so let's get started...

What is a Github Page???

Github Pages is a place to host a website free of cost but a website without database, which allows us to host only static HTML or Jekyll websites.

Software Requirements

To start creating a Jekyll Blog on Github pages you will need following tools.

Step 1 : Create a Github Account

First you will need to create an Account on Github by chosing a Username.

Note: Your github page URL will be <your-username>.github.io.

Github is one of the most popular hosted Version Control System. (If you are not familiar with the concept, it's perfectly fine).

Setp 2 : Create a Repository

A Repository is like a project on Github it's a term of Git - Version Control System.

To create a repository just login with your github account and then click on icon in top-right corner of your Github Account Page and them click on New repository.

On the next page, enter Repository Name as <your-username>.github.io and click on create repository (Note: Keep it public, you can add optional description also).

Step 2 : Get the Code

You don't get scandalized with the word code, everything is simple and easy, just stay with me.

After creating the repository just clone the repository.

For that just copy the Repository URL, it will be something like https://github.com/<your-username>/<your-username>.github.io.git and open Gitbash on windows or simply open terminal on your Linux and Mac and execute following command

git clone https://github.com/<your-username>/<your-username>.github.io.git

After that go to https://github.com/akshaykhale1992/akshaykhale1992.github.io and download it as Zip into your repository folder (Don't clone it, just download zip) and then extract it in the same folder and then you can delete the zip file.

Step 3 : Start customizing

After extracting you will have my github page on your system to run and test it you can open terminal/command prompt in your repository folder and issue following command.

jekyll serve --watch

To check the website you can visit http://localhost:4000/, where you will see my blog homepage and all the posts of my blog.

The customization starts with _config.xml, just open the config.xml file and change the variables. Eg. Change title with your blog title, right now it is Akshay Khale. In the same way you will need to change all the variables, you can remove variables which are no applicable to you.

Note: The variable google_tracking_id is related to Google Analytics for analytics of your blog, you can generate one for your blog from here.

After changing _config.xml you will ned to restart the website, for that first enter Ctrl + C on terminal running the website and then again strt the server using jekyll serve --watch.

voila!!! Your website will all changes is up and running on your local system.

But all the posts are mine right now, for that just delete all the files from _posts folder, you can add your posts in the same folder.

Step 4 : Create your first Post

Since your blog is without any post, you are ready to create your first post, for that create a file in _posts folder with the extension .markdown.

Now in your first post add following code

---
layout:     post
title:      "Post Title"
subtitle:   "Post Subtitle"
date:       "2017-05-28 18:17:00"
author:     "Your Name"
header-img: "img/Post Header Image"
---

Just add the necessary details and you can add the blog header image in img folder, and add Markdown code to create your first post.

Markdown??? what the heck is that...

I know that's what you are thinking, markdown is a simple language which can add create Rich text for your website

Here is a simple markdown tutorial, you can use online Markdown editors like stackedit or Dillinger where you can see the output right when you are typing.

Step 5 : Let's Publish

After the your post is ready and your site is fully customized you can push it online.

For that issue following git commands

git push origin master

Above command will publish your website and you can check the website on your github page URL which is <your-username>.github.io.

If you face any issue setting up Jekyll github page, Please feel free to email me at khaleakshay@gmail.com.

Whats next???

For next time creating new post you can just create post file in _posts folder and push it using git push command

You add new images or change existing images by simply adding/changing those in img folder.

Didn't like my page theme, then you can get some cool themes from here.

Live Long and Prosper!!!