使用Github Pages建獨立博客

原文連接 http://beiyuu.com/github-pages/

 

Github很好的將代碼和社區聯繫在了一塊兒，因而發生了不少有趣的事情，世界也由於他美好了一點點。Github做爲如今最流行的代碼倉庫，已經獲得不少大公司和項目的青睞，好比jQuery、Twitter等。爲使項目更方便的被人理解，介紹頁面少不了，甚至會須要完整的文檔站，Github替你想到了這一點，他提供了Github Pages的服務，不只能夠方便的爲項目創建介紹站點，也能夠用來創建我的博客。

Github Pages有如下幾個優勢：

• 輕量級的博客系統，沒有麻煩的配置
• 使用標記語言，好比Markdown
• 無需本身搭建服務器
• 根據Github的限制，對應的每一個站有300MB空間
• 能夠綁定本身的域名

固然他也有缺點：

• 使用Jekyll模板系統，至關於靜態頁發佈，適合博客，文檔介紹等。
• 動態程序的部分至關侷限，好比沒有評論，不過還好咱們有解決方案。
• 基於Git，不少東西須要動手，不像Wordpress有強大的後臺

大體介紹到此，做爲我的博客來講，簡潔清爽的表達本身的工做、心得，就已達目標，因此Github Pages是我認爲此需求最完美的解決方案了。

購買、綁定獨立域名

雖然說Godaddy曾支持過SOPA，而且首頁放着極其不專業的大胸美女，可是做爲域名服務商他作的還不賴，選擇它最重要的緣由是他支持支付寶，沒有信用卡有時真的很難過。

域名的購買不用多講，註冊、選域名、支付，有網購經驗的都毫無壓力，優惠碼也遍地皆是。域名的配置須要提醒一下，由於偉大英明的GFW的存在，咱們必須多作些事情。

流傳Godaddy的域名解析服務器被牆掉，致使域名沒法訪問，後來這個事情在BeiYuu也發生了，不得已須要把域名解析服務遷移到國內比較穩定的服務商處，這個遷移對於域名來講沒有什麼風險，最終的控制權仍是在Godaddy那裏，你隨時均可以改回去。

咱們選擇DNSPod的服務，他們的產品作得不錯，易用、免費，收費版有更高端的功能，暫不須要。註冊登陸以後，按照DNSPod的說法，只需三步（咱們插入一步）：

• 首先添加域名記錄，可參考DNSPod的幫助文檔：https://www.dnspod.cn/Support
• 在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。其餘系統的安裝也能夠參考官方的安裝教程。

下載安裝客戶端以後，各個系統的配置就相似了，咱們使用windows做爲例子，Linux和Mac與此相似。

在Windows下，打開Git Bash，其餘系統下面則打開終端（Terminal）：

一、檢查SSH keys的設置

首先咱們須要檢查你電腦上現有的ssh key：

1. $ cd ~/.ssh

若是顯示「No such file or directory」，跳到第三步，不然繼續。

二、備份和移除原來的ssh key設置：

由於已經存在key文件，因此須要備份舊的數據並刪除：

1. $ ls
2. config id_rsa id_rsa.pub known_hosts
3. $ mkdir key_backup
4. $ cp id_rsa* key_backup
5. $ rm id_rsa*

三、生成新的SSH Key：

輸入下面的代碼，就能夠生成新的key文件，咱們只須要默認設置就好，因此當須要輸入文件名的時候，回車就好。

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

而後系統會要你輸入加密串（Passphrase）：

1. Enter passphrase (empty forno passphrase):<輸入加密串>
2. Enter same passphrase again:<再次輸入加密串>

最後看到這樣的界面，就成功設置ssh key了：

四、添加SSH Key到GitHub：

在本機設置SSH Key以後，須要添加到GitHub上，以完成SSH連接的設置。

用文本編輯工具打開id_rsa.pub文件，若是看不到這個文件，你須要設置顯示隱藏文件。準確的複製這個文件的內容，才能保證設置的成功。

在GitHub的主頁上點擊設置按鈕：

選擇SSH Keys項，把複製的內容粘貼進去，而後點擊Add Key按鈕便可：

PS：若是須要配置多個GitHub帳號，能夠參看這個多個github賬號的SSH key切換，不過須要提醒一下的是，若是你只是經過這篇文章中所述配置了Host，那麼你多個帳號下面的提交用戶會是一我的，因此須要經過命令git config --global --unset user.email刪除用戶帳戶設置，在每個repo下面使用git config --local user.email '你的github郵箱@mail.com' 命令單獨設置用戶帳戶信息

五、測試一下

能夠輸入下面的命令，看看設置是否成功，git@github.com的部分不要修改：

1. $ ssh -T git@github.com

若是是下面的反應：

