Zhibin's blog

always smile :-)

Blog = Octopress + Github Pages

| Comments

Thanks to github , we have another choice to setup a blog beyond the popluar wordpress, github pages + octopress (based on jekyll, simply we can say : octopress is jekyll + themes).

Using octopress we can setup a blog very easy , the most import is that the blog is host at github:

  • it is free!
  • version control !
  • without bandwith limit !
  • without storage space limit!
  • keep as long as you wish !

Let’s go …

Step1: setup your project on github.

first , you need a github account , if you do not have one , please apply one on github

second ,you need create a new repository with your name , assume your github account name is yourname , you need create your project with the name yourname.github.io or yourname.github.com .

Step2: Setup Octopress

assume you are working on uinx or linux, you alredy have git installed.

then , install ruby with rvm or install ruby with Rbenv , use rvm for example :

run the following command from terminal to get rvm:

$ curl -L https://get.rvm.io | bash -s stable --ruby

install ruby 1.9.3 or later 1:

$ rvm install 1.9.3
$ rvm use 1.9.3
$ rvm rubygems latest

get octopress from github:

$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress    # If you use RVM, You'll be asked if you trust the .rvmrc file (say yes)
$ ruby --version  # Should report Ruby 1.9.3

install dependencies:

$ gem install bundler
$ bundle install

install the default theme:

$ rake install

if you met some error when using rake install, please try bundle exec rake install2 .

Step3: deploy to github pages

$ rake setup_github_pages #input your repo name as git@github.com://yourname/yourname.github.io(com).git

this command will do a couple things for you:

  • Ask you for your github pages repository url.
  • Rename the remote pointing to imathis/octopress from ‘origin’ to ‘octopress’
  • Add your Github Pages repository as the default origin remote.
  • Switch the active branch from master to source.
  • Configure your blog’s url according to your repository.
  • Set up a master branch for your project in the _deploy directory, ready for deployment.

Next run:

$rake generate
$rake deploy

this will generate the content of your blog under _deploy directory and push it to master(gh-pages) branch , a few minites later, you can view your blog at yourname.github.io(com)

Step4: Configure Octopress

open _config.yml, change the config as you like:

url: http://stevevallay.github.io
title: Zhibin's blog
subtitle: alway's smile :-)
author: zhibin

Step5: Blogging

$ rake new_post['blog title']

then, it will generate a file source/_post/YYYY-MM-DD-XXXX.markdown , this is the blog source , you can edit it with markdown , if you havn’t familiar with markdown , refer markdown wiki or markdown in Chinese

Step6: Generate & Preview

after finish one post , you can preview it:

$ rake generate  #Generates posts and pages into the public directory
$ rake watch      # Watches source/ and sass/ for changes and regenerates
$ rake preview    # Watches, and mounts a webserver at http://localhost:4000

open browser http://localhost:4000 you can see your blog.

Do not forget two things :

  • Commit sources of your blog to github , from your local source branch to source branch in github.
$ git add .
$ git commit -m "blog = github pages + octopress"
$ git push origin source
  • Deploy your blog, this will generate all files under_deploy and commit it to github master(gh-pages) branch.
$ rake deploy

Finally , you will get a similar blog as current stevevallay.github.io

Octopress Plugin

the first octopress plugin i recommanded is backtick code block , it can help add line number and syntax hightlight, octopress default installed it under plugin directory. Simple you can use it as following:


``` [language] [title] [url] [line text]
    code snipt


``` bash
    $ sudo make me a sandwich
$ sudo make me a sandwich


Disqus is a blog comment hosting service for websites and online communities that uses a networked platform.

Octopress already have support for Disqus, to add Disqus comments to your Octopress:

  1. You need Sign up an account of Disqus if you do not have one.
  2. Register your site to Disqus, input Site URL , Site Name and Site ShortName(remember this , it is used in step 3).
  3. Modify the _config.yml under your octopress directory as following (add your Site ShortName and set disqus_show_comment_count as true).
# Disqus Comments
disqus_short_name: zhibin #this is the `Site ShortName` you input in step 2
disqus_show_comment_count: true

  1. 我使用的是 1.9.3p448,我在帮朋友 大兵 安装 Octopress 的时候使用的是 2.0.0 ,运行 rake preview 等命令的时候遇到一些版本相关的错误,使用 bundle exec rake xxxx 才可正常。

  2. bundle exec command means Execute a command in the context of the bundle.使用 bundle exec 执行命令可以保证使用 Gemfile 中匹配的 gem 版本。