使用Github Pages建独立博客
Github很好的將代碼和社區(qū)聯(lián)系在了一起,于是發(fā)生了很多有趣的事情,世界也因?yàn)樗篮昧艘稽c(diǎn)點(diǎn)。Github作為現(xiàn)在最流行的代碼倉庫,已經(jīng)得到很多大公司和項(xiàng)目的青睞,比如jQuery、Twitter等。為使項(xiàng)目更方便的被人理解,介紹頁面少不了,甚至?xí)枰暾奈臋n站,Github替你想到了這一點(diǎn),他提供了Github Pages的服務(wù),不僅可以方便的為項(xiàng)目建立介紹站點(diǎn),也可以用來建立個(gè)人博客。
Github Pages有以下幾個(gè)優(yōu)點(diǎn):
- 輕量級的博客系統(tǒng),沒有麻煩的配置
- 使用標(biāo)記語言,比如Markdown
- 無需自己搭建服務(wù)器
- 根據(jù)Github的限制,對應(yīng)的每個(gè)站有300MB空間
- 可以綁定自己的域名
當(dāng)然他也有缺點(diǎn):
- 使用Jekyll模板系統(tǒng),相當(dāng)于靜態(tài)頁發(fā)布,適合博客,文檔介紹等。
- 動態(tài)程序的部分相當(dāng)局限,比如沒有評論,不過還好我們有解決方案。
- 基于Git,很多東西需要動手,不像Wordpress有強(qiáng)大的后臺
大致介紹到此,作為個(gè)人博客來說,簡潔清爽的表達(dá)自己的工作、心得,就已達(dá)目標(biāo),所以Github Pages是我認(rèn)為此需求最完美的解決方案了。
購買、綁定獨(dú)立域名
雖說Godaddy曾支持過SOPA,并且首頁放著極其不專業(yè)的大胸美女,但是作為域名服務(wù)商他做的還不賴,選擇它最重要的原因是他支持支付寶,沒有信用卡有時(shí)真的很難過。
域名的購買不用多講,注冊、選域名、支付,有網(wǎng)購經(jīng)驗(yàn)的都毫無壓力,優(yōu)惠碼也遍地皆是。域名的配置需要提醒一下,因?yàn)閭ゴ笥⒚鞯腉FW的存在,我們必須多做些事情。
流傳Godaddy的域名解析服務(wù)器被墻掉,導(dǎo)致域名無法訪問,后來這個(gè)事情在BeiYuu也發(fā)生了,不得已需要把域名解析服務(wù)遷移到國內(nèi)比較穩(wěn)定的服務(wù)商處,這個(gè)遷移對于域名來說沒有什么風(fēng)險(xiǎn),最終的控制權(quán)還是在Godaddy那里,你隨時(shí)都可以改回去。
我們選擇DNSPod的服務(wù),他們的產(chǎn)品做得不錯(cuò),易用、免費(fèi),收費(fèi)版有更高端的功能,暫不需要。注冊登錄之后,按照DNSPod的說法,只需三步(我們插入一步):
- 首先添加域名記錄,可參考DNSPod的幫助文檔:https://www.dnspod.cn/Support
- 在DNSPod自己的域名下添加一條A記錄,地址就是Github Pages的服務(wù)IP地址:207.97.227.245
- 在域名注冊商處修改DNS服務(wù):去Godaddy修改Nameservers為這兩個(gè)地址:f1g1ns1.dnspod.net、f1g1ns2.dnspod.net。如果你不明白在哪里修改,可以參考這里:Godaddy注冊的域名如何使用DNSPod
- 等待域名解析生效
域名的配置部分完成,跪謝方校長。
配置和使用Github
Git是版本管理的未來,他的優(yōu)點(diǎn)我不再贅述,相關(guān)資料很多。推薦這本Git中文教程。
要使用Git,需要安裝它的客戶端,推薦在Linux下使用Git,會比較方便。Windows版的下載地址在這里:http://code.google.com/p/msysgit/downloads/list。其他系統(tǒng)的安裝也可以參考官方的安裝教程。
下載安裝客戶端之后,各個(gè)系統(tǒng)的配置就類似了,我們使用windows作為例子,Linux和Mac與此類似。
在Windows下,打開Git Bash,其他系統(tǒng)下面則打開終端(Terminal):
1、檢查SSH keys的設(shè)置
首先我們需要檢查你電腦上現(xiàn)有的ssh key:
如果顯示“No such file or directory”,跳到第三步,否則繼續(xù)。
2、備份和移除原來的ssh key設(shè)置:
因?yàn)橐呀?jīng)存在key文件,所以需要備份舊的數(shù)據(jù)并刪除:
3、生成新的SSH Key:
輸入下面的代碼,就可以生成新的key文件,我們只需要默認(rèn)設(shè)置就好,所以當(dāng)需要輸入文件名的時(shí)候,回車就好。
然后系統(tǒng)會要你輸入加密串(Passphrase):
最后看到這樣的界面,就成功設(shè)置ssh key了:
4、添加SSH Key到GitHub:
在本機(jī)設(shè)置SSH Key之后,需要添加到GitHub上,以完成SSH鏈接的設(shè)置。
用文本編輯工具打開id_rsa.pub文件,如果看不到這個(gè)文件,你需要設(shè)置顯示隱藏文件。準(zhǔn)確的復(fù)制這個(gè)文件的內(nèi)容,才能保證設(shè)置的成功。
在GitHub的主頁上點(diǎn)擊設(shè)置按鈕:
選擇SSH Keys項(xiàng),把復(fù)制的內(nèi)容粘貼進(jìn)去,然后點(diǎn)擊Add Key按鈕即可:
PS:如果需要配置多個(gè)GitHub賬號,可以參看這個(gè)多個(gè)github帳號的SSH key切換,不過需要提醒一下的是,如果你只是通過這篇文章中所述配置了Host,那么你多個(gè)賬號下面的提交用戶會是一個(gè)人,所以需要通過命令git config --global --unset user.email刪除用戶賬戶設(shè)置,在每一個(gè)repo下面使用git config --local user.email '你的github郵箱@mail.com' 命令單獨(dú)設(shè)置用戶賬戶信息
5、測試一下
可以輸入下面的命令,看看設(shè)置是否成功,git@github.com的部分不要修改:
如果是下面的反應(yīng):
不要緊張,輸入yes就好,然后會看到:
6、設(shè)置你的賬號信息
現(xiàn)在你已經(jīng)可以通過SSH鏈接到GitHub了,還有一些個(gè)人信息需要完善的。
Git會根據(jù)用戶的名字和郵箱來記錄提交。GitHub也是用這些信息來做權(quán)限的處理,輸入下面的代碼進(jìn)行個(gè)人信息的設(shè)置,把名稱和郵箱替換成你自己的,名字必須是你的真名,而不是GitHub的昵稱。
設(shè)置GitHub的token
2012-4-28補(bǔ)充:新版的接口已經(jīng)不需要配置token了,所以下面這段可以跳過了
有些工具沒有通過SSH來鏈接GitHub。如果要使用這類工具,你需要找到然后設(shè)置你的API Token。
在GitHub上,你可以點(diǎn)擊Account Setting > Account Admin:
然后在你的命令行中,輸入下面的命令,把token添加進(jìn)去:
如果你改了GitHub的密碼,需要重新設(shè)置token。
成功了
好了,你已經(jīng)可以成功連接GitHub了。
使用GitHub Pages建立博客
與GitHub建立好鏈接之后,就可以方便的使用它提供的Pages服務(wù),GitHub Pages分兩種,一種是你的GitHub用戶名建立的username.github.io這樣的用戶&組織頁(站),另一種是依附項(xiàng)目的pages。
User & Organization Pages
想建立個(gè)人博客是用的第一種,形如beiyuu.github.io這樣的可訪問的站,每個(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分支(也就是普通意義上的主干)。第一次頁面生效需要一些時(shí)間,大概10分鐘左右。
生效之后,訪問username.github.io就可以看到你上傳的頁面了,beiyuu.github.io就是一個(gè)例子。
關(guān)于第二種項(xiàng)目pages,簡單提一下,他和用戶pages使用的后臺程序是同一套,只不過它的目的是項(xiàng)目的幫助文檔等跟項(xiàng)目綁定的內(nèi)容,所以需要在項(xiàng)目的gh-pages分支上去提交相應(yīng)的文件,GitHub會自動幫你生成項(xiàng)目pages。具體的使用幫助可以參考Github Pages的官方文檔:
綁定域名
我們在第一部分就提到了在DNS部分的設(shè)置,再來看在GitHub的配置,要想讓username.github.io能通過你自己的域名來訪問,需要在項(xiàng)目的根目錄下新建一個(gè)名為CNAME的文件,文件內(nèi)容形如:
你也可以綁定在二級域名上:
需要提醒的一點(diǎn)是,如果你使用形如beiyuu.com這樣的一級域名的話,需要在DNS處設(shè)置A記錄到207.97.227.245(這個(gè)地址會有變動,這里查看),而不是在DNS處設(shè)置為CNAME的形式,否則可能會對其他服務(wù)(比如email)造成影響。
設(shè)置成功后,根據(jù)DNS的情況,最長可能需要一天才能生效,耐心等待吧。
Jekyll模板系統(tǒng)
GitHub Pages為了提供對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)記語言寫文檔,可以是Markdown、Textile或者HTML等等,再通過layout將文檔拼裝起來,根據(jù)你設(shè)置的URL規(guī)則來展現(xiàn),這些都是通過嚴(yán)格的配置文件來定義,最終的產(chǎn)出就是web頁面。
基本的Jekyll結(jié)構(gòu)如下:
簡單介紹一下他們的作用:
_config.yml
配置文件,用來定義你想要的效果,設(shè)置之后就不用關(guān)心了。
_includes
可以用來存放一些小的可復(fù)用的模塊,方便通過{ % include file.ext %}(去掉前兩個(gè){中或者{與%中的空格,下同)靈活的調(diào)用。這條命令會調(diào)用_includes/file.ext文件。
_layouts
這是模板文件存放的位置。模板需要通過YAML front matter來定義,后面會講到,{ { content }}標(biāo)記用來將數(shù)據(jù)插入到這些模板中來。
_posts
你的動態(tài)內(nèi)容,一般來說就是你的博客正文存放的文件夾。他的命名有嚴(yán)格的規(guī)定,必須是2012-02-22-artical-title.MARKUP這樣的形式,MARKUP是你所使用標(biāo)記語言的文件后綴名,根據(jù)_config.yml中設(shè)定的鏈接規(guī)則,可以根據(jù)你的文件名靈活調(diào)整,文章的日期和標(biāo)記語言后綴與文章的標(biāo)題的獨(dú)立的。
_site
這個(gè)是Jekyll生成的最終的文檔,不用去關(guān)心。最好把他放在你的.gitignore文件中忽略它。
其他文件夾
你可以創(chuàng)建任何的文件夾,在根目錄下面也可以創(chuàng)建任何文件,假設(shè)你創(chuàng)建了project文件夾,下面有一個(gè)github-pages.md的文件,那么你就可以通過yoursite.com/project/github-pages訪問的到,如果你是使用一級域名的話。文件后綴可以是.html或者markdown或者textile。這里還有很多的例子:https://github.com/mojombo/jekyll/wiki/Sites
Jekyll的配置
Jekyll的配置寫在_config.yml文件中,可配置項(xiàng)有很多,我們不去一一追究了,很多配置雖有用但是一般不需要去關(guān)心,官方配置文檔有很詳細(xì)的說明,確實(shí)需要了可以去這里查,我們主要說兩個(gè)比較重要的東西,一個(gè)是Permalink,還有就是自定義項(xiàng)。
Permalink項(xiàng)用來定義你最終的文章鏈接是什么形式,他有下面幾個(gè)變量:
- year 文件名中的年份
- month 文件名中的月份
- day 文件名中的日期
- title 文件名中的文章標(biāo)題
- 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
自定義項(xiàng)的內(nèi)容,例如我們定義了title:BeiYuu的博客這樣一項(xiàng),那么你就可以在文章中使用{ { site.title }}來引用這個(gè)變量了,非常方便定義些全局變量。
YAML Front Matter和模板變量
對于使用YAML定義格式的文章,Jekyll會特別對待,他的格式要求比較嚴(yán)格,必須是這樣的形式:
前后的---不能省略,在這之間,你可以定一些你需要的變量,layout就是調(diào)用_layouts下面的某一個(gè)模板,他還有一些其他的變量可以使用:
- permalink 你可以對某一篇文章使用通用設(shè)置之外的永久鏈接
- published 可以單獨(dú)設(shè)置某一篇文章是否需要發(fā)布
- category 設(shè)置文章的分類
- tags 設(shè)置文章的tag
上面的title就是自定義的內(nèi)容,你也可以設(shè)置其他的內(nèi)容,在文章中可以通過{ { page.title }}這樣的形式調(diào)用。
模板變量,我們之前也涉及了不少了,還有其他需要的變量,可以參考官方的文檔:https://github.com/mojombo/jekyll/wiki/template-data
使用Disqus管理評論
模板部分到此就算是配置完畢了,但是Jekyll只是個(gè)靜態(tài)頁面的發(fā)布系統(tǒng),想做到關(guān)爽場倒是很容易,如果想要評論呢?也很簡單。
現(xiàn)在專做評論模塊的產(chǎn)品有很多,比如Disqus,還有國產(chǎn)的多說,Disqus對現(xiàn)在各種系統(tǒng)的支持都比較全面,到寫博客為止,多說現(xiàn)在僅是WordPress的一個(gè)插件,所以我這里暫時(shí)也使用不了,多說與國內(nèi)的社交網(wǎng)絡(luò)緊密結(jié)合,還是有很多亮點(diǎn)的,值得期待一下。我先選擇了Disqus。
注冊賬號什么的就不提了,Disqus支持很多的博客平臺,參見下圖:
我們選擇最下面的Universal Code就好,然后會看到一個(gè)介紹頁面,把下面這段代碼復(fù)制到你的模板里面,可以只復(fù)制到顯示文章的模板中:
配置完之后,你也可以做一些異步加載的處理,提高性能,比如我就在最開始頁面打開的時(shí)候不顯示評論,當(dāng)你想看評論的時(shí)候,點(diǎn)擊“顯示評論”再加載Disqus的模塊。代碼很簡單,你可以參考我的寫法。
如果你不喜歡Disqus的樣式,你也可以根據(jù)他生成的HTML結(jié)構(gòu),自己改寫樣式覆蓋它的,Disqus現(xiàn)在也提供每個(gè)頁面的評論數(shù)接口,幫助文檔在這里可以看到。
代碼高亮插件
如果寫技術(shù)博客,代碼高亮少不了,有兩個(gè)可選插件DlHightLight代碼高亮組件和Google Code Prettify。DLHightLight支持的語言相對較少一些,有js、css、xml和html,Google的高亮插件基本上任何語言都支持,也可以自定義語言,也支持自動識別,也有行號的特別支持。
Google的高亮插件使用也比較方便,只需要在<pre>的標(biāo)簽上加入prettyprint即可。所以我選擇了Google Code Prettify。
搭建本地jekyll環(huán)境
這里主要介紹一下在Mac OS X下面的安裝過程,其他操作系統(tǒng)可以參考官方的jekyll安裝。
作為生活在水深火熱的墻內(nèi)人民,有必要進(jìn)行下面一步修改gem的源,方便我們更快的下載所需組建:
然后用Gem安裝jekyll
不過一般如果有出錯(cuò)提示,你可能需要這樣安裝:
我到了這一步的時(shí)候總是提示錯(cuò)誤Failed to build gem native extension,很可能的一個(gè)原因是沒有安裝rvm,rvm的安裝可以參考這里,或者敲入下面的命令:
然后還需要安裝Markdown的解釋器,這個(gè)需要在你的_config.yml里面設(shè)置markdown:rdiscount:
好了,如果一切順利的話,本地環(huán)境就基本搭建完成了,進(jìn)入之前我們建立的博客目錄,運(yùn)行下面的命令:
這個(gè)時(shí)候,你就可以通過localhost:4000來訪問了。還有關(guān)于jekyll bootstrap的資料,需要自己修改調(diào)試的,可以研究一下。
我在這個(gè)過程中還遇到兩個(gè)詭異的沒有解決的問題,一個(gè)是我放在根目錄下面的blog.md等文件,在GitHub的pages服務(wù)上一切正常,可以通過beiyuu.com/blog訪問的到,但是在本地環(huán)境下,總是not found,很是讓人郁悶,看生成的_site目錄下面的文件,也是正常的blog.html,但就是找不到,只有當(dāng)我把URL改為localhost:4000/blog.html的時(shí)候,才能訪問的到,環(huán)境不同真糟糕。
還有一個(gè)是關(guān)于category的問題,根據(jù)YAML的語法,我們在文章頭部可以定義文章所屬的類別,也可以定義為category:[blog,rss]這樣子的多類別,我在本地試一切正常,但是push到GitHub之后,就無法讀取了,真讓人著急,沒有辦法,只能采用別的辦法滿足我的需求了。這里還有一篇Jekyll 本地調(diào)試之若干問題,安裝中如果有其他問題,也可以對照參考一下。
結(jié)語
如果你跟著這篇不那么詳盡的教程,成功搭建了自己的博客,恭喜你!剩下的就是保持熱情的去寫自己的文章吧。
from: http://beiyuu.com/github-pages/
總結(jié)
以上是生活随笔為你收集整理的使用Github Pages建独立博客的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 在Github上搭建Jekyll博客和创
- 下一篇: 利用github-pages建立个人博客