使用Github Pages建獨(dú)立博客

2012-02-22

Github很好的將代碼和社區(qū)聯(lián)系在了一起，于是發(fā)生了很多有趣的事情，世界也因?yàn)樗篮昧艘稽c(diǎn)點(diǎn)。Github作為現(xiàn)在最流行的代碼倉(cāng)庫(kù)，已經(jīng)得到很多大公司和項(xiàng)目的青睞，比如jQuery、Twitter等。為使項(xiàng)目更方便的被人理解，介紹頁(yè)面少不了，甚至?xí)枰暾奈臋n站，Github替你想到了這一點(diǎn)，他提供了Github Pages的服務(wù)，不僅可以方便的為項(xiàng)目建立介紹站點(diǎn)，也可以用來(lái)建立個(gè)人博客。

Github Pages有以下幾個(gè)優(yōu)點(diǎn)：

• 輕量級(jí)的博客系統(tǒng)，沒(méi)有麻煩的配置
• 使用標(biāo)記語(yǔ)言，比如Markdown
• 無(wú)需自己搭建服務(wù)器
• 根據(jù)Github的限制，對(duì)應(yīng)的每個(gè)站有300MB空間
• 可以綁定自己的域名

當(dāng)然他也有缺點(diǎn)：

• 使用Jekyll模板系統(tǒng)，相當(dāng)于靜態(tài)頁(yè)發(fā)布，適合博客，文檔介紹等。
• 動(dòng)態(tài)程序的部分相當(dāng)局限，比如沒(méi)有評(píng)論，不過(guò)還好我們有解決方案。
• 基于Git，很多東西需要?jiǎng)邮?，不像Wordpress有強(qiáng)大的后臺(tái)

大致介紹到此，作為個(gè)人博客來(lái)說(shuō)，簡(jiǎn)潔清爽的表達(dá)自己的工作、心得，就已達(dá)目標(biāo)，所以Github Pages是我認(rèn)為此需求最完美的解決方案了。

購(gòu)買、綁定獨(dú)立域名

雖說(shuō)Godaddy曾支持過(guò)SOPA，并且首頁(yè)放著極其不專業(yè)的大胸美女，但是作為域名服務(wù)商他做的還不賴，選擇它最重要的原因是他支持支付寶，沒(méi)有信用卡有時(shí)真的很難過(guò)。

域名的購(gòu)買不用多講，注冊(cè)、選域名、支付，有網(wǎng)購(gòu)經(jīng)驗(yàn)的都毫無(wú)壓力，優(yōu)惠碼也遍地皆是。域名的配置需要提醒一下，因?yàn)閭ゴ笥⒚鞯腉FW的存在，我們必須多做些事情。

流傳Godaddy的域名解析服務(wù)器被墻掉，導(dǎo)致域名無(wú)法訪問(wèn)，后來(lái)這個(gè)事情在BeiYuu也發(fā)生了，不得已需要把域名解析服務(wù)遷移到國(guó)內(nèi)比較穩(wěn)定的服務(wù)商處，這個(gè)遷移對(duì)于域名來(lái)說(shuō)沒(méi)有什么風(fēng)險(xiǎn)，最終的控制權(quán)還是在Godaddy那里，你隨時(shí)都可以改回去。

我們選擇DNSPod的服務(wù)，他們的產(chǎn)品做得不錯(cuò)，易用、免費(fèi)，收費(fèi)版有更高端的功能，暫不需要。注冊(cè)登錄之后，按照DNSPod的說(shuō)法，只需三步（我們插入一步）：

• 首先添加域名記錄，可參考DNSPod的幫助文檔：https://www./Support
• 在DNSPod自己的域名下添加一條A記錄，地址就是Github Pages的服務(wù)IP地址：207.97.227.245
• 在域名注冊(cè)商處修改DNS服務(wù):去Godaddy修改Nameservers為這兩個(gè)地址：f1g1ns1.dnspod.net、f1g1ns2.dnspod.net。如果你不明白在哪里修改，可以參考這里：Godaddy注冊(cè)的域名如何使用DNSPod
• 等待域名解析生效

域名的配置部分完成，跪謝方校長(zhǎng)。

配置和使用Github

Git是版本管理的未來(lái)，他的優(yōu)點(diǎn)我不再贅述，相關(guān)資料很多。推薦這本Git中文教程。

要使用Git，需要安裝它的客戶端，推薦在Linux下使用Git，會(huì)比較方便。Windows版的下載地址在這里：http://code.google.com/p/msysgit/downloads/list。其他系統(tǒng)的安裝也可以參考官方的安裝教程。