1. The authenticity of host 'github.com (207.97.227.239)' can't be established.
2. RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
3. 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.

六、設置你的帳號信息

如今你已經能夠經過SSH連接到GitHub了，還有一些我的信息須要完善的。

Git會根據用戶的名字和郵箱來記錄提交。GitHub也是用這些信息來作權限的處理，輸入下面的代碼進行我的信息的設置，把名稱和郵箱替換成你本身的，名字必須是你的真名，而不是GitHub的暱稱。

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

設置GitHub的token

2012-4-28補充：新版的接口已經不須要配置token了，因此下面這段能夠跳過了

有些工具沒有經過SSH來連接GitHub。若是要使用這類工具，你須要找到而後設置你的API Token。

在GitHub上，你能夠點擊Account Setting > Account Admin：

而後在你的命令行中，輸入下面的命令，把token添加進去：

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

若是你改了GitHub的密碼，須要從新設置token。

成功了

好了，你已經能夠成功鏈接GitHub了。

使用GitHub Pages創建博客

與GitHub創建好連接以後，就能夠方便的使用它提供的Pages服務，GitHub Pages分兩種，一種是你的GitHub用戶名創建的username.github.io這樣的用戶&組織頁（站），另外一種是依附項目的pages。

User & Organization Pages

想創建我的博客是用的第一種，形如beiyuu.github.io這樣的可訪問的站，每一個用戶名下面只能創建一個，建立以後點擊Admin進入項目管理，能夠看到是這樣的：而普通的項目是這樣的，即便你也是用的othername.github.io：

建立好username.github.io項目以後，提交一個index.html文件，而後push到GitHub的master分支（也就是普通意義上的主幹）。第一次頁面生效須要一些時間，大概10分鐘左右。

生效以後，訪問username.github.io就能夠看到你上傳的頁面了，beiyuu.github.com就是一個例子。

關於第二種項目pages，簡單提一下，他和用戶pages使用的後臺程序是同一套，只不過它的目的是項目的幫助文檔等跟項目綁定的內容，因此須要在項目的gh-pages分支上去提交相應的文件，GitHub會自動幫你生成項目pages。具體的使用幫助能夠參考Github Pages的官方文檔：

綁定域名

咱們在第一部分就提到了在DNS部分的設置，再來看在GitHub的配置，要想讓username.github.io能經過你本身的域名來訪問，須要在項目的根目錄下新建一個名爲CNAME的文件，文件內容形如：

1. beiyuu.com

你也能夠綁定在二級域名上：

1. blog.beiyuu.com

須要提醒的一點是，若是你使用形如beiyuu.com這樣的一級域名的話，須要在DNS處設置A記錄到207.97.227.245（這個地址會有變更，這裏查看），而不是在DNS處設置爲CNAME的形式，不然可能會對其餘服務（好比email）形成影響。

設置成功後，根據DNS的狀況，最長可能須要一天才能生效，耐心等待吧。

Jekyll模板系統

GitHub Pages爲了提供對HTML內容的支持，選擇了Jekyll做爲模板系統，Jekyll是一個強大的靜態模板系統，做爲我的博客使用，基本上能夠知足要求，也能保持管理的方便，你能夠查看Jekyll官方文檔。

你能夠直接fork個人項目，而後更名，就有了你本身的知足Jekyll要求的文檔了，固然你也能夠按照下面的介紹本身建立。

Jekyll基本結構

Jekyll的核心其實就是一個文本的轉換引擎，用你最喜歡的標記語言寫文檔，能夠是Markdown、Textile或者HTML等等，再經過layout將文檔拼裝起來，根據你設置的URL規則來展示，這些都是經過嚴格的配置文件來定義，最終的產出就是web頁面。

基本的Jekyll結構以下：

