用OCTOPRESS搭建博客系統

轉載 原連接 http://tchen.me/posts/2012-12-16-first-blog.html

1. 引子

夜夜哭鬧的混世小魔王在她滿月的這天好像忽然換了我的，一覺又一覺地睡。這可苦了我，一個月來創建的夜間做息傾刻間紊亂，她沒有鬧覺的時間裏，我卻丟了魂同樣，怎麼也睡不着。因而起身想折騰點什麼，無心間看到了derbyjs的 blog 是github pages支持的，遂產生了興趣，挽起袖子就開始折騰一個本身的。雖然 [octopress][1]的文檔寫得很清晰，但對於第一次接觸這個博客系統的人來說，仍是有一些攔路虎的。2012年12月16日凌晨4:15，當個人第一篇空的博客展示在 tyrchen.github.com 時，我終於累癱在牀上。

早上9時，我翻身起來撰寫此文，算是給本身折騰的那一個多小時時間一個交代吧。

免責聲明：若是你不知道什麼是shell, github, 不能很快地掌握一種很是簡單的標記語言(markdown)，那麼本文不適合你。相似於 wordpress 所見即所得的博客系統對你更有價值。[octopress][1]適合於黑客。

2. 什麼是GITHUB PAGES?

開源項目須要sell本身。項目的介紹，幫助和API文檔都是很好的宣傳工具。在沒有github pages的日子裏，項目只能自建站點或者使用第三方來存放能讓用戶當即閱讀的文檔。github看到了這一需求，將一個靜態頁面hosting的系統巧妙地與github自己結合起來，經過一個特殊的branch (gh-pages) 爲項目提供文檔hosting。除此以外，我的也有branding本身的需求，因而，只要你建立一個名爲 yourname.github.com 的repository，github會自動爲其提供同域名的hosting服務。

更多有關github pages的文檔，見：http://pages.github.com/。

3. 爲何用GITHUB PAGES?

用github pages搭建博客，你能夠享受到免費的服務器，免費的流量和相對不錯的服務體驗。另外，這是一種搭建博客的全新體驗，不用數據庫，一切改動都由git追蹤，隨時隨地查看你的博文歷史，近乎0成本遷移到任意服務器。動心了麼？讀下去吧。

4. 什麼是OCTOPRESS?

octopress提供了一組自動化的工具和模版幫助用戶簡化博客系統的建立。octopress生成的博客系統能夠被方便地部署到github pages及heroku，固然，因爲生成的是靜態文件，你也能夠將其部署到任何一個你本身的vhost或server。

octopress的安裝文檔見：http://octopress.org/docs/setup/。本文接下來的部分會詳細介紹如何用github pages和octopress部署一個本身的博客，及簡單介紹如何進行寫做。

5. 安裝

建立REPOSITORY

在你的github帳號下建立名爲yourname.github.com的repository。注意，不要建立成yourname。建立好後留待後用。

安裝RUBY 1.9.3

若是你的系統中沒有ruby或者 ruby --version 的版本不是1.9.3，請使用 rvm 或者你熟悉的version manager安裝1.9.3.

使用rvm安裝ruby 1.9.3:

$ rvm install 1.9.3
$ rvm use 1.9.3
$ ruby --version
ruby 1.9.3p0 (2011-10-30 revision 33570) [x86_64-darwin12.2.0]

設置OCTOPRESS

安裝依賴

$ git clone git://github.com/imathis/octopress.git octopress
$ cd octopress    # 使用rvm時，系統會自動切換到1.9.3，第一次使用會提示是否trust .rvmrc，請輸入yes
$ gem install bundler
$ bundle install

若是在這一步有任何問題，請查閱ruby手冊或google報錯信息。

安裝缺省的模版

$ rake install

設置博客使用的REPOSITORY

