用Octopress搭建基于github的博客

安装ruby环境

如果已经安装了ruby,就不用安装rvm 了。
Archlinux用户建议用pacman 安装ruby,方便省事。


Archlinux安装RVM教程:
https://wiki.archlinux.org/index.php/RVM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
[admin@huangye ~]$ sudo bash < <(curl -s https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer )
Downloading RVM from wayneeseguin branch master
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   125  100   125    0     0     47      0  0:00:02  0:00:02 --:--:--    77
100  973k  100  973k    0     0  73848      0  0:00:13  0:00:13 --:--:-- 94818

Installing RVM to /usr/local/rvm/
    Creating RVM system user group 'rvm'

# RVM:  Shell scripts enabling management of multiple ruby environments.
# RTFM: https://rvm.beginrescueend.com/
# HELP: http://webchat.freenode.net/?channels=rvm (#rvm on irc.freenode.net)
# Cheatsheet: http://cheat.errtheblog.com/s/rvm/
# Screencast: http://screencasts.org/episodes/how-to-use-rvm

# In case of any issues read output of 'rvm requirements' and/or 'rvm notes'

Installation of RVM in /usr/local/rvm/ is almost complete:

  * First you need to add all users that will be using rvm to 'rvm' group,
    and logout - login again, anyone using rvm will be operating with `umask g+w`.

  * To start using RVM you need to run `source /etc/profile.d/rvm.sh`
    in all your open shell windows, in rare cases you need to reopen all shell windows.

# 荒野无灯,
#
#   Thank you for using RVM!
#   I sincerely hope that RVM helps to make your life easier and more enjoyable!!!
#
# ~Wayne


