How to build Github Pages with jeklly

This is a tutorial for building Github Pages with jeklly. Since I am also a fresher, it will be appreciate to email me if you have better ideas.

Download code here

Begin with Github Pages

Github Pages is a light weight blog systerm supproted by Github. It’s very easy to build a blog demo. Let’s begin with Github Pages.


First, Create a new respository named name.github.io. Change name to your github name.

gitio.png

Then, clone this repository to your computer. If you are using windows, I recommend install github desktop.

gitdesk.png

Or you can also use git clone in terminal. Easy, right? Let’s move on.

Jeklly environment build

Jeklly is a convenient engine for static web page and used by Github Pages.

  • Install Ruby
    Download Ruby+Devkit 2.4.4-1, and install
  • Install Bundler
    Change path to your github.io directory first. And then install.
    $ cd name.github.io
    $ gem install bundler
    $ bunlder update
  • To see
    $ bundle exec jekyll serve
    If you see like below, you almost done.

bindle.png

Copy http://127.0.0.1:4000/ to browser, and you can see your page.

blog.png

Make Your Blog

The next step is to change template to your own blog.

|-- _config.yml
|-- _includes
|-- _layouts
|   |-- default.html
|    -- post.html
|-- _posts
|   |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
|    -- 2009-04-26-barcamp-boston-4-roundup.textile
|-- _site
 -- index.html

This is what your github.io directory looks like (maybe a little different).

  • Self information
    Modify your self information in _config.yml
  • Background and Profile photo
    Change images in asset/image to your own.
  • Write blog
    Put your article .markdown file in _posts. You can use my template.

That’s all, hope this help you. :) :rocket::rocket::rocket::rocket:

最近的文章

Three ways for face detection

Face detection is one of the most popurlay field in computer vision. Recently I make some demos for face detection. Three ways has been test, python-opencv face++ API MTCNNWhat’s face detectionFace detection is not a hard way these days with deep...…

Face Detection继续阅读