How to build your own github blog pages.

misc jekyll Back 26 Jun 2014

As my own blog has been almost completed, I’m writing this guide to anyone who wants to build his own blog.

The website is based on jekyll, jekyll is a simple, blog-aware, static site generator, it tool can transform your plain text into static websites.

You can learn more about jekyll at for Chinese, you can visit at



Some accounts is necessary, such as github account, some not, but if you have these accounts , you can do more facilities on your site.

GitHub Account

An github account is required, you can sign up at

Google Account (optional)

Google account is used for statics and web analysis, you can sign up at (YOU CANNOT ACCESS GOOGLE IF YOU ARE IN CHINA, FUCK GFW.)

Disqus Account (optional)

Disqus is a third social comments system, you can let people write their ideas on you blog pages. you can sign up at

Before start

sample blog in plain text

The blog file is in markdown or textile syntax, you can learn at

Here is a example:

layout: post
title: draft
date: 2014-06-24 23:00:00 +0800
categories: misc
description: page description.
tags: tags
This is an example.

for lazy guys

If you just want to use free blog, don’t want to create website yourself, you can use this wizard to create your own page, it’s very easy.

  1. Sign in github with your account.
  2. Open the following url, and do as wizard.

  3. Clone your repository to local.
  4. Write your blog file named and put it in _posts directory, the syntax of blog is markdown.
  5. Push it to github server.
  6. You can access you website at (The server will take some minutes for the first publish)

if you are a geek

if you want to build your blog pages yourself, just read the following text.

Some thing you need to know

You can host your website on github, the process is as follows.

  1. Build your own website project according to jekyllrb.
  2. Create a new repository on github named
  3. Push your project into your repository on github.
  4. Github server will run jekyll to generate your website, and publish your website automatically.
  5. You can access you website at (The server will take some minutes for the first publish)

The detailed wizard is at


Local computer tools

  • git :
  • ruby : (Windows users can download TortoiseGit. )

Build site


jekyll project has it’s own directory struct, the struct is like these.

├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data
|   └── members.yml
├── _site
└── index.html

You can learn more about this at


About Front-matter

Any file that contains a YAML front matter block will be processed by Jekyll as a special file.

You can learn more about YAML Front Matter at

Front-end framework.

Bootstrap is a popular front-end framework, You can use it to design your website in your own style.

Here are some example pages.

You can use them as your templete pages.

Display blog posts.

Here is an introduction to write or display posts,

Some other components you may need.

  • jquery :
  • highlight :
  • font-awesome :

Add comments system

There are many comments systems, I prefer Disqus

If your blog is in Chinese, you can use 多说 as your comments system.

At last

The rest is your creativity, you can create you own pages with these powerfull components.

You can also fork me at github.

useful links

github pages


personal website list


social comments system

  • Disqus :
  • 多说 :

markdown syntax

  • syntax practice :
  • syntax :
comments powered by Disqus