How to make this blog using Jekyll and deploy it to Github pages

This blog post is about creating this exact blogging site using the simple, blog-aware, static site generator, Jekyll. Jekyll is the engine behind Github Pages, the place you will be deploying for free once finished. I like using Jekyll because of the fact that I can write static posts in markdown instead of HTML.

Notes:

• The source code for this project can be found here.
• I am running Mac OS X and this tutorial (at least installation) will be specific. If you are on a different OS go here.
• I couldn’t post a lot of code here because Jekyll was automatically rendering some of the dynamic code I wanted shown. Therefore, I have linked those parts to the specific files in my Github repo.
• Remember to swap out my content for yours :)

Let’s get started.

1.) Installation and setup

Assuming you have Ruby/RubyGems installed, and are running Mac OS X, run the following command in your terminal.

$ gem install jekyll
$ gem install rdiscount

*Add a sudo in front of it if you need root permission.

Then,

$ cd your/fav/directory
$ jekyll new sexyblog

This will create everything you need to start writing your blog posts.

Run the following to check out your Jekyll site locally at http://0.0.0.0:4000/,

$ cd sexyblog
$ jekyll serve

This will create a _site folder within your project, ignore it. Jekyll already gives you a simple great looking site, if you are happy with it and just want to start writing blog posts skip to step 4.

2.) Configuration and adding/editing files

First, edit your _config.yml file to look like this:

markdown: rdiscount
pygments: true
permalink: /posts/:title
rdiscount:
  extensions: [smart]

Then, edit the feed.xml file to look like the the code found here.

*Reminder: couldn’t post the code here because Jekyll was automatically rendering some of the dynamic code I wanted shown. #lookingoutforyou #inception

Now, edit the index.html file to look like this:

---
layout: default
title: Add a title
---

<p>Write a nice short bio about yourself 
here, it will be shown on the home page.</p>

Next, create a file called posts.html and add the code found here.

Lastly, edit the .gitignore file and add .DS_Store below _site. You don’t have to, but please just do it.

3.) Adding static front-end files

Now we need to add the HTML, CSS, and JavaScript files used for this blog site.

First, remove the folder called _includes, you won’t need it. Next, go into _layouts and edit the default.html file to look like the code found here. Then, edit the post.html file to look like the code found here. Delete page.html.

We don’t actually need to add any CSS or JavaScript for this blogging site because we are linking the style-sheet and some JavaScript found here and here.

Run,

$ jekyll serve

And you should see your new blog at http://0.0.0.0:4000/. All we have left now to do is write some posts and deploy to Github Pages. As you can see, Jekyll has already made your first post for you.

4.) Writing blog posts in Markdown

All posts you write for your Jekyll site must go in the _posts folder. There is one other rule, you must name your .markdown files using the convention YYYY-MM-DD-name-of-post.markdown.

At the beginning of each of your .markdown files make sure to add the following:

---
layout: post
title:  "Title of blog post"
date:   YYYY-MM-DD XX:YY:ZZ
categories: jekyll update
---

To learn what other fancy things you can do with markdown, go here or look at my source code.

5.) Deploying to Github Pages

To deploy your newly made, Jekyll backed blogging site, follow the detailed instructions Github has supplied here. Once you push this to your username.github.io repo, Github will automatically recognize that this is a Jekyll app and take care of everything for you. If you want to add a custom domain (i.e. blog.sahildiwan.com) follow the instructions Github has supplied here.