下載安裝客戶端之后，各個(gè)系統(tǒng)的配置就類似了，我們使用windows作為例子，Linux和Mac與此類似。

在Windows下，打開(kāi)Git Bash，其他系統(tǒng)下面則打開(kāi)終端（Terminal）：

1、檢查SSH keys的設(shè)置

首先我們需要檢查你電腦上現(xiàn)有的ssh key：

$ cd ~/.ssh

如果顯示“No such file or directory”，跳到第三步，否則繼續(xù)。

2、備份和移除原來(lái)的ssh key設(shè)置：

因?yàn)橐呀?jīng)存在key文件，所以需要備份舊的數(shù)據(jù)并刪除：

$ ls
config  id_rsa  id_rsa.pub  known_hosts
$ mkdir key_backup
$ cp id_rsa* key_backup
$ rm id_rsa*

3、生成新的SSH Key：

輸入下面的代碼，就可以生成新的key文件，我們只需要默認(rèn)設(shè)置就好，所以當(dāng)需要輸入文件名的時(shí)候，回車就好。

$ ssh-keygen -t rsa -C "郵件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回車就好>

然后系統(tǒng)會(huì)要你輸入加密串（Passphrase）：

Enter passphrase (empty for no passphrase):<輸入加密串>
Enter same passphrase again:<再次輸入加密串>

最后看到這樣的界面，就成功設(shè)置ssh key了：

4、添加SSH Key到GitHub：

在本機(jī)設(shè)置SSH Key之后，需要添加到GitHub上，以完成SSH鏈接的設(shè)置。

用文本編輯工具打開(kāi)id_rsa.pub文件，如果看不到這個(gè)文件，你需要設(shè)置顯示隱藏文件。準(zhǔn)確的復(fù)制這個(gè)文件的內(nèi)容，才能保證設(shè)置的成功。

在GitHub的主頁(yè)上點(diǎn)擊設(shè)置按鈕：

選擇SSH Keys項(xiàng)，把復(fù)制的內(nèi)容粘貼進(jìn)去，然后點(diǎn)擊Add Key按鈕即可：

PS：如果需要配置多個(gè)GitHub賬號(hào)，可以參看這個(gè)多個(gè)github賬號(hào)的SSH key切換，不過(guò)需要提醒一下的是，如果你只是通過(guò)這篇文章中所述配置了Host，那么你多個(gè)賬號(hào)下面的提交用戶會(huì)是一個(gè)人，所以需要通過(guò)命令git config --global --unset user.email刪除用戶賬戶設(shè)置，在每一個(gè)repo下面使用git config --local user.email '你的github郵箱@mail.com' 命令單獨(dú)設(shè)置用戶賬戶信息

5、測(cè)試一下

可以輸入下面的命令，看看設(shè)置是否成功，git@github.com的部分不要修改：

$ ssh -T git@github.com

如果是下面的反應(yīng)：

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要緊張，輸入yes就好，然后會(huì)看到：

Hi <em>username</em>! You've successfully authenticated, but GitHub does not provide shell access.

6、設(shè)置你的賬號(hào)信息

現(xiàn)在你已經(jīng)可以通過(guò)SSH鏈接到GitHub了，還有一些個(gè)人信息需要完善的。

Git會(huì)根據(jù)用戶的名字和郵箱來(lái)記錄提交。GitHub也是用這些信息來(lái)做權(quán)限的處理，輸入下面的代碼進(jìn)行個(gè)人信息的設(shè)置，把名稱和郵箱替換成你自己的，名字必須是你的真名，而不是GitHub的昵稱。

$ git config --global user.name "你的名字"
$ git config --global user.email "your_email@youremail.com"

設(shè)置GitHub的token

2012-4-28補(bǔ)充：新版的接口已經(jīng)不需要配置token了，所以下面這段可以跳過(guò)了

有些工具沒(méi)有通過(guò)SSH來(lái)鏈接GitHub。如果要使用這類工具，你需要找到然后設(shè)置你的API Token。

在GitHub上，你可以點(diǎn)擊Account Setting > Account Admin：

然后在你的命令行中，輸入下面的命令，把token添加進(jìn)去：

$ git config --global user.name "你的名字"
$ git config --global user.token 0123456789your123456789token

如果你改了GitHub的密碼，需要重新設(shè)置token。

成功了

好了，你已經(jīng)可以成功連接GitHub了。

使用GitHub Pages建立博客

與GitHub建立好鏈接之后，就可以方便的使用它提供的Pages服務(wù)，GitHub Pages分兩種，一種是你的GitHub用戶名建立的username.github.io這樣的用戶&組織頁(yè)（站），另一種是依附項(xiàng)目的pages。

