Other Posts

Kevin Cui


blog

Nov 19, 2016 • on jekyll, github • 400 words 2 min. read

Know How to Build github.io Blog in 3 min?

I write this tutorial with some notes about how to build a github.io blog, because I was struggling a bit on it (well, I’m a dummy). Hope this post will give you a clear view and make you enjoy the build-up phrase. Then after that, you could waste some of your time on customizing your own awesome blog. 😉

(What about 3 min? It’s the time to read this post…)


STEP 0: Know things first

  • GitHub account: If you don’t have one, what are you waiting for? Just get one ;)
  • GitHub Pages: It’s designed to host your personal, organization, or project pages directly from a GitHub repository.
  • Jeykll: It transfers plain text into static websites and blogs.


STEP 1: Why?

  • It’s really simple, compared to WordPress
  • It’s interesting to write post with Markdown ^^
  • You will tell me… 😄


STEP 2: Pick theme

  • A list of some nice jekyll themes
  • Check theme demos and pick favorite one
  • Open GitHub and check source page ☕


STEP 3: Fork-it

  • Fork the theme repository to your username.github.io, where username is your own username on GitHub. (#Eg: my repository for this blog is kevcui.github.io)
  • Clone it to your local
~ $ git clone https://github.com/username/username.github.io my-blog


STEP 4: Configure-it

  • Go to my-blog
~ $ cd my-blog
  • Open _config.yml and modify
title: 'your-blog-title'
description: 'your-blog-description'
url: 'https://username.github.io'
baseurl: '/'
...
gems : ['jekyull-paginate', 'jemoji']

⚠️ Empty baseurl or change it to / depends on theme. Otherwise, some themes may not work correctly.
👊 jemoji!


STEP 5: Test-it

  • Run locally
~ $ cd my-blog
~ $ jekyll serve
# => Now browse to http://localhost:4000/


STEP 6: Post-it

  • Create a post in _post, name it YEAR-MONTH-DAY-title.md
title: "How to build github.io blog in 3 min?"
date:  2016-11-18 23:25:28 +0200
...

⚠️ Be careful of date format YYYY-MM-DD HH:MM:SS +/-TTTT, TTTT is timezone offset


STEP 7: Publish-it


▲