rvm 1.11.6 () by Wayne E. Seguin <wayneeseguin@gmail.com>, Michal Papis <mpapis@gmail.com> [https://rvm.beginrescueend.com/]

添加当前用户到rvm 组

1
[admin@huangye ~]$ sudo usermod -a -G rvm admin

查看下添加成功了没:

1
2
[admin@huangye ~]$ grep rvm /etc/group
rvm:x:1004:admin

再注销,登录。

* To start using RVM you need to run `source /etc/profile.d/rvm.sh`
in all your open shell windows, in rare cases you need to reopen all shell windows.


已经安装了ruby的就可以从这里开始了。

安装依赖

1
2
3
4
5
6
7
[admin@huangye public_html]$ gem install bundler
WARNING:  You don't have /home/admin/.gem/ruby/1.9.1/bin in your PATH,
      gem executables will not run.
vim ~/.bashrc
#for ruby gem
PATH=$PATH:~/.gem/ruby/1.9.1/bin
export PATH

注意路径后面不能带/,不然它还是会报错。。。。。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
[admin@huangye ~]$ sudo gem install bundler
1 gem installed
Installing ri documentation for bundler-1.1.3...
Installing RDoc documentation for bundler-1.1.3...

[admin@huangye public_html]$ cd octopress/
[admin@huangye octopress]$ ls
CHANGELOG.markdown  config.ru    Gemfile       plugins/  README.markdown
config.rb           _config.yml  Gemfile.lock  Rakefile
[admin@huangye octopress]$ bundle install
Fetching gem metadata from http://rubygems.org/.......
Installing rake (0.9.2)
Installing RedCloth (4.2.8) with native extensions
Installing posix-spawn (0.3.6) with native extensions
Installing albino (1.3.3)
Installing blankslate (2.1.2.4)
Installing chunky_png (1.2.1)
Installing fast-stemmer (1.0.0) with native extensions
Installing classifier (1.3.3)
Installing fssm (0.2.7)
Installing sass (3.1.5)
Installing compass (0.11.5)
Installing directory_watcher (1.4.0)
Installing ffi (1.0.9) with native extensions
Installing haml (3.1.2)
Installing kramdown (0.13.3)
Installing liquid (2.2.2)
Installing syntax (1.0.0)
Installing maruku (0.6.0)
Installing jekyll (0.11.0)
Installing rubypython (0.5.1)
Installing pygments.rb (0.1.3)
Installing rack (1.3.2)
Installing rb-fsevent (0.4.3.1) with native extensions
Installing rdiscount (1.6.8) with native extensions
Installing rubypants (0.2.0)
Installing tilt (1.3.2)
Installing sinatra (1.2.6)
Installing stringex (1.3.0)
Using bundler (1.1.3)
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.
1
2
3
4
5
[admin@huangye octopress]$ rake install
rake aborted!
You have already activated rake 0.9.2.2, but your Gemfile requires rake 0.9.2. Using bundle exec may solve this.

(See full trace by running task with --trace)

答案:http://stackoverflow.com/questions/7918804/how-do-i-keep-all-gems-in-gemfile-compatible-after-an-update
rake aborted解决办法:

1
2
bundle exec rake db:migrate
bundle update

再装:

1
2
3
4
5
6
7
8
[admin@huangye octopress]$ rake install
## Copying classic theme into ./source and ./sass
mkdir -p source
cp -r .themes/classic/source/. source
mkdir -p sass
cp -r .themes/classic/sass/. sass
mkdir -p source/_posts
mkdir -p public

Deploying to Github Pages

http://octopress.org/docs/deploying/github/

首次deploy 之前的准备活动
创建 username.github.com 仓库
执行rake setup_github_pages来设置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[admin@huangye octopress]$ rake setup_github_pages
Enter the read/write url for your repository: git@github.com:ihacklog/ihacklog.github.com.git
Added remote git@github.com:ihacklog/ihacklog.github.com.git as origin
Set origin as default remote
Master branch renamed to 'source' for committing your blog source files
rm -rf _deploy
mkdir _deploy
cd _deploy
Initialized empty Git repository in /home/admin/public_html/octopress/_deploy/.git/
[master (root-commit) ff105cf] Octopress init
 1 file changed, 1 insertion(+)
 create mode 100644 index.html
cd -

---
## Now you can deploy to http://ihacklog.github.com with `rake deploy` ##

This will:

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.
Setup a master branch in the _deploy directory for deployment.

生成静态页面:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
[admin@huangye octopress]$ rake generate
## Generating Site with Jekyll
directory source/stylesheets/
   create source/stylesheets/screen.css
/usr/lib/ruby/gems/1.9.1/gems/maruku-0.6.0/lib/maruku/input/parse_doc.rb:22:in `<top (required)>': iconv will be deprecated in the future, use String#encode instead.
Configuration from /home/admin/public_html/octopress/_config.yml
Building site: source -> public
Successfully generated site: source -> public
[admin@huangye octopress]$ rake deploy
## Deploying branch to Github Pages
rm -rf _deploy/index.html

## copying public to _deploy
cp -r public/. _deploy
cd _deploy

## Commiting: Site updated at 2012-04-07 12:06:25 UTC
[master 259fbb3] Site updated at 2012-04-07 12:06:25 UTC
 61 files changed, 2658 insertions(+), 1 deletion(-)
 create mode 100644 assets/jwplayer/glow/controlbar/background.png
 create mode 100644 assets/jwplayer/glow/controlbar/blankButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/divider.png
 create mode 100644 assets/jwplayer/glow/controlbar/fullscreenButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/fullscreenButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/muteButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/muteButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/normalscreenButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/normalscreenButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/pauseButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/pauseButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/playButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/playButtonOver.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderBuffer.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderCapLeft.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderCapRight.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderProgress.png
 create mode 100644 assets/jwplayer/glow/controlbar/timeSliderRail.png
 create mode 100644 assets/jwplayer/glow/controlbar/unmuteButton.png
 create mode 100644 assets/jwplayer/glow/controlbar/unmuteButtonOver.png
 create mode 100644 assets/jwplayer/glow/display/background.png
 create mode 100644 assets/jwplayer/glow/display/bufferIcon.png
 create mode 100644 assets/jwplayer/glow/display/muteIcon.png
 create mode 100644 assets/jwplayer/glow/display/playIcon.png
 create mode 100644 assets/jwplayer/glow/dock/button.png
 create mode 100644 assets/jwplayer/glow/glow.xml
 create mode 100644 assets/jwplayer/glow/playlist/item.png
 create mode 100644 assets/jwplayer/glow/playlist/itemOver.png
 create mode 100644 assets/jwplayer/glow/playlist/sliderCapBottom.png
 create mode 100644 assets/jwplayer/glow/playlist/sliderCapTop.png
 create mode 100644 assets/jwplayer/glow/playlist/sliderRail.png
 create mode 100644 assets/jwplayer/glow/playlist/sliderThumb.png
 create mode 100644 assets/jwplayer/glow/sharing/embedIcon.png
 create mode 100644 assets/jwplayer/glow/sharing/embedScreen.png
 create mode 100644 assets/jwplayer/glow/sharing/shareIcon.png
 create mode 100644 assets/jwplayer/glow/sharing/shareScreen.png
 create mode 100644 assets/jwplayer/player.swf
 create mode 100644 atom.xml
 create mode 100644 blog/archives/index.html
 create mode 100644 favicon.png
 create mode 100644 images/bird_32_gray.png
 create mode 100644 images/bird_32_gray_fail.png
 create mode 100644 images/code_bg.png
 create mode 100644 images/dotted-border.png
 create mode 100644 images/email.png
 create mode 100644 images/line-tile.png
 create mode 100644 images/noise.png
 create mode 100644 images/rss.png
 create mode 100644 images/search.png
 rewrite index.html (100%)
 create mode 100644 javascripts/ender.js
 create mode 100644 javascripts/github.js
 create mode 100644 javascripts/libs/ender.js
 create mode 100644 javascripts/libs/jXHR.js
 create mode 100644 javascripts/libs/swfobject-dynamic.js
 create mode 100644 javascripts/modernizr-2.0.js
 create mode 100644 javascripts/octopress.js
 create mode 100644 javascripts/pinboard.js
 create mode 100644 javascripts/twitter.js
 create mode 100644 sitemap.xml
 create mode 100644 stylesheets/screen.css

## Pushing generated _deploy website
Counting objects: 79, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (72/72), done.
Writing objects: 100% (79/79), 179.40 KiB, done.
Total 79 (delta 1), reused 0 (delta 0)
To git@github.com:ihacklog/ihacklog.github.com.git
 + 0c118b3...259fbb3 master -> master (forced update)

## Github Pages deploy complete
cd -

接下来把博客源码push上去:

1
2
3
git add .
git commit -m "commit the source for my Octopress blog"
git push origin source

Configuring Octopress

配置
略,见 http://octopress.org/docs/configuring/

写日志

1
2
3
rake new_post["文章标题"]
#新建页面
rake new_page[super-awesome]

详见 http://octopress.org/docs/blogging/
写完了之后

1
2
rake generate
rake deploy

如果想本地预览一下效果,可以用

1
rake preview

要注意的是,如果修改源码和配置,是在source 分支修改和提交。
而发布日志,也是在source分支,rake deploy会自动将生成的静态页面push到master分支。因此,master分支的内容不用你管。

rake watch 检测文件变化,实时生成新内容
rake preview 监听本机4000端口,可查看生成页面效果。

我的github博客页面:http://github.ihacklog.com//

个性化
文档: http://octopress.org/docs/theme/template/
修改定制文件/source/_includes/custom/head.html 把google的自定义字体去掉或自行定义,如我的(自己下载了google font):
[cc lang="html"]

我把下载的google font放在 source/assets/font 目录下面。

图片发布
我把图片放在source/static 目录。
在文章中引用(注意URL前面的/):

1
![ Ultrablog.vim post title bug ](/static/2012/04/UltraBlog-post-title-bug.png)

个性域名
先去给域名建立一个CNAME记录,指向 username.github.com ,如 ihacklog.github.com
在source目录下建一个名为CNAME的文件,然后将自己的域名输入进去
如:

1
github.ihacklog.com

文档: http://help.github.com/pages/

其它,如sidebar的修改等,可参考文档。http://octopress.org/docs/theme/template/
我这就不写了。

其它可参考的文章: http://blog.devtang.com/blog/2012/02/10/setup-blog-based-on-github/

更多
6 Responses Post a comment
  1. Fanr

    刚搬了过去,这下省心了。

  2. 荒野无灯

    弄了玩玩。
    为了写一篇日志还敲个代码是非常蛋疼的。我是能偷懒就偷懒,因此用github来发博客对于我来说不太现实。

  3. Christopher Meng

    我以前搭建过了 :wink:
    很不错 :mrgreen:
    就是不知道搭建一大堆有什么用 :?: :?: :?: :?: :?: 嘻嘻 :-? 做测试 :-? :-?

  4. Tiny

    我的博客就是按楼主这样做的。。。入门教程很好 :mrgreen:

  5. iShare

    好像很强大的样子 :roll: :roll:

Leave a Reply

Note: You may use basic HTML in your comments. Your email address will not be published.

Subscribe to this comment feed via RSS