$ rake setup_github_pages
Enter the read/write url for your repository
(For example, 'git@github.com:your_username/your_username.github.com)
Repository url:

請輸入：git@github.com:yourname/yourname.github.com.git (將yourname替換成你的github登陸名)

這個步驟rake會作不少事情：

1. 在.git/config中替換origin爲你輸入的repository，並把原來的origin寫到octopress中。
2. 建立新的branch source並切換到這個branch。
3. 在生成的_deploy目錄下，初始化git repository爲你的repository。

如下是兩個git config的內容，just for your information。

tchen@tchen-mbp:~/projects/octopress$ cat .git/config 
[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
[remote "octopress"]
    url = git://github.com/imathis/octopress.git
    fetch = +refs/heads/*:refs/remotes/octopress/*
[branch "source"]
    remote = origin
    merge = refs/heads/master
    rebase = true
[remote "origin"]
    url = git@github.com:tyrchen/tyrchen.github.com.git
    fetch = +refs/heads/*:refs/remotes/origin/*

tchen@tchen-mbp:~/projects/octopress$ cat _deploy/.git/config 
[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
[remote "origin"]
    url = git@github.com:tyrchen/tyrchen.github.com.git
    fetch = +refs/heads/*:refs/remotes/origin/*

建立博文

接下來能夠試試建立一個新的博文：

$ rake new_post["My first blog"]

這會在source/_posts下建立一個以時間和標題爲名稱的markdown文件，它就是你的第一篇博文。

使用：

$ rake preview

rake會啓動一個server，打開瀏覽器訪問 http://localhost:4000 能夠看到你的最新更改。

部署你的博客

$ rake gen_deploy

這個命令會把_deploy下的內容從新生成一遍，而後提交到你的repository。若是一切順利，10分鐘左右就能夠經過 http://yourname.github.com 訪問你的博客了。

保存你的更改

歡喜之餘，不要忘記提交你的源文件。

$ git add .
$ git commit -m "Source code of my blog"
$ git push origin source

你的repository會多一個source目錄，記載全部的源文件。

撰寫博文

博客系統搭建好以後，如何撰寫博文呢？經過以前的步驟想必你對octopress的精髓有所瞭解，yes，沒有所見即所得的編輯器讓你撰寫博文，你要作的是使用 rake new_post 命令建立一篇新的文章，而後使用稱手的markdown編輯器進行編輯便可。可選擇的markdown編輯器不少，vim，sublime text 2，textmate 2等等。我我的喜歡在osx下使用sublime text 2。（須要安裝Markdown Edit，不會安裝？？請google ^_^ ）

基本的語法我就很少說了，浪費篇幅。看看這篇博文的源文件，你就掌握了markdown的大部分用法。（若是你第一反應是 鼠標右鍵->查看源文件，那麼我被你戰勝了，我說的是markdown的源文件 ^_^ ）

仍是不知道怎麼看？好吧，猛擊這個連接

6. 個性化

添加我的域名

在octopress目錄下：

$ echo 'blog.yourdomain.com' >> source/CNAME

而後在你的DNS服務商，如 dnspod.cn，添加相應的CNAME指向 yourname.github.com。若是你要使用頂級域名，如 http://yourdomain.com 訪問你的博客，則須要使用A記錄指向 207.97.227.245。詳細內容請參考：http://octopress.org/docs/deploying/github/。

設置博客

打開_config.yml，按照 http://octopress.org/docs/configuring/ 的說明進行設置便可。注意把不須要的asides都刪除，省得加載沒必要要的js，拖累訪問速度。若是想把你本身的微博我的秀加在側欄，請參考：http://clark1231.iteye.com/blog/1553939。

使用主題

本文使用了 https://github.com/amelandri/darkstripes 的主題。使用方法很簡單：

$ cd octopress
$ git clone git://github.com/amelandri/darkstripes.git .themes/darkstripes
$ rake install['darkstripes']
$ rake generate

注意你對已有主題的漢化會被覆蓋，請確保提交全部更改前你merge了你的改動。

添加多說

因爲github pages只支持靜態文件，因此相似評論這樣的功能就只能使用第三方工具。octopress自帶disqus的評論系統，但其對國內用戶不夠友好，另外加載速度也不快。國內disqus的copycat是duoshuo，因而照貓畫虎，添加多說的支持進來：

首先在 source/post/ 下建立duoshuo.html:

{% if site.duoshuo_name %}
<!-- Duoshuo Comment BEGIN -->
    <div class="ds-thread"></div>
    <script type="text/javascript"> var duoshuoQuery = {short_name:"{{ site.duoshuo_name }}"}; (function() { var ds = document.createElement('script'); ds.type = 'text/javascript';ds.async = true; ds.src = 'http://static.duoshuo.com/embed.js'; ds.charset = 'UTF-8'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ds); })(); </script>
<!-- Duoshuo Comment END -->
{% endif %}

而後在 source/_layouts/post.html，將對應的disqus代碼改成：

{% if site.duoshuo_name and page.comments == true %}
  <section id="comment">
    <h1>發表評論</h1>
    {% include post/duoshuo.html %}
  </section>
{% endif %}

在 source/_config.yml 裏，添加：

# Duoshuo comments
duoshuo_name: your_duoshuo_name

應該就能夠了。可使用以下命令測試：

$ rake generate
$ rake preview

添加百度統計

百度統計能夠將生成的script直接添加到 source/post/after_footer.html 就能夠。很簡單，這裏就不詳述。

更新中

本博文會不斷修改，不斷更新。做者會盡可能保持這篇博文和其使用的博客系統保持文檔上的一致。

7. 後記