User & Organization Pages

想建立個(gè)人博客是用的第一種，形如beiyuu.github.io這樣的可訪問(wèn)的站，每個(gè)用戶名下面只能建立一個(gè)，創(chuàng)建之后點(diǎn)擊Admin進(jìn)入項(xiàng)目管理，可以看到是這樣的： 而普通的項(xiàng)目是這樣的，即使你也是用的othername.github.io：

創(chuàng)建好username.github.io項(xiàng)目之后，提交一個(gè)index.html文件，然后push到GitHub的master分支（也就是普通意義上的主干）。第一次頁(yè)面生效需要一些時(shí)間，大概10分鐘左右。

生效之后，訪問(wèn)username.github.io就可以看到你上傳的頁(yè)面了，beiyuu.github.com就是一個(gè)例子。

關(guān)于第二種項(xiàng)目pages，簡(jiǎn)單提一下，他和用戶pages使用的后臺(tái)程序是同一套，只不過(guò)它的目的是項(xiàng)目的幫助文檔等跟項(xiàng)目綁定的內(nèi)容，所以需要在項(xiàng)目的gh-pages分支上去提交相應(yīng)的文件，GitHub會(huì)自動(dòng)幫你生成項(xiàng)目pages。具體的使用幫助可以參考Github Pages的官方文檔：

綁定域名

我們?cè)诘谝徊糠志吞岬搅嗽贒NS部分的設(shè)置，再來(lái)看在GitHub的配置，要想讓username.github.io能通過(guò)你自己的域名來(lái)訪問(wèn)，需要在項(xiàng)目的根目錄下新建一個(gè)名為CNAME的文件，文件內(nèi)容形如：

你也可以綁定在二級(jí)域名上：

blog.

需要提醒的一點(diǎn)是，如果你使用形如這樣的一級(jí)域名的話，需要在DNS處設(shè)置A記錄到207.97.227.245（這個(gè)地址會(huì)有變動(dòng)，這里查看），而不是在DNS處設(shè)置為CNAME的形式，否則可能會(huì)對(duì)其他服務(wù)（比如email）造成影響。

設(shè)置成功后，根據(jù)DNS的情況，最長(zhǎng)可能需要一天才能生效，耐心等待吧。

Jekyll模板系統(tǒng)

GitHub Pages為了提供對(duì)HTML內(nèi)容的支持，選擇了Jekyll作為模板系統(tǒng)，Jekyll是一個(gè)強(qiáng)大的靜態(tài)模板系統(tǒng)，作為個(gè)人博客使用，基本上可以滿足要求，也能保持管理的方便，你可以查看Jekyll官方文檔。

你可以直接fork我的項(xiàng)目，然后改名，就有了你自己的滿足Jekyll要求的文檔了，當(dāng)然你也可以按照下面的介紹自己創(chuàng)建。

Jekyll基本結(jié)構(gòu)

Jekyll的核心其實(shí)就是一個(gè)文本的轉(zhuǎn)換引擎，用你最喜歡的標(biāo)記語(yǔ)言寫文檔，可以是Markdown、Textile或者HTML等等，再通過(guò)layout將文檔拼裝起來(lái)，根據(jù)你設(shè)置的URL規(guī)則來(lái)展現(xiàn)，這些都是通過(guò)嚴(yán)格的配置文件來(lái)定義，最終的產(chǎn)出就是web頁(yè)面。

基本的Jekyll結(jié)構(gòu)如下：

|-- _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

簡(jiǎn)單介紹一下他們的作用：

_config.yml

配置文件，用來(lái)定義你想要的效果，設(shè)置之后就不用關(guān)心了。

_includes

