使用Github Pages建獨立博客

原文地址:http://beiyuu.com/github-pages/

Github很好的將代碼和社區聯繫在了一起,於是發生了很多有趣的事情,世界也因爲他美好了一點點。Github作爲現在最流行的代碼倉庫,已經得到很多大公司和項目的青睞,比如jQueryTwitter等。爲使項目更方便的被人理解,介紹頁面少不了,甚至會需要完整的文檔站,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
  • 等待域名解析生效

域名的配置部分完成,跪謝方校長。

Git是版本管理的未來,他的優點我不再贅述,相關資料很多。推薦這本Git中文教程

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

下載安裝客戶端之後,各個系統的配置就類似了,我們使用windows作爲例子,Linux和Mac與此類似。

在Windows下,打開Git Bash,其他系統下面則打開終端(Terminal):Git Bash

首先我們需要檢查你電腦上現有的ssh key:

  1. $ cd ~/.ssh

如果顯示“No such file or directory”,跳到第三步,否則繼續。

因爲已經存在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*

輸入下面的代碼,就可以生成新的key文件,我們只需要默認設置就好,所以當需要輸入文件名的時候,回車就好。

  1. $ ssh-keygen -t rsa -C "郵件地址@youremail.com"
  2. Generating public/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 for no passphrase):<輸入加密串>
  2. Enter same passphrase again:<再次輸入加密串>

最後看到這樣的界面,就成功設置ssh key了:ssh key success

在本機設置SSH Key之後,需要添加到GitHub上,以完成SSH鏈接的設置。

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

在GitHub的主頁上點擊設置按鈕:github account setting

選擇SSH Keys項,把複製的內容粘貼進去,然後點擊Add Key按鈕即可:set ssh keys

PS:如果需要配置多個GitHub賬號,可以參看這個多個github帳號的SSH key切換,不過需要提醒一下的是,如果你只是通過這篇文章中所述配置了Host,那麼你多個賬號下面的提交用戶會是一個人,所以需要通過命令git config --global --unset user.email刪除用戶賬戶設置,在每一個repo下面使用git config --local user.email '你的github郵箱@mail.com' 命令單獨設置用戶賬戶信息

可以輸入下面的命令,看看設置是否成功,[email protected]的部分不要修改:

  1. $ ssh -T [email protected].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 "[email protected]"

設置GitHub的token

2012-4-28補充:新版的接口已經不需要配置token了,所以下面這段可以跳過了

有些工具沒有通過SSH來鏈接GitHub。如果要使用這類工具,你需要找到然後設置你的API Token。

在GitHub上,你可以點擊Account Setting > Account Admin:set ssh keys

然後在你的命令行中,輸入下面的命令,把token添加進去:

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

如果你改了GitHub的密碼,需要重新設置token。

好了,你已經可以成功連接GitHub了。

與GitHub建立好鏈接之後,就可以方便的使用它提供的Pages服務,GitHub Pages分兩種,一種是你的GitHub用戶名建立的username.github.io這樣的用戶&組織頁(站),另一種是依附項目的pages。

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

創建好username.github.io項目之後,提交一個index.html文件,然後push到GitHub的master分支(也就是普通意義上的主幹)。第一次頁面生效需要一些時間,大概10分鐘左右。

生效之後,訪問username.github.io就可以看到你上傳的頁面了,beiyuu.github.io就是一個例子。

關於第二種項目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的情況,最長可能需要一天才能生效,耐心等待吧。

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

你可以直接fork我的項目,然後改名,就有了你自己的滿足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的配置寫在_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定義格式的文章,Jekyll會特別對待,他的格式要求比較嚴格,必須是這樣的形式:

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

前後的---不能省略,在這之間,你可以定一些你需要的變量,layout就是調用_layouts下面的某一個模板,他還有一些其他的變量可以使用:

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

上面的title就是自定義的內容,你也可以設置其他的內容,在文章中可以通過{ { page.title }}這樣的形式調用。

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

模板部分到此就算是配置完畢了,但是Jekyll只是個靜態頁面的發佈系統,想做到關爽場倒是很容易,如果想要評論呢?也很簡單。

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

註冊賬號什麼的就不提了,Disqus支持很多的博客平臺,參見下圖:Disqus sites

我們選擇最下面的Universal Code就好,然後會看到一個介紹頁面,把下面這段代碼複製到你的模板裏面,可以只複製到顯示文章的模板中:

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

這裏主要介紹一下在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 serve --watch

這個時候,你就可以通過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 本地調試之若干問題,安裝中如果有其他問題,也可以對照參考一下。

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


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章