1. |-- _config.yml
2. |-- _includes
3. |-- _layouts
4. ||--default.html
5. |`-- post.html
6. |-- _posts
7. | |-- 2007-10-29-why-every-programmer-should-play-nethack.textile
8. | `--2009-04-26-barcamp-boston-4-roundup.textile
9. |-- _site
10. `-- index.html

簡單介紹一下他們的做用：

_config.yml

配置文件，用來定義你想要的效果，設置以後就不用關心了。

_includes

能夠用來存放一些小的可複用的模塊，方便經過{ % include file.ext %}（去掉前兩個{中或者{與%中的空格，下同）靈活的調用。這條命令會調用_includes/file.ext文件。

_layouts

這是模板文件存放的位置。模板須要經過YAML front matter來定義，後面會講到，{ { content }}標記用來將數據插入到這些模板中來。

_posts

你的動態內容，通常來講就是你的博客正文存放的文件夾。他的命名有嚴格的規定，必須是2012-02-22-artical-title.MARKUP這樣的形式，MARKUP是你所使用標記語言的文件後綴名，根據_config.yml中設定的連接規則，能夠根據你的文件名靈活調整，文章的日期和標記語言後綴與文章的標題的獨立的。

_site

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

其餘文件夾

你能夠建立任何的文件夾，在根目錄下面也能夠建立任何文件，假設你建立了project文件夾，下面有一個github-pages.md的文件，那麼你就能夠經過yoursite.com/project/github-pages訪問的到，若是你是使用一級域名的話。文件後綴能夠是.html或者markdown或者textile。這裏還有不少的例子：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:BeiYuu的博客這樣一項，那麼你就能夠在文章中使用{ { site.title }}來引用這個變量了，很是方便定義些全局變量。

YAML Front Matter和模板變量

對於使用YAML定義格式的文章，Jekyll會特別對待，他的格式要求比較嚴格，必須是這樣的形式：

1. ---
2. layout: post
3. title:BloggingLike a Hacker
4. ---

先後的---不能省略，在這之間，你能夠定一些你須要的變量，layout就是調用_layouts下面的某一個模板，他還有一些其餘的變量可使用：

• permalink 你能夠對某一篇文章使用通用設置以外的永久連接
• published 能夠單獨設置某一篇文章是否須要發佈
• category 設置文章的分類
• tags 設置文章的tag

上面的title就是自定義的內容，你也能夠設置其餘的內容，在文章中能夠經過{ { page.title }}這樣的形式調用。

模板變量，咱們以前也涉及了很多了，還有其餘須要的變量，能夠參考官方的文檔：https://github.com/mojombo/jekyll/wiki/template-data

使用Disqus管理評論

模板部分到此就算是配置完畢了，可是Jekyll只是個靜態頁面的發佈系統，想作到關爽場卻是很容易，若是想要評論呢？也很簡單。

如今專作評論模塊的產品有不少，好比Disqus，還有國產的多說，Disqus對如今各類系統的支持都比較全面，到寫博客爲止，多說如今僅是WordPress的一個插件，因此我這裏暫時也使用不了，多說與國內的社交網絡緊密結合，仍是有不少亮點的，值得期待一下。我先選擇了Disqus。

註冊帳號什麼的就不提了，Disqus支持不少的博客平臺，參見下圖：

咱們選擇最下面的Universal Code就好，而後會看到一個介紹頁面，把下面這段代碼複製到你的模板裏面，能夠只複製到顯示文章的模板中：

1. <divid="disqus_thread"></div>
2. <scripttype="text/javascript">
3. /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
4. var disqus_shortname ='example';// required: replace example with your forum shortname 這個地方須要改爲你配置的網站名
6. /* * * DON'T EDIT BELOW THIS LINE * * */
7. (function(){
8. var dsq = document.createElement('script'); dsq.type ='text/javascript'; dsq.async =true;
9. dsq.src ='http://'+ disqus_shortname +'.disqus.com/embed.js';
10. (document.getElementsByTagName('head')[0]|| document.getElementsByTagName('body')[0]).appendChild(dsq);
11. })();
12. </script>
13. <noscript>Please enable JavaScript to view the <ahref="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
14. <ahref="http://disqus.com"class="dsq-brlink">blog comments powered by <spanclass="logo-disqus">Disqus</span></a>

配置完以後，你也能夠作一些異步加載的處理，提升性能，好比我就在最開始頁面打開的時候不顯示評論，當你想看評論的時候，點擊「顯示評論」再加載Disqus的模塊。代碼很簡單，你能夠參考個人寫法。

1. $('#disqus_container .comment').on('click',function(){
2. $(this).html('加載中...');
3. var disqus_shortname ='beiyuu';
4. var that =this;
5. BYB.includeScript('http://'+ disqus_shortname +'.disqus.com/embed.js',function(){$(that).remove()});//這是一個加載js的函數
6. });

若是你不喜歡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/
2. 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服務上一切正常，能夠經過beiyuu.com/blog訪問的到，可是在本地環境下，老是not found，非常讓人鬱悶，看生成的_site目錄下面的文件，也是正常的blog.html，但就是找不到，只有當我把URL改成localhost:4000/blog.html的時候，才能訪問的到，環境不一樣真糟糕。

還有一個是關於category的問題，根據YAML的語法，咱們在文章頭部能夠定義文章所屬的類別，也能夠定義爲category:[blog,rss]這樣子的多類別，我在本地試一切正常，可是push到GitHub以後，就沒法讀取了，真讓人着急，沒有辦法，只能採用別的辦法知足個人需求了。這裏還有一篇Jekyll 本地調試之若干問題，安裝中若是有其餘問題，也能夠對照參考一下。

結語

若是你跟着這篇不那麼詳盡的教程，成功搭建了本身的博客，恭喜你！剩下的就是保持熱情的去寫本身的文章吧。