科技獵使用 Github Pages 建獨立博客 | 周良博客
- 購買、綁定獨立域名
- 配置和使用Github
- 1、檢查SSH keys的設置
- 2、備份和移除原來的ssh key設置：
- 3、生成新的SSH Key：
- 4、添加SSH Key到GitHub：
- 5、測試一下
- 6、設置你的賬號信息
- 使用GitHub Pages建立博客
- User & Organization Pages
- 綁定域名
- Jekyll基本結構
- _config.yml
- _includes
- _layouts
- _posts
- _site
- 其他文件夾
- Jekyll的配置
- YAML Front Matter和模板變量
- 使用Disqus管理評論
- 代碼高亮插件
- 搭建本地jekyll環境
- 結語
Github 作為現在最流行的代碼倉庫，已經得到很多大公司和項目的青睞，比如 jQuery、Twitter的Bootstrap等。為使項目更方便的被人理解，介紹頁面少不了，甚至會需要完整的文檔站，Github替你想到了這一點，他提供了 Github Pages 的服務，不僅可以方便的為項目建立介紹站點，也可以用來建立個人博客。 Github Pages有以下幾個優點：
- 輕量級的博客系統，沒有麻煩的配置
- 使用標記語言，比如Markdown
- 無需自己搭建服務器
- 根據Github的限制，對應的每個站有300MB空間
- 可以綁定自己的域名
當然他也有缺點：
- 使用Jekyll模板系統，相當于靜態頁發布，適合博客，文檔介紹等。
- 動態程序的部分相當局限，比如沒有評論，不過還好我們有解決方案。
- 基于Git，很多東西需要動手，不像WordPress有強大的后臺
大致介紹到此，作為個人博客來說，簡潔清爽的表達自己的工作、心得，就已達目標，所以Github Pages是我認為此需求最完美的解決方案了。
購買、綁定獨立域名
雖說?Godaddy?曾支持過SOPA，并且首頁放著極其不專業的大胸美女，但是作為域名服務商他做的還不賴，選擇它最重要的原因是他支持支付寶，沒有信用卡有時真的很難過。 域名的購買不用多講，注冊、選域名、支付，有網購經驗的都毫無壓力，優惠碼也遍地皆是。域名的配置需要提醒一下，因為偉大英明的GFW的存在，我們必須多做些事情。 流傳Godaddy的域名解析服務器被墻掉，導致域名無法訪問，后來這個事情在AIPSME也發生了，不得已需要把域名解析服務遷移到國內比較穩定的服務商處，這個遷移對于域名來說沒有什么風險，最終的控制權還是在Godaddy那里，你隨時都可以改回去。 我選擇DNSPod的服務，他們的產品做得不錯，易用、免費，收費版有更高端的功能，暫不需要。注冊登錄之后，按照DNSPod的說法，只需三步（我們插入一步）：
- 首先添加域名記錄，可參考DNSPod的幫助文檔：http://www.aips.me/http://www.aips.me/https://www.dnspod.cnSupport
- 在DNSPod自己的域名下添加一條A記錄，地址就是Github Pages的服務IP地址：207.97.227.245
- 在域名注冊商處修改DNS服務:去Godaddy修改Nameservers為這兩個地址：f1g1ns1.dnspod.net、f1g1ns2.dnspod.net。如果你不明白在哪里修改，可以參考這里：Godaddy注冊的域名如何使用DNSPod
- 等待域名解析生效
配置和使用Github
Git是版本管理的未來，他的優點我不再贅述，相關資料很多。推薦這本Git中文教程。 要使用Git，需要安裝它的客戶端，推薦在Linux下使用Git，會比較方便。Windows版的下載地址在這里：http://code.google.com/p/msysgit/downloads/list。其他系統的安裝也可以參考官方的安裝教程。 Mac 上可以直接安裝Github的圖像操作客戶端，另外再安裝并且配置一個 Git 環境，然后就可以很爽過的操作了。 在Mac中，打開終端（Terminal）：
1、檢查SSH keys的設置
首先我們需要檢查你電腦上現有的ssh key：
1 | $ cd ~/.ssh |
如果顯示“No such file or directory”，跳到第三步，否則繼續。
2、備份和移除原來的ssh key設置：
因為已經存在key文件，所以需要備份舊的數據并刪除：
1 | $ ls config id_rsa id_rsa.pub known_hosts $ mkdir key_backup $ cp id_rsa* key_backup $ rm id_rsa* |
3、生成新的SSH Key：
輸入下面的代碼，就可以生成新的key文件，我們只需要默認設置就好，所以當需要輸入文件名的時候，回車就好。
1 | $ 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): |
然后系統會要你輸入加密串（Passphrase）：
1 | Enter passphrase (empty for no passphrase):<輸入加密串> Enter same passphrase again:<再次輸入加密串> |
最后看到這樣的界面，就成功設置ssh key了： 
4、添加SSH Key到GitHub：
在本機設置SSH Key之后，需要添加到GitHub上，以完成SSH鏈接的設置。 用文本編輯工具打開id_rsa.pub文件（個人建議，用vi指令打開最佳），如果看不到這個文件，你需要設置顯示隱藏文件。準確的復制這個文件的內容，才能保證設置的成功。 在GitHub的主頁上點擊設置按鈕（Account Settings），選擇SSH Keys項，把復制的內容粘貼進去，然后點擊Add Key按鈕即可： 
【注】如果需要配置多個GitHub賬號，可以參看《多個github帳號的SSH key切換》，不過需要提醒一下的是，如果你只是通過這篇文章中所述配置了Host，那么你多個賬號下面的提交用戶會是一個人，所以需要通過命令git config &http://www.aips.me8211;global &http://www.aips.me8211;unset user.email刪除用戶賬戶設置，在每一個repo下面使用git config &http://www.aips.me8211;local user.email &http://www.aips.me8216;你的github郵箱@mail.com&http://www.aips.me8217; 命令單獨設置用戶賬戶信息。
5、測試一下
可以輸入下面的命令，看看設置是否成功，[email protected]的部分不要修改：
1 | $ ssh -T [email protected] |
如果是下面的反應：
1 | 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就好，然后會看到：
1 | Hi <em>username</em>! You've successfully authenticated, but GitHub does not provide shell access. |
6、設置你的賬號信息
現在你已經可以通過SSH鏈接到GitHub了，還有一些個人信息需要完善的。 Git會根據用戶的名字和郵箱來記錄提交。GitHub也是用這些信息來做權限的處理，輸入下面的代碼進行個人信息的設置，把名稱和郵箱替換成你自己的，名字必須是你的真名，而不是GitHub的昵稱。
1 | $ git config --global user.name "你的名字" $ git config --global user.email "[email protected]" |
好了，你已經可以成功連接GitHub了。
使用GitHub Pages建立博客
與GitHub建立好鏈接之后，就可以方便的使用它提供的Pages服務，GitHub Pages分兩種，一種是你的GitHub用戶名建立的username.github.io這樣的用戶&組織頁（站），另一種是依附項目的pages。
User & Organization Pages
想建立個人博客是用的第一種，形如xiaowudesign.github.io這樣的可訪問的站，每個用戶名下面只能建立一個，創建之后點擊Admin進入項目管理，可以看到是這樣的： 
而普通的項目是這樣的，即使你也是用的othername.github.io： 
創建好username.github.io項目之后，提交一個index.html文件，然后push到GitHub的master分支（也就是普通意義上的主干）。第一次頁面生效需要一些時間，大概10分鐘左右。 生效之后，訪問username.github.io就可以看到你上傳的頁面了，http://www.aips.me/xiaowudesign.github.com就是一個例子。 關于第二種項目pages，簡單提一下，他和用戶pages使用的后臺程序是同一套，只不過它的目的是項目的幫助文檔等跟項目綁定的內容，所以需要在項目的gh-pages分支上去提交相應的文件，GitHub會自動幫你生成項目pages。具體的使用幫助可以參考Github Pages的官方文檔。
綁定域名
我們在第一部分就提到了在DNS部分的設置，再來看在GitHub的配置，要想讓username.github.io能通過你自己的域名來訪問，需要在項目的根目錄下新建一個名為CNAME的文件，文件內容形如：
1 | www.aips.me |
你也可以綁定在二級域名上：
1 | blog.aips.me |
需要提醒的一點是，如果你使用形如beiyuu.com這樣的一級域名的話，需要在DNS處設置A記錄到207.97.227.245（這個地址會有變動，這里查看），而不是在DNS處設置為CNAME的形式，否則可能會對其他服務（比如email）造成影響。 設置成功后，根據DNS的情況，最長可能需要一天才能生效，耐心等待吧。 你可以直接fork我的項目，然后改名，就有了你自己的滿足Jekyll要求的文檔了，當然你也可以按照下面的介紹自己創建。
Jekyll基本結構
Jekyll的核心其實就是一個文本的轉換引擎，用你最喜歡的標記語言寫文檔，可以是Markdown、Textile或者HTML等等，再通過layout將文檔拼裝起來，根據你設置的URL規則來展現，這些都是通過嚴格的配置文件來定義，最終的產出就是web頁面。 基本的Jekyll結構如下：
1 | |-- _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 |
簡單介紹一下他們的作用：
_config.yml
配置文件，用來定義你想要的效果，設置之后就不用關心了。
_includes
可以用來存放一些小的可復用的模塊，方便通過
1 | { % include file.ext %} |
（去掉前兩個{中或者{與%中的空格，下同）靈活的調用。這條命令會調用_includes/file.ext文件。
_layouts
這是模板文件存放的位置。模板需要通過YAML front matter來定義，后面會講到，
1 | { { content }} |
標記用來將數據插入到這些模板中來。
_posts
你的動態內容，一般來說就是你的博客正文存放的文件夾。他的命名有嚴格的規定，必須是
1 | 2012-02-22-artical-title.MARKUP |
這樣的形式，MARKUP是你所使用標記語言的文件后綴名，根據_config.yml中設定的鏈接規則，可以根據你的文件名靈活調整，文章的日期和標記語言后綴與文章的標題的獨立的。
_site
這個是Jekyll生成的最終的文檔，不用去關心。最好把他放在你的
1 | .gitignore |
文件中忽略它。
其他文件夾
你可以創建任何的文件夾，在根目錄下面也可以創建任何文件，假設你創建了 project 文件夾，下面有一個 github-pages.md 的文件，那么你就可以通過yoursite.com/project/github-pages訪問的到，如果你是使用一級域名的話。文件后綴可以是.html或者markdown或者textile。這里還有很多的例子：http://www.aips.me/http://www.aips.me/https://github.com/mojombo/jekyll/wiki/Sites
Jekyll的配置
Jekyll的配置寫在_config.yml文件中，可配置項有很多，我們不去一一追究了，很多配置雖有用但是一般不需要去關心，官方配置文檔有很詳細的說明，確實需要了可以去這里查，我們主要說兩個比較重要的東西，一個是 Permalink，還有就是自定義項。 ? Permalink 項用來定義你最終的文章鏈接是什么形式，他有下面幾個變量：
- year： 文件名中的年份
- month： 文件名中的月份
- day： 文件名中的日期
- title： 文件名中的文章標題
- categories： 文章的分類，如果文章沒有分類，會忽略
- 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（你的文章標題）
自定義項的內容，例如我定義了title:Xiaowu&http://www.aips.me8217;s Blog這樣一項，那么你就可以在文章中使用{ { site.title }}來引用這個變量了，非常方便定義些全局變量。
YAML Front Matter和模板變量
對于使用YAML定義格式的文章，Jekyll會特別對待，他的格式要求比較嚴格，必須是這樣的形式：
1 | --- layout: post title: Blogging Like a Hacker --- |
前后的&http://www.aips.me8212;不能省略，在這之間，你可以定一些你需要的變量，layout就是調用_layouts下面的某一個模板，他還有一些其他的變量可以使用：
- permalink：?你可以對某一篇文章使用通用設置之外的永久鏈接
- published：?可以單獨設置某一篇文章是否需要發布
- category：?設置文章的分類
- tags：?設置文章的tag
上面的title就是自定義的內容，你也可以設置其他的內容，在文章中可以通過
1 | { { page.title }} |
這樣的形式調用。 模板變量，我們之前也涉及了不少了，還有其他需要的變量，可以參考官方的文檔：http://www.aips.me/http://www.aips.me/https://github.com/mojombo/jekyll/wiki/template-data
使用Disqus管理評論
模板部分到此就算是配置完畢了，但是Jekyll只是個靜態頁面的發布系統，想做到關爽場倒是很容易，如果想要評論呢？也很簡單。 現在專做評論模塊的產品有很多，比如Disqus，還有國產的多說，Disqus對現在各種系統的支持都比較全面，到寫博客為止，多說現在僅是WordPress的一個插件，所以我這里暫時也使用不了，多說與國內的社交網絡緊密結合，還是有很多亮點的，值得期待一下。我先選擇了Disqus。 注冊賬號什么的就不提了，Disqus支持很多的博客平臺，參見下圖： 
我們選擇最下面的Universal Code就好，然后會看到一個介紹頁面，把下面這段代碼復制到你的模板里面，可以只復制到顯示文章的模板中：
1 | <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 這個地方需要改成你配置的網站名 /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> |
配置完之后，你也可以做一些異步加載的處理，提高性能，比如我就在最開始頁面打開的時候不顯示評論，當你想看評論的時候，點擊“顯示評論”再加載Disqus的模塊。代碼很簡單，你可以參考我的寫法。
2
3
4
5
6
? $&http://www.aips.me40;this&http://www.aips.me41;.html&http://www.aips.me40;&http://www.aips.me41;;
? var disqus_shortname = ;
? var that = this;
? BYB.includeScript&http://www.aips.me40; + disqus_shortname + ,function&http://www.aips.me40;&http://www.aips.me41;&http://www.aips.me123;$&http://www.aips.me40;that&http://www.aips.me41;.remove&http://www.aips.me40;&http://www.aips.me41;&http://www.aips.me125;&http://www.aips.me41;; //這是一個加載js的函數
&http://www.aips.me125;&http://www.aips.me41;;
如果你不喜歡Disqus的樣式，你也可以根據他生成的HTML結構，自己改寫樣式覆蓋它的，Disqus現在也提供每個頁面的評論數接口，幫助文檔在這里可以看到。
代碼高亮插件
如果寫技術博客，代碼高亮少不了，有兩個可選插件DlHightLight代碼高亮組件和Google Code Prettify。DLHightLight支持的語言相對較少一些，有js、css、xml和html，Google的高亮插件基本上任何語言都支持，也可以自定義語言，也支持自動識別，也有行號的特別支持。 Google的高亮插件使用也比較方便，只需要在<pre>的標簽上加入prettyprint即可。所以我選擇了Google Code Prettify。
搭建本地jekyll環境
這里主要介紹一下在Mac OS X下面的安裝過程，其他操作系統可以參考官方的jekyll安裝。 作為生活在水深火熱的墻內人民，有必要進行下面一步修改gem的源，方便我們更快的下載所需組建；
1 | sudo gem sources --remove http://rubygems.org/ sudo gem sources -a http://ruby.taobao.org/ |
然后用Gem安裝jekyll
1 | $ gem install jekyll |
不過一般如果有出錯提示，你可能需要這樣安裝：
1 | $ sudo gem install jekyll |
我到了這一步的時候總是提示錯誤Failed to build gem native extension，很可能的一個原因是沒有安裝rvm，rvm的安裝可以參考這里，或者敲入下面的命令：
1 | $ curl -L https://get.rvm.io | bash -s stable --ruby |
然后還需要安裝Markdown的解釋器，這個需要在你的_config.yml里面設置markdown:rdiscount：
1 | $ gem install jekyll rdiscount |
好了，如果一切順利的話，本地環境就基本搭建完成了，進入之前我們建立的博客目錄，運行下面的命令：
1 | $ jekyll --server |
這個時候，你就可以通過localhost:4000來訪問了。還有關于jekyll bootstrap的資料，需要自己修改調試的，可以研究一下。 我在這個過程中還遇到兩個詭異的沒有解決的問題，一個是我放在根目錄下面的blog.md等文件，在GitHub的pages服務上一切正常，可以通過http://www.aips.me/xiaowudesign.github.com訪問的到，但是在本地環境下，總是not found，很是讓人郁悶，看生成的_site目錄下面的文件，也是正常的blog.html，但就是找不到，只有當我把URL改為localhost:4000/blog.html的時候，才能訪問的到，環境不同真糟糕。
還有一個是關于
1 | category |
的問題，根據YAML的語法，我們在文章頭部可以定義文章所屬的類別，也可以定義為category:[blog,rss]這樣子的多類別，我在本地試一切正常，但是push到GitHub之后，就無法讀取了，真讓人著急，沒有辦法，只能采用別的辦法滿足我的需求了。這里還有一篇Jekyll 本地調試之若干問題，安裝中如果有其他問題，也可以對照參考一下。
結語
如果你跟著這篇不那么詳盡的教程，成功搭建了自己的博客，恭喜你！剩下的就是保持熱情的去寫自己的文章吧。