可以用來(lái)存放一些小的可復(fù)用的模塊，方便通過(guò){ % include file.ext %}（去掉前兩個(gè){中或者{與%中的空格，下同）靈活的調(diào)用。這條命令會(huì)調(diào)用_includes/file.ext文件。

_layouts

這是模板文件存放的位置。模板需要通過(guò)YAML front matter來(lái)定義，后面會(huì)講到，{ { content }}標(biāo)記用來(lái)將數(shù)據(jù)插入到這些模板中來(lái)。

_posts

你的動(dòng)態(tài)內(nèi)容，一般來(lái)說(shuō)就是你的博客正文存放的文件夾。他的命名有嚴(yán)格的規(guī)定，必須是2012-02-22-artical-title.MARKUP這樣的形式，MARKUP是你所使用標(biāo)記語(yǔ)言的文件后綴名，根據(jù)_config.yml中設(shè)定的鏈接規(guī)則，可以根據(jù)你的文件名靈活調(diào)整，文章的日期和標(biāo)記語(yǔ)言后綴與文章的標(biāo)題的獨(dú)立的。

_site

這個(gè)是Jekyll生成的最終的文檔，不用去關(guān)心。最好把他放在你的.gitignore文件中忽略它。

其他文件夾

你可以創(chuàng)建任何的文件夾，在根目錄下面也可以創(chuàng)建任何文件，假設(shè)你創(chuàng)建了project文件夾，下面有一個(gè)github-pages.md的文件，那么你就可以通過(guò)yoursite.com/project/github-pages訪問(wèn)的到，如果你是使用一級(jí)域名的話。文件后綴可以是.html或者markdown或者textile。這里還有很多的例子：https://github.com/mojombo/jekyll/wiki/Sites

Jekyll的配置

Jekyll的配置寫在_config.yml文件中，可配置項(xiàng)有很多，我們不去一一追究了，很多配置雖有用但是一般不需要去關(guān)心，官方配置文檔有很詳細(xì)的說(shuō)明，確實(shí)需要了可以去這里查，我們主要說(shuō)兩個(gè)比較重要的東西，一個(gè)是Permalink，還有就是自定義項(xiàng)。

Permalink項(xiàng)用來(lái)定義你最終的文章鏈接是什么形式，他有下面幾個(gè)變量：

• year 文件名中的年份
• month 文件名中的月份
• day 文件名中的日期
• title 文件名中的文章標(biāo)題
• categories 文章的分類，如果文章沒(méi)有分類，會(huì)忽略
• i-month 文件名中的除去前綴0的月份
• i-day 文件名中的除去前綴0的日期

看看最終的配置效果：

• permalink: pretty /2009/04/29/slap-chop/index.html
• permalink: /:month-:day-:year/:title.html /04-29-2009/slap-chop.html
• permalink: /blog/:year/:month/:day/:title /blog/2009/04/29/slap-chop/index.html

我使用的是：

• permalink: /:title /github-pages

自定義項(xiàng)的內(nèi)容，例如我們定義了title:BeiYuu的博客這樣一項(xiàng)，那么你就可以在文章中使用{ { site.title }}來(lái)引用這個(gè)變量了，非常方便定義些全局變量。

YAML Front Matter和模板變量

對(duì)于使用YAML定義格式的文章，Jekyll會(huì)特別對(duì)待，他的格式要求比較嚴(yán)格，必須是這樣的形式：

---
layout: post
title: Blogging Like a Hacker
---

前后的---不能省略，在這之間，你可以定一些你需要的變量，layout就是調(diào)用_layouts下面的某一個(gè)模板，他還有一些其他的變量可以使用：

• permalink 你可以對(duì)某一篇文章使用通用設(shè)置之外的永久鏈接
• published 可以單獨(dú)設(shè)置某一篇文章是否需要發(fā)布
• category 設(shè)置文章的分類
• tags 設(shè)置文章的tag

上面的title就是自定義的內(nèi)容，你也可以設(shè)置其他的內(nèi)容，在文章中可以通過(guò){ { page.title }}這樣的形式調(diào)用。

模板變量，我們之前也涉及了不少了，還有其他需要的變量，可以參考官方的文檔：https://github.com/mojombo/jekyll/wiki/template-data

使用Disqus管理評(píng)論

模板部分到此就算是配置完畢了，但是Jekyll只是個(gè)靜態(tài)頁(yè)面的發(fā)布系統(tǒng)，想做到關(guān)爽場(chǎng)倒是很容易，如果想要評(píng)論呢？也很簡(jiǎn)單。

現(xiàn)在專做評(píng)論模塊的產(chǎn)品有很多，比如Disqus，還有國(guó)產(chǎn)的多說(shuō)，Disqus對(duì)現(xiàn)在各種系統(tǒng)的支持都比較全面，到寫博客為止，多說(shuō)現(xiàn)在僅是WordPress的一個(gè)插件，所以我這里暫時(shí)也使用不了，多說(shuō)與國(guó)內(nèi)的社交網(wǎng)絡(luò)緊密結(jié)合，還是有很多亮點(diǎn)的，值得期待一下。我先選擇了Disqus。

注冊(cè)賬號(hào)什么的就不提了，Disqus支持很多的博客平臺(tái)，參見(jiàn)下圖：

我們選擇最下面的Universal Code就好，然后會(huì)看到一個(gè)介紹頁(yè)面，把下面這段代碼復(fù)制到你的模板里面，可以只復(fù)制到顯示文章的模板中：

<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'example'; // required: replace example with your forum shortname 這個(gè)地方需要改成你配置的網(wǎng)站名
    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + './embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http:///?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>

配置完之后，你也可以做一些異步加載的處理，提高性能，比如我就在最開(kāi)始頁(yè)面打開(kāi)的時(shí)候不顯示評(píng)論，當(dāng)你想看評(píng)論的時(shí)候，點(diǎn)擊“顯示評(píng)論”再加載Disqus的模塊。代碼很簡(jiǎn)單，你可以參考我的寫法。

$('#disqus_container .comment').on('click',function(){
        $(this).html('加載中...');
        var disqus_shortname = 'beiyuu';
        var that = this;
        BYB.includeScript('http://' + disqus_shortname + './embed.js',function(){$(that).remove()}); //這是一個(gè)加載js的函數(shù)
});

如果你不喜歡Disqus的樣式，你也可以根據(jù)他生成的HTML結(jié)構(gòu)，自己改寫樣式覆蓋它的，Disqus現(xiàn)在也提供每個(gè)頁(yè)面的評(píng)論數(shù)接口，幫助文檔在這里可以看到。

代碼高亮插件

如果寫技術(shù)博客，代碼高亮少不了，有兩個(gè)可選插件DlHightLight代碼高亮組件和Google Code Prettify。DLHightLight支持的語(yǔ)言相對(duì)較少一些，有js、css、xml和html，Google的高亮插件基本上任何語(yǔ)言都支持，也可以自定義語(yǔ)言，也支持自動(dòng)識(shí)別，也有行號(hào)的特別支持。

Google的高亮插件使用也比較方便，只需要在<pre>的標(biāo)簽上加入prettyprint即可。所以我選擇了Google Code Prettify。

搭建本地jekyll環(huán)境

這里主要介紹一下在Mac OS X下面的安裝過(guò)程，其他操作系統(tǒng)可以參考官方的jekyll安裝。

作為生活在水深火熱的墻內(nèi)人民，有必要進(jìn)行下面一步修改gem的源，方便我們更快的下載所需組建：

sudo gem sources --remove http:/// 
sudo gem sources -a http://ruby./ 

然后用Gem安裝jekyll

$ gem install jekyll

不過(guò)一般如果有出錯(cuò)提示，你可能需要這樣安裝：

$ sudo gem install jekyll

我到了這一步的時(shí)候總是提示錯(cuò)誤Failed to build gem native extension，很可能的一個(gè)原因是沒(méi)有安裝rvm，rvm的安裝可以參考這里，或者敲入下面的命令：

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

然后還需要安裝Markdown的解釋器，這個(gè)需要在你的_config.yml里面設(shè)置markdown:rdiscount：

$ gem install jekyll rdiscount

好了，如果一切順利的話，本地環(huán)境就基本搭建完成了，進(jìn)入之前我們建立的博客目錄，運(yùn)行下面的命令：

$ jekyll --server

這個(gè)時(shí)候，你就可以通過(guò)localhost:4000來(lái)訪問(wèn)了。還有關(guān)于jekyll bootstrap的資料，需要自己修改調(diào)試的，可以研究一下。

我在這個(gè)過(guò)程中還遇到兩個(gè)詭異的沒(méi)有解決的問(wèn)題，一個(gè)是我放在根目錄下面的blog.md等文件，在GitHub的pages服務(wù)上一切正常，可以通過(guò)/blog訪問(wèn)的到，但是在本地環(huán)境下，總是not found，很是讓人郁悶，看生成的_site目錄下面的文件，也是正常的blog.html，但就是找不到，只有當(dāng)我把URL改為localhost:4000/blog.html的時(shí)候，才能訪問(wèn)的到，環(huán)境不同真糟糕。

還有一個(gè)是關(guān)于category的問(wèn)題，根據(jù)YAML的語(yǔ)法，我們?cè)谖恼骂^部可以定義文章所屬的類別，也可以定義為category:[blog,rss]這樣子的多類別，我在本地試一切正常，但是push到GitHub之后，就無(wú)法讀取了，真讓人著急，沒(méi)有辦法，只能采用別的辦法滿足我的需求了。這里還有一篇Jekyll 本地調(diào)試之若干問(wèn)題，安裝中如果有其他問(wèn)題，也可以對(duì)照參考一下。

結(jié)語(yǔ)

如果你跟著這篇不那么詳盡的教程，成功搭建了自己的博客，恭喜你！剩下的就是保持熱情的去寫自己的文章吧。