前言

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)：

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

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

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

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

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

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

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

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

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

首先添加域名記錄，可參考DNSPod的幫助文檔：https://www.dnspod.cn/Support在DNSPod自己的域名下添加一條A記錄，地址就是Github Pages的服務(wù)IP地址：192.30.252.153在域名注冊(cè)商處修改DNS服務(wù):去Godaddy修改Nameservers為這兩個(gè)地址： f1g1ns1.dnspod.net、f1g1ns2.dnspod.net。

配置和使用Github

Git是版本管理的未來，他的優(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下，打開Git Bash，其他系統(tǒng)下面則打開終端（Terminal）： Git Bash

檢查SSH keys的設(shè)置

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

$ c d ~/.ssh

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

備份和移除原來的ssh key設(shè)置

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

$ lsconfig id_rsa id_rsa.pub known_hosts$ mkdir key_backup$ cp id_rsa* key_backup$ rm id_rsa*

生成新的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:<再次輸入加密串>

最后看到ssh key success，就成功設(shè)置ssh key了.

添加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è)置按鈕： github account setting

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

測(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.

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

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

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

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

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

快速開始

帳號(hào)注冊(cè)

在創(chuàng)建博客之前，當(dāng)然必須有GitHub的帳號(hào)，該帳號(hào)將用來創(chuàng)建項(xiàng)目，默認(rèn)的域名username.github.com/projectName中的username也要用到這個(gè)帳號(hào)。

注意：下面涉及到的一些命令凡是更用戶名和項(xiàng)目名有關(guān)的一律會(huì)用這里的username和projectName代替，注意替換訪問：http://www.github.com/ sign up for free的意思就是“免費(fèi)注冊(cè)登錄”，注冊(cè)你的username和郵箱，郵箱十分重要，GitHub上很多通知都是通過郵箱的。比如你的主頁上傳并構(gòu)建成功會(huì)通過郵箱通知，更重要的是，如果構(gòu)建失敗的話也會(huì)在郵件中說明原因。

創(chuàng)建項(xiàng)目倉庫

在創(chuàng)建博客之前，還需要用已有的帳號(hào)創(chuàng)建一個(gè)項(xiàng)目，上面那個(gè)鏈接的projectName將是這里即將創(chuàng)建的項(xiàng)目名稱。在Git中，項(xiàng)目被稱為倉庫(Repository)，倉庫顧名思義，當(dāng)然可以包含代碼或者非代碼。將來我們的網(wǎng)頁或者模板實(shí)際上都是保存在這個(gè)倉庫中的。

登錄后，訪問https://github.com/new，創(chuàng)建倉庫如下圖：

創(chuàng)建了倉庫后，我們就需要管理它，無論是管理本地倉庫還是遠(yuǎn)程倉庫都需要Git客戶端。Git客戶端實(shí)際上十分強(qiáng)大，它本身就可以offline的創(chuàng)建本地倉庫，而本地倉庫和遠(yuǎn)程倉庫之間的同步也是通過Git客戶端完成的。

這里省略了windows下安裝和使用Git客戶端的基本技巧，您應(yīng)該已經(jīng)掌握此技能了。雖然，您仍然可以按照本教程的指引完成一個(gè)簡(jiǎn)單的網(wǎng)站，但是后期的維護(hù)工作無論如何都不能少了這項(xiàng)技能。

下面的步驟假設(shè)您已經(jīng)安裝好了Git客戶端，安裝和使用技巧請(qǐng)參見：Git學(xué)習(xí)資源

本地編輯及上傳

在磁盤上創(chuàng)建一個(gè)目錄，該目錄與上面的項(xiàng)目名同名，在該目錄下啟用Git Bash命令行，并輸入如下命令

$git init

該命令實(shí)際上是在該目錄下初始化一個(gè)本地的倉庫，會(huì)在目錄下新建一個(gè).git的隱藏文件夾，可以看成是一個(gè)倉庫數(shù)據(jù)庫。

創(chuàng)建一個(gè)沒有父節(jié)點(diǎn)的分支gh-pages，并自動(dòng)切換到這個(gè)分支上。

$git checkout --orphan gh-pages

在Git中，分支(branch)的概念非常重要，Git之所以強(qiáng)大，很大程度上就是因?yàn)樗鼜?qiáng)大的分支體系。這里的分支名字必須是gh-pages，因?yàn)間ithub規(guī)定，只有該分支中的頁面，才會(huì)生成網(wǎng)頁文件。

在該目錄下手動(dòng)創(chuàng)建如下文件和文件夾，最終形成這樣的結(jié)構(gòu)：

• _includes：默認(rèn)的在模板中可以引用的文件的位置，后面會(huì)提到
• _layouts：默認(rèn)的公共頁面的位置，后面會(huì)提到
• _posts：博客文章默認(rèn)的存放位置
• .gitignore：git將忽略這個(gè)文件中列出的匹配的文件或文件夾，不將這些納入源碼管理
• _config.yml：關(guān)于jekyll模板引擎的配置文件
• index.html：默認(rèn)的主頁

在_layouts目錄下創(chuàng)建一個(gè)default.html，在其中輸入如下內(nèi)容，注意：文件本身要以UTF-8 without BOM的格式保存，以防止各種編碼問題，建議使用notepad++或者VIM編輯

default.html

<!DOCTYPE html> <html> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>一步步在GitHub上創(chuàng)建博客主頁(2)</title> </head> <body></body> </html>

編輯index.html

--- layout: default title: test title --- <p>Hello world!</p>

再次打開Git Bash，先后輸入如下命令：

$ git add .$ git commit -m "first post"$ git remote add origin https://github.com/username/projectName.git$ git push origin gh-pages

據(jù)網(wǎng)友反應(yīng)，如果是初次安裝git的話，在commit的時(shí)候會(huì)提示需要配置username和email，請(qǐng)讀者注意根據(jù)提示配置一下，至于username和email可以隨便填

• 將當(dāng)前的改動(dòng)暫存在本地倉庫
• 將暫存的改動(dòng)提交到本地倉庫，并寫入本次提交的注釋是”first post“
• 將遠(yuǎn)程倉庫在本地添加一個(gè)引用：origin
• 向origin推送gh-pages分支，該命令將會(huì)將本地分支gh-pages推送到github的遠(yuǎn)程倉庫，并在遠(yuǎn)程倉庫創(chuàng)建一個(gè)同名的分支。該命令后會(huì)提示輸入用戶名和密碼。

現(xiàn)在，你只需要稍等半分鐘時(shí)間，訪問http://username.github.com/projectName就可以看到生成的博客了

另外上面提到的，如果生成失敗，Github會(huì)向你的郵箱發(fā)送一封郵件說明，請(qǐng)注意查收。

域名掃盲

說實(shí)話，雖然明白什么是域名以及域名解析的原理，但是在實(shí)際的互聯(lián)網(wǎng)環(huán)境中，域名的問題其實(shí)比理論上說的要復(fù)雜些。這里對(duì)一些概念稍作整理。

A（Address）記錄

是用來指定主機(jī)名（或域名）對(duì)應(yīng)的IP地址記錄。用戶可以將該域名下的網(wǎng)站服務(wù)器指向到自己的web server上。同時(shí)也可以設(shè)置您域名的二級(jí)域名。

CNAME

也被稱為規(guī)范名字。這種記錄允許您將多個(gè)名字映射到同一臺(tái)計(jì)算機(jī)。 通常用于同時(shí)提供WWW和MAIL服務(wù)的計(jì)算機(jī)。例如，有一臺(tái)計(jì)算機(jī)名為“host.mydomain.com”（A記錄）。 它同時(shí)提供WWW和MAIL服務(wù)，為了便于用戶訪問服務(wù)。可以為該計(jì)算機(jī)設(shè)置兩個(gè)別名（CNAME）：WWW和MAIL。 這兩個(gè)別名的全稱就是“www.mydomain.com”和“mail.mydomain.com”。實(shí)際上他們都指向“host.mydomain.com”。 同樣的方法可以用于當(dāng)您擁有多個(gè)域名需要指向同一服務(wù)器IP，此時(shí)您就可以將一個(gè)域名做A記錄指向服務(wù)器IP然后將其他的域名做別名到之前做A記錄的域名上，那么當(dāng)您的服務(wù)器IP地址變更時(shí)您就可以不必麻煩的一個(gè)一個(gè)域名更改指向了 只需要更改做A記錄的那個(gè)域名其他做別名的那些域名的指向也將自動(dòng)更改到新的IP地址上了。

TTL

TTL值全稱是“生存時(shí)間（Time To Live)”，簡(jiǎn)單的說它表示DNS記錄在DNS服務(wù)器上緩存時(shí)間。要理解TTL值，請(qǐng)先看下面的一個(gè)例子：假設(shè)，有這樣一個(gè)域名myhost.cnMonkey.com（其實(shí)，這就是一條DNS記錄，通常表示在abc.com域中有一臺(tái)名為myhost的主機(jī)）對(duì)應(yīng)IP地 址為1.1.1.1，它的TTL為10分鐘。這個(gè)域名或稱這條記錄存儲(chǔ)在一臺(tái)名為dns.cnMonkey.com的DNS服務(wù)器上。現(xiàn)在有一個(gè)用戶鍵入一下地址（又稱URL）：http://myhost.cnMonkey.com 這時(shí)會(huì)發(fā)生什么呢？該 訪問者指定的DNS服務(wù)器（或是他的ISP,互聯(lián)網(wǎng)服務(wù)商, 動(dòng)態(tài)分配給他的)8.8.8.8就會(huì)試圖為他解釋myhost.cnMonkey.com，當(dāng)然8.8.8.8這臺(tái)DNS服務(wù)器由于沒有包含 myhost.cnMonkey.com這條信息，因此無法立即解析，但是通過全球DNS的遞歸查詢后，最終定位到dns.cnMonkey.com這臺(tái)DNS服務(wù)器， dns.cnMonkey.com這臺(tái)DNS服務(wù)器將myhost.cnMonkey.com對(duì)應(yīng)的IP地址1.1.1.1告訴8.8.8.8這臺(tái)DNS服務(wù)器，然有再由 8.8.8.8告訴用戶結(jié)果。8.8.8.8為了以后加快對(duì)myhost.cnMonkey.com這條記錄的解析，就將剛才的1.1.1.1結(jié)果保留一段時(shí)間，這 就是TTL時(shí)間，在這段時(shí)間內(nèi)如果用戶又有對(duì)myhost.cnMonkey.com這條記錄的解析請(qǐng)求，它就直接告訴用戶1.1.1.1，當(dāng)TTL到期則又會(huì)重復(fù) 上面的過程。

域名分級(jí)

子域名是個(gè)相對(duì)的概念，是相對(duì)父域名來說的。域名有很多級(jí)，中間用點(diǎn)分開。例如中國(guó)國(guó)家頂級(jí)域名CN，所有以 CN 結(jié)尾的域名便都是它的子域。例如：www.zzy.cn 便是 zzy.cn 的子域，而 zzy.cn 是 cn 的子域。

“二級(jí)域名”：目前有很多用戶認(rèn)為“二級(jí)域名”是自己所注冊(cè)域名的下一級(jí)域名，實(shí)際上這里所謂的“二級(jí)域名”并非真正的“二級(jí)”，而應(yīng)該稱為“次級(jí)”(相對(duì)次級(jí))

例如您注冊(cè)的域名是abc.cn來說：CN為頂級(jí)域，abc.cn為二級(jí)域，www.abc.cn、mail.abc.cn、help.zzy.cn為三級(jí)域。

還有一些特殊的二級(jí)域被用來作頂級(jí)域使用，例如：com.cn、net.cn、org.cn、gov.cn（包括地區(qū)域名bj.cn、fj.cn等）。那么此時(shí)用戶所注冊(cè)的就應(yīng)該是三級(jí)域了，例如114.com.cn。（備注：www.gov.cn實(shí)際上是以gov.cn為后綴的www域名，就是說如果您在域名Whois信息查詢中輸入gov.cn是查詢不到注冊(cè)信息的因?yàn)間ov.cn是作為頂級(jí)域來使用的域名后綴，真正開放注冊(cè)的是www.gov.cn）。然而當(dāng)前有很多用戶還是習(xí)慣地將可以允許用戶注冊(cè)的域名稱為頂級(jí)域名，而所注冊(cè)域名的下一級(jí)域名稱為“二級(jí)域名”，其實(shí)從嚴(yán)格意義上來講這是不對(duì)的，所以我們前面會(huì)說“子域名”、“二級(jí)域名”是相對(duì)的概念，準(zhǔn)確的應(yīng)該稱為“次級(jí)域名”。

域名購買

眾所周知，域名是要購買的，國(guó)內(nèi)用域名訪問主機(jī)大概是要備案的，有些麻煩。所以現(xiàn)在很多人從國(guó)外的域名注冊(cè)商那兒買域名，比如goddady。如果是新手想在國(guó)外買域名的話，最好準(zhǔn)備一張VISA信用卡，并用paypal來支付（可以省手續(xù)費(fèi)）。goddady現(xiàn)在也支持支付寶，支付起來也很方便。

綁定域名到GitHub-Page

其實(shí)十分簡(jiǎn)單，假設(shè)我們購買了域名coolshell.info，想用coolshell.info訪問你的站點(diǎn)http://username.github.com/projectname，你可以參考這個(gè)鏈接：Setting up a custom domain with Pages

在你的域名提供商那邊，設(shè)置一條A記錄：

colshell.info 204.232.175.78（注意：這個(gè)IP難保不會(huì)變，所以要及時(shí)關(guān)注上面這個(gè)鏈接中給出的IP，并及時(shí)更新A記錄）。下面這個(gè)截圖是goddady上的A記錄配置：

然后在你的gh-pages分支的根目錄中創(chuàng)建一個(gè)CNAME文件，其中只能有一行，就是coolshell.info，用Git客戶端上傳更改，大約等十幾分鐘就能生效了。

可以先ping一下coolshell.info，如果返回的IP地址更配置的A記錄一樣的話，說明域名已經(jīng)注冊(cè)好了，就等GitHub生效了。不過別急，你還需要把_config.yml中的baseurl設(shè)置如下

baseurl : /

或者是

baseurl :

這取決于你的模板如何引用baseurl，總之指向根目錄就好了。

剛開始的時(shí)候我比較困惑的是，為什么A記錄都指向的是同一個(gè)IP，GitHub是如何知道應(yīng)該返回哪個(gè)用戶的頁面的。其實(shí)很簡(jiǎn)單，秘密就是上面提到的CNAME文件，GitHub應(yīng)該會(huì)緩存所有g(shù)h-pages分支中的CNAME文件，用戶對(duì)域名的請(qǐng)求被定向到GitHub住服務(wù)器的IP地址后，再根據(jù)用戶請(qǐng)求的域名，判斷對(duì)應(yīng)哪個(gè)gh-pages，而且它會(huì)自動(dòng)帶上項(xiàng)目名，所以baseurl需要改為根目錄。

jekyll的安裝

前幾篇介紹了GitHub-Page的基本原理和使用方法，還介紹了如何將購買的域名綁定博客主頁。然而，當(dāng)需要正兒八經(jīng)的將一個(gè)博客構(gòu)建起來，不僅要知道如何上傳我們的文件，還要能夠高效的更好的設(shè)計(jì)博客。因此，必須能夠在上傳之前在本地完成測(cè)試；另一方面，完全靠html來編輯博客，顯然工作量太大，隨著博客越來越復(fù)雜，簡(jiǎn)直不可能維護(hù)，因此，需要用jekyll這個(gè)模板引擎來幫忙。本篇先介紹如何搭建一個(gè)本地的測(cè)試環(huán)境。

更新

根據(jù)網(wǎng)友的反應(yīng)，需要注意的是Ruby的版本和RubyDevKit的版本要對(duì)應(yīng)，不要裝錯(cuò)；

另外，目前新版的Ruby自帶gem了，所以gem安裝可以跳過；

由于國(guó)內(nèi)的網(wǎng)絡(luò)（你們懂的），gem官方的源基本上是沒法用了，參考文中的鏈接，使用淘寶的鏡像比較靠譜；

jekyll有一個(gè)問題，可能需要修改下面這個(gè)文件，否則會(huì)出現(xiàn)GBK錯(cuò)誤D:\Ruby193\lib\ruby\gems\1.9.1\gems\jekyll-1.2.1\lib\jekyll\convertible.rb將它改成self.content = File.read(File.join(base, name),:encoding => "utf-8")D:\Ruby193\lib\ruby\gems\1.9.1\gems\jekyll-1.2.1\lib\jekyll\tags\include.rb中的最后幾行的地方改成File.read_with_options(file,:encoding => "utf-8")

最新的jekyll修改了命令行參數(shù)，需使用如下命令行 jekyll serve --safe --watch

jekyll 1.4.3在windows下本地生成的時(shí)候可能會(huì)出現(xiàn)'fileutils.rb:247:in mkdir Invalid argument'的錯(cuò)誤

jekyll 1.4.3在–watch參數(shù)的情況下可能會(huì)出現(xiàn)'cannot load such file -- wdm (LoadError)'的錯(cuò)誤，用gem安裝wdm就好了： gem install wdm

Ruby安裝

jekyll本身基于Ruby開發(fā)，因此，想要在本地構(gòu)建一個(gè)測(cè)試環(huán)境需要具有Ruby的開發(fā)和運(yùn)行環(huán)境。在windows下，可以使用Rubyinstaller安裝

ruby安裝說明：http://www.ruby-lang.org/zh_cn/downloads/

ruby安裝下載(windows)：http://rubyinstaller.org/downloads/windows的安裝還是一如既往的“無腦”，不多說了。

如果想要快速體驗(yàn)ruby開發(fā)，可以參考：20分鐘體驗(yàn) Ruby

RubyDevKit安裝

從這個(gè)頁面下載DevKit：http://rubyinstaller.org/downloads/

下載下來的是一個(gè)很有意思的sfx文件，如果你安裝有7-zip吧，可以直接雙擊，它會(huì)自解壓到你所選擇的目錄。

解壓完成之后，用cmd進(jìn)入到剛才解壓的目錄下，運(yùn)行下面命令，該命令會(huì)生成config.yml。（這種安裝方式讓我想起了，linux下安裝三步走config->make->make install中的config）

$ruby dk.rb init

config.yml文件實(shí)際上是檢測(cè)系統(tǒng)安裝的ruby的位置并記錄在這個(gè)文件中，以便稍后使用。但上面的命令只針對(duì)使用rubyinstall安裝的ruby有效，如果是其他方式安裝的話，需要手動(dòng)修改config.yml。我生成的config.yml文件內(nèi)容如下：（注意路徑用的是linux的斜杠方向）

# This configuration file contains the absolute path locations of all# installed Rubies to be enhanced to work with the DevKit. This config# file is generated by the 'ruby dk.rb init' step and may be modified# before running the 'ruby dk.rb install' step. To include any installed# Rubies that were not automagically discovered, simply add a line below# the triple hyphens with the absolute path to the Ruby root directory.## Example:## ---# - C:/ruby19trunk# - C:/ruby192dev#---- C:/Ruby193

最后，執(zhí)行如下命令，執(zhí)行安裝：

$ruby setup.rb

如果沒有setup.rb的話，執(zhí)行：

$ruby dk.rb install

Rubygems

Rubygems是類似Radhat的RPM、centOS的Yum、Ubuntu的apt-get的應(yīng)用程序打包部署解決方案。Rubygems本身基于Ruby開發(fā)，在Ruby命令行中執(zhí)行。我們需要它主要是因?yàn)閖ekyll的執(zhí)行需要依賴很多Ruby應(yīng)用程序，如果一個(gè)個(gè)手動(dòng)安裝比較繁瑣。jekyll作為一個(gè)Ruby的應(yīng)用，也實(shí)現(xiàn)了Rubygems打包標(biāo)準(zhǔn)。只要通過簡(jiǎn)單的命令就可以自動(dòng)下載其依賴。

gems下載地址：http://rubyforge.org/frs/?group_id=126

解壓后，用cmd進(jìn)入到解壓后的目錄，執(zhí)行命令即可：

$ruby setup.rb

就像yum倉庫一樣，倉庫本身有很多，如果希望加快應(yīng)用程序的下載速度，特別繞過“天朝”的網(wǎng)絡(luò)管理制度，可以選擇國(guó)內(nèi)的倉庫鏡像，taobao有一個(gè)：http://ruby.taobao.org/。配置方法這個(gè)鏈接里面很完全。

安裝jekyll

有了上面的基礎(chǔ)，安裝jekyll就十分輕松了，在此之前，建議國(guó)內(nèi)用戶換成淘寶服務(wù)器，速度更快：

$ sudo gem sources --remove http://rubygems.org/$ sudo gem sources -a http://ruby.taobao.org/

執(zhí)行下面gem命令即可全自動(dòng)搞定：

$gem install jekyll

jekyll依賴的組件如下：

• directory_watcher
• liquid
• open4
• maruku
• classifier

測(cè)試jekyll服務(wù)

安裝好之后就可以測(cè)試我們的環(huán)境了。用cmd進(jìn)入到上一節(jié)我們創(chuàng)建的目錄，執(zhí)行下面命令：

$jekyll --server --safe

jekyll此時(shí)會(huì)在localhost的4000端口監(jiān)聽http請(qǐng)求，用瀏覽器訪問http://localhost:4000/index.html，之前的頁面出現(xiàn)了！

更新jekyll最新的動(dòng)態(tài)和文檔現(xiàn)在可以在jekyllrb上找到

jekyll介紹

在前幾篇中，多多少少對(duì)jekyll有所涉及，在這篇中將帶讀者進(jìn)一步了解jekyll以及模板引擎liquid。

jekyll是一個(gè)基于ruby開發(fā)的，專用于構(gòu)建靜態(tài)網(wǎng)站的程序。它能夠?qū)⒁恍﹦?dòng)態(tài)的組件：模板、liquid代碼等構(gòu)建成靜態(tài)的頁面集合，Github-Page全面引入jekyll作為其構(gòu)建引擎，這也是學(xué)習(xí)jekyll的主要?jiǎng)恿ΑＭ瑫r(shí)，除了jekyll引擎本身，它還提供一整套功能，比如web server。我們用jekyll –server啟動(dòng)本地調(diào)試就是此項(xiàng)功能。讀者可能已經(jīng)發(fā)現(xiàn)，在啟動(dòng)server后，之前我們的項(xiàng)目目錄下會(huì)多出一個(gè)_site目錄。jekyll默認(rèn)將轉(zhuǎn)化的靜態(tài)頁面保存在_site目錄下，并以某種方式組織。使用jekyll構(gòu)建博客是十分適合的，因?yàn)槠鋬?nèi)建的對(duì)象就是專門為blog而生的，在后面的逐步介紹中讀者會(huì)體會(huì)到這一點(diǎn)。但是需要強(qiáng)調(diào)的是，jekyll并不是博客軟件，跟workpress之類的完全兩碼事，它僅僅是個(gè)一次性的模板解析引擎，它不能像動(dòng)態(tài)服務(wù)端腳本那樣處理請(qǐng)求。

更多關(guān)于jekyll請(qǐng)看這里

jekyll是如何工作的

在jekyll解析你的網(wǎng)站結(jié)構(gòu)前，需要確保網(wǎng)站目錄像下面那樣：

|-- _config.yml |-- _includes |-- _layouts | |-- default.html | |-- post.html |-- _posts | |-- 20011-10-25-open-source-is-good.html | |-- 20011-04-26-hello-world.html |-- _site |-- index.html |-- images|-- css|-- style.css|-- javascripts

• _config.yml：保存配置，該配置將影響jekyll構(gòu)造網(wǎng)站的各種行為。

• _includes：該目錄下的文件可以用來作為公共的內(nèi)容被其他文章引用，就跟C語言include頭文件的機(jī)制完全一樣，jekyll在解析時(shí)會(huì)對(duì){ % include file.ext %}標(biāo)記擴(kuò)展成對(duì)應(yīng)的在_includes文件夾中的文件

• _layouts：該目錄下的文件作為主要的模板文件

• _posts：文章或網(wǎng)頁應(yīng)當(dāng)放在這個(gè)目錄中，但需要注意的是，文章的文件名必須是YYYY-MM-DD-title

• _site：上面提到過，這是jekyll默認(rèn)的轉(zhuǎn)化結(jié)果存放的目錄

• images：這個(gè)目錄沒有強(qiáng)制的要求，主要目的是存放你的資源文件，圖片、樣式表、腳本等。

一個(gè)例子

完成一個(gè)例子總是最快的入門方式。

對(duì)于基于靜態(tài)頁面的網(wǎng)站，你顯然不希望每篇文章都要寫html、head等與文章本身無關(guān)的重復(fù)的東西，那么容易想到的是將這些東西作為模板提取出來，以便復(fù)用，_layouts文件夾中的文件可以作為這樣的模板。現(xiàn)在我們?cè)赺layouts文件夾中創(chuàng)建一個(gè)模板文件，default.html：

default.html

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>My blog</title></head><body></body> <html>

default.html包含了每個(gè)html都需要的一些標(biāo)記，以及一個(gè)個(gè)liquid標(biāo)記。{ { … }}是liquid中用來表示“內(nèi)容”的標(biāo)記，其中的對(duì)象在解析時(shí)會(huì)被替換成文件到頁面中

content：表示在這里的地方用子頁面的內(nèi)容替換。

現(xiàn)在我們來實(shí)現(xiàn)一個(gè)主頁，在根目錄下，創(chuàng)建一個(gè)index.html

index.html

--- layout: default --- <h1>Hello jekyll</h1> <p>This is the index page</p>

除了普通的html標(biāo)記外，開頭這一段稱為YAML格式，以一行“—”開頭，一行“—”結(jié)尾，在虛線的中間以key-value的形式對(duì)一些全局變量進(jìn)行賦值。

layout變量表示該文章應(yīng)當(dāng)使用_layouts/default這個(gè)文件作為父模板，并將index.html中的內(nèi)容替換父模板中的{ { content }}標(biāo)記。

在根目錄中啟動(dòng)jekyll –server，并訪問http://localhost:4000/index.html，你將得到下面頁面

該頁面的Html源碼如下，可以看到，index.html中的內(nèi)容替換了default.html中的{ { content }}

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>My blog</title></head><body><h1>Hello jekyll</h1> <p>This is the index page</p></body> <html>

現(xiàn)在請(qǐng)觀察一下_site中的index.html，就是上面的Html代碼！OK，現(xiàn)在你明白jekyll的工作方式了吧，它僅僅一次性的完成靜態(tài)頁面的轉(zhuǎn)化，其余的事情全都交給普通的web server了！

需要注意的是，如果你失敗了，請(qǐng)確保你的文件都是UTF-8 without BOM的格式。

在windows中，為了甄別UTF-8編碼格式的文本文件，默認(rèn)會(huì)在文件頭插入兩個(gè)字節(jié)的標(biāo)識(shí)，被稱為BOM。事實(shí)證明這是個(gè)“歪門邪道”，jekyll不識(shí)別這種特殊的標(biāo)記，所以可以使用Notepad++或其他的工具將UTF-8編碼文件開頭的BOM去掉。

第一篇文章

現(xiàn)在我們來創(chuàng)建一篇博客文章，并在index.html頁面添加文章的鏈接。

在 _posts目錄下創(chuàng)建2014-06-21-first-post.html

2014-06-21-first-post.html

--- layout: default title: my first post --- <h1>利用github-pages建立個(gè)人博客</h1> <p>This is my first post.Click the link below to go back to index:</p> <a href="/index.html">Go back</a>

修改index.html

index.html

--- layout: default --- <h1>Hello jekyll</h1> <p>This is the index page</p> <p>My post list:</p>

最終效果如下：

這個(gè)是略微復(fù)雜的例子，這里涉及到兩個(gè)主要的對(duì)象

site：全局站點(diǎn)對(duì)象。比如site.posts返回當(dāng)前站點(diǎn)所有在_post目錄下的文章，上面的例子結(jié)合for循環(huán)來羅列所有的文章

page：文章對(duì)象。比如page.url將返回page對(duì)象的url，上面的例子用該對(duì)象和屬性返回了文章的鏈接另外要補(bǔ)充的是site.baseurl，該值就是我們?cè)赺config.yml中配置的baseurl啦！

這些對(duì)象被稱為“模板數(shù)據(jù)API”，更多API文檔請(qǐng)參見這里

liquid

liquid是jekyll底層用于解析的引擎，我們用到的{ { .. }}亦或是{ % … %}標(biāo)記其實(shí)是靠liquid去解析的。本節(jié)將詳細(xì)介紹liquid的使用。

liquid包含兩種標(biāo)記，理解他們的機(jī)理是十分重要的：

{ { .. }}：輸入標(biāo)記，其中的內(nèi)容將被文本輸出{ % … %}：操作標(biāo)記，通常包含控制流代碼例如：

Sorry, you are too young

另外liquid還包含一種叫filter的機(jī)制。這是種對(duì)輸出標(biāo)記的擴(kuò)展，通過它可以對(duì)輸出標(biāo)記中的內(nèi)容進(jìn)行更細(xì)致的處理，例如：

Hello TOBIHello tobi has 4 letters!Hello 2015 Sep

返回字符串大寫的結(jié)果：TOBI返回字符串的長(zhǎng)度：4將當(dāng)前時(shí)間格式化輸出liquid內(nèi)置了一些filter，并且該機(jī)制可以被擴(kuò)展，jekyll便擴(kuò)展了liquid的filter。

更多關(guān)于liquid的使用方法，請(qǐng)參見這里

更多關(guān)于jekyll對(duì)liquid的擴(kuò)展，請(qǐng)參見這里

樣式、分類、標(biāo)簽

在前一篇中我們實(shí)際使用jekyll做了一個(gè)略微“復(fù)雜”的模板。并用它生成了站點(diǎn)。但是這樣的blog顯然太粗糙了，別說不能吸引別人了，自己都看不下去啊。作為自己的“門戶”，當(dāng)然要把美化工作放在第一位啦。

網(wǎng)站的美觀十分重要，這當(dāng)然要依靠CSS咯。因?yàn)橥耆陟o態(tài)頁面，所以沒有現(xiàn)成的動(dòng)態(tài)模板可以使用，我們只能手寫CSS了，這里不介紹CSS了，因?yàn)檫@是設(shè)計(jì)師的范疇了，屌絲程序員搞不來了。我的blog的樣式是從網(wǎng)上找過來改的。

從功能的角度blog除了文章以外，對(duì)文章的分類、標(biāo)簽、歸檔都是主流的功能。

分類和標(biāo)簽功能是jekyll的yaml-format的內(nèi)置功能，在每篇文章上方可以設(shè)置：這里需要注意的是如果多個(gè)分類或者tag的話，用逗號(hào)分隔，并且要緊跟一個(gè)空格。分類可以任意添加，Jekyll在解析網(wǎng)站的時(shí)候會(huì)統(tǒng)計(jì)所有的分類，并放到site.categories中；換句話說，不能脫離文章而設(shè)置分類。

--- layout: default title: Title description: 這里的description是自定義屬性。 categories: [web-build] tags: [github-page, jekyll, liquid] ---

下面是本站羅列分類的代碼，供大家參考

<div id="categories-3" class="left"><h3>Categories</h3><ul><li class="cat-item cat-item-6"><a href="/categories/java.html">java</a></li><li class="cat-item cat-item-6"><a href="/categories/c.html">c</a></li><li class="cat-item cat-item-6"><a href="/categories/programming.html">programming</a></li><li class="cat-item cat-item-6"><a href="/categories/jekyll.html">jekyll</a></li><li class="cat-item cat-item-6"><a href="/categories/other.html">other</a></li><li class="cat-item cat-item-6"><a href="/categories/reprints.html">reprints</a></li><li class="cat-item cat-item-6"><a href="/categories/android.html">android</a></li><li class="cat-item cat-item-6"><a href="/categories/web.html">web</a></li><li class="cat-item cat-item-6"><a href="/categories/book.html">book</a></li><li class="cat-item cat-item-6"><a href="/categories/algorithm.html">algorithm</a></li><li class="cat-item cat-item-6"><a href="/categories/c/c++.html">c/c++</a></li><li class="cat-item cat-item-6"><a href="/categories/gradle.html">gradle</a></li><li class="cat-item cat-item-6"><a href="/categories/lambda.html">lambda</a></li><li class="cat-item cat-item-6"><a href="/categories/latex.html">latex</a></li><li class="cat-item cat-item-6"><a href="/categories/unix/linux.html">unix/linux</a></li></ul></div>

注意到分類的url鏈接，這里的categories目錄以及其中的html不會(huì)自動(dòng)生成，需要手動(dòng)添加的，也就是說每增加一個(gè)分類，都需要在categories下添加一個(gè)該分類的html。當(dāng)然你可以選擇其他目錄，甚至考慮其他解決方案，不過我還沒想到更簡(jiǎn)單的方法。Tag的處理方式類似，這里就省略了。

推薦大家下載jekyll原作者推薦的簡(jiǎn)單例子來學(xué)習(xí)：

$git clone https://github.com/plusjade/jekyll-bootstrap.git

下載的目錄里面是一個(gè)完整的網(wǎng)站，可以使用我們本地的jekyll –server啟動(dòng)。另外，作者的網(wǎng)站：http://jekyllbootstrap.com/

代碼高亮

參考Jekyll官網(wǎng)文檔里Code snippet highlighting一節(jié)。玩顏色魔法的大魔術(shù)師是Pygments。

安裝Python Pygments

Ubtuntu下：sudo apt-get install python-pygments

設(shè)置代碼高亮的樣式

通過下面的命令可以查看當(dāng)前支持的樣式from pygments.styles import STYLE_MAPSTYLE_MAP.keys()輸出： [‘monokai’, ‘manni’, ‘rrt’, ‘perldoc’, ‘borland’, ‘colorful’, ‘default’, ‘murphy’, ‘vs’, ‘trac’, ‘tango’, ‘fruity’, ‘a(chǎn)utumn’, ‘bw’, ‘emacs’, ‘vim’, ‘pastie’, ‘friendly’, ‘native’]

生成指定樣式的css文件

pygmentize -S native -f html > pygments.css

將生成的css文件拷貝到主題的css目錄下，如：

%github pages project folder%\assets\themes\twitter\css\

引入default.html中引入css文件：

// default目錄如%github pages project folder%\includes\themes\twitter\// 引入如下代碼<link href='/css/pygments.css' rel="stylesheet" media="all">

在文章中高亮代碼:

public class HelloWorld { public static void main(String args[]) { System.out.println("Hello World!"); } }

給文章添加目錄

如你所見，我的這個(gè)博客里，稍長(zhǎng)點(diǎn)的文章，都會(huì)生成目錄樹（Table of Content），并且配合有Bootstrap的affix、ScrollSpy 效果。同樣地，在Jekyll構(gòu)建的靜態(tài)博客上，我一樣想生成目錄樹。Jekyll的Plugins頁面中有提到一個(gè)插件 jekyll-toc-generator，但其實(shí)沒有必要使用插件，因?yàn)?Jekyll 的 Markdown 渲染器 kramdown 已經(jīng)具備這個(gè)功能。我們只需要啟用它即可。

啟用 kramdown

打開 _config.yml 文件，確保以下一行存在：markdown: kramdown

生成 TOC

接下來是在文章中標(biāo)識(shí) toc 的生成位置：* 目錄{:toc}# 陳三## 陳三的博客

請(qǐng)注意，* 目錄這一行是必需的，它表示目錄樹列表，至于星號(hào)后面寫什么請(qǐng)隨意

如果要把某標(biāo)題從目錄樹中排除，則在該標(biāo)題的下一行寫上 {:.no_toc}

目錄深度可以通過 config.yml 文件中添加 toc_levels 選項(xiàng)來定制，默認(rèn)為 1..6，表示標(biāo)題一至標(biāo)題六全部渲染

默認(rèn)生成的目錄列表會(huì)添加 id 值 markdown-toc，我們可以自定義 id 值，比如 {:toc #chen}，生成的目錄列表添加的 id 將會(huì)是 chen。

評(píng)論功能

靜態(tài)的網(wǎng)站不可能自己存放評(píng)論，于是只能考慮外掛評(píng)論了，查了一下比較靠譜和廣泛的就是DISQUS了;Disqus是一個(gè)社會(huì)化的評(píng)論解決方案，請(qǐng)?jiān)试S我使用這個(gè)爛透了的詞，調(diào)用它的接口非常簡(jiǎn)單，在自己的頁面加載他的一段JS代碼即可，如果別人注冊(cè)了Disqus，那么就可以方便的留言，交流，一處登錄，處處方便，而且Disqus也提供了一些spam等策略，不用自己操心了，并且可以和一些現(xiàn)有的博客系統(tǒng)很好的轉(zhuǎn)換對(duì)接。越來越多的網(wǎng)站開始使用Disqus的服務(wù)了，這是一個(gè)非常不錯(cuò)的趨勢(shì)，Jekyll配合Disqus實(shí)在是完美了。我別無所求了。

點(diǎn)擊，在下面的頁面中填寫相關(guān)的信息，注意先在右側(cè)注冊(cè)登錄信息，然后再在左側(cè)增加一個(gè)站點(diǎn)：

填寫完成后點(diǎn)擊“Continue”，在接下來的頁面中選擇Universal Code，然后根據(jù)提示完成接下來的操作，后面的操作就十分簡(jiǎn)單了：主要就是把產(chǎn)生的腳本文件復(fù)制到你的站點(diǎn)頁面中即可。

DISQUS還有一個(gè)Dashboard，可以用來管理評(píng)論，這里就不再詳述了。最后的效果就是本blog文章下方的評(píng)論咯，還是挺好看的，國(guó)內(nèi)的還有個(gè)多說的評(píng)論引擎，支持國(guó)內(nèi)的各大網(wǎng)站帳號(hào)。

站內(nèi)搜索

blog當(dāng)然不能缺少站內(nèi)搜索功能。主流的站內(nèi)搜索都是主流的搜索引擎提供的。作為一個(gè)google控，當(dāng)然必須選擇google啊。當(dāng)然你必須擁有一個(gè)google帳號(hào)。

google的站內(nèi)搜索叫：custome search engine：http://www.google.com/cse

創(chuàng)建一個(gè)自定義搜索與添加評(píng)論類似只要三步：

填寫自定義搜索的名字、描述、語言、站點(diǎn)信息，這些信息中唯一需要注意的是站點(diǎn)信息，建議使用mydomain.com作為搜索范圍，因?yàn)檫@樣的話，會(huì)自動(dòng)轉(zhuǎn)化成.mydomain.com/，能包含全站的內(nèi)容

選擇樣式和嘗試搜索。嘗試搜索有時(shí)不能成功，但是不要緊

將生成腳本寫到網(wǎng)頁中

這時(shí)，可能搜索功能仍然無法使用，尤其是你的網(wǎng)站沒有什么名氣，也沒有什么外鏈。因?yàn)間oogle的爬蟲不可能很快的抓到你的網(wǎng)站。但這里有個(gè)技巧可以讓你的網(wǎng)站立刻被google收錄（姑且不論排名），那就是google的Webmaster Tools工具，該工具是免費(fèi)的，而且還集成了站點(diǎn)流量統(tǒng)計(jì)功能，十分強(qiáng)大。

進(jìn)入地址：https://www.google.com/webmasters/tools/home

它會(huì)要你認(rèn)證你對(duì)網(wǎng)站的所有權(quán)，下載一個(gè)HTML文件，把它上傳到你的網(wǎng)站上，設(shè)置完成之后基本上立刻就生效了，無需等待一天。

認(rèn)證成功后，進(jìn)入sitemaps網(wǎng)站,在下面填入你的網(wǎng)站后點(diǎn)擊start，接下來下載sitemap文件，把它上傳到你的域名根目錄，打開Optimization->Sitemaps，點(diǎn)擊Add/TEST SITEMAP，輸入指向你的站點(diǎn)的sitemap地址，本博客的sitemap是：http://coolshell.info/sitemap.xml,過幾分鐘就看到下面的結(jié)果：！[](/images/images/githubpages/sitemap2.jpg)

sitemap是網(wǎng)站所有鏈接的集合，最簡(jiǎn)單的sitemap可以是一個(gè)文本文件，其中只存放你網(wǎng)站的所有可用資源的鏈接，這有利于搜索引擎收錄你的網(wǎng)站內(nèi)容。復(fù)雜的sitemap還可以利用sitemap的專用格式來標(biāo)注資源的形式，更多關(guān)于sitemap可以參考：http://www.sitemaps.org/完成站點(diǎn)認(rèn)證和sitemap測(cè)試后，我們回到自定義搜索的頁面，進(jìn)入到control panel->Indexing，在其中使用sitemap來迫使google索引你的網(wǎng)站。這樣，你的網(wǎng)站就算被google收錄了。

至于我們的站內(nèi)搜索應(yīng)該是可以用的了，試試本站點(diǎn)上方的搜索就知道啦～

站點(diǎn)統(tǒng)計(jì)

這里介紹的站點(diǎn)統(tǒng)計(jì)是google的analytics，analytics的使用十分簡(jiǎn)單，同樣的原理，利用注入腳本來實(shí)現(xiàn)流量統(tǒng)計(jì)的外掛，統(tǒng)計(jì)功能十分強(qiáng)大，誰用誰知道。這里就不再嘮叨了。。

GoDaddy & DNSPod

GoDaddy是一家非常不錯(cuò)的域名注冊(cè)商，良好的用戶體驗(yàn)，飛快的生效速度，給力的優(yōu)惠碼，也支持支付寶，永遠(yuǎn)不用擔(dān)心國(guó)內(nèi)那些流氓廠商的流氓行為，注冊(cè)了域名，就可以放心不會(huì)被別人搶走。在Godaddy注冊(cè)域名是一件很簡(jiǎn)單的事情，按照提示走就完全沒有問題，唯一需要?jiǎng)幽X筋的可能是，你要想一個(gè)既有個(gè)人標(biāo)識(shí)，又沒有被別人注冊(cè)的域名了。

Godaddy一切都很完美，直到遇到了GFW，原因你肯定懂。前段時(shí)間推上風(fēng)傳Godaddy的DNS服務(wù)器被墻，導(dǎo)致域名不能解析，看起來好像自己的站被墻了一樣，這個(gè)確實(shí)是個(gè)鬧心的事情，還好國(guó)內(nèi)有DNS服務(wù)的替代產(chǎn)品，而且做得還非常的不錯(cuò)，也是免費(fèi)的，功能強(qiáng)大，速度快，不用擔(dān)心被和諧，所以隆重推薦DNSPod給大家，可以試用一下，把DNS服務(wù)遷移到DNSPod來，解決后顧之憂，配置比較簡(jiǎn)單，不懂的可以等我后面的博客啦，哈。

GitHub & Jekyll

GitHub是一個(gè)非常優(yōu)秀的產(chǎn)品，爆發(fā)式的增長(zhǎng)，各大優(yōu)質(zhì)開源軟件的蜂涌而至，只能說明人們太需要他了。Social Coding是他的Slogan，產(chǎn)品的設(shè)計(jì)確實(shí)解決了很多代碼交流的難題，讓世界更平，讓交流更暢，關(guān)于Git的學(xué)習(xí)，大家可以移步這里Pro Git中文版，這也是一個(gè)本身就在Github維護(hù)的一個(gè)項(xiàng)目，高質(zhì)量的翻譯了Git入門書，講解詳細(xì)，是學(xué)習(xí)Git的好資料。

GitHub是一個(gè)偉大的產(chǎn)品，GitHub Pages是他偉大的一部分，GitHub Pages基于Jekyll博客引擎，當(dāng)我深入的研究了他之后，我深深的想給Jekyll的作者一個(gè)擁抱，列舉一下Jekyll的優(yōu)點(diǎn)：

• 可以單獨(dú)放在自己的服務(wù)器上，他也是GitHub Pages的基礎(chǔ)，質(zhì)量可靠
• 將博客最重要的功能抽取出來，去除了WordPress的復(fù)雜、煩躁的東西，一切都是清晰可控的
• 可以方便的使用Markdown等其他標(biāo)記語言

• 清晰、簡(jiǎn)潔的文件組織，完美的永久鏈接方案，既漂亮、又可定制
• 博客靜態(tài)化，速度快
  • Jekyll是完美的

  寫到這里，基本的點(diǎn)已經(jīng)介紹完畢，現(xiàn)在介紹下怎么獲取別人的博客模板來建立自己的博客。

  獲取并修改別人的博客

  Jekyll官方建立了一個(gè)頁面，里面有許多的模板可供參考。接下來我們就要奉行“拿來主義”了，將別人的模板為我們所用。

  我自己用了Yukang’s Page，他采用了一個(gè)叫做twitter的Jekyll Bootstrap的模板。下面假設(shè)你已經(jīng)安裝了git，我們把他人的網(wǎng)站代碼clone下來，為了舉例方便，還是選取了Yukang’s Page：

  git clone https://github.com/chenyukang/chenyukang.github.com.git

  然后刪去別人的.git文件夾：

  rm -rf .git

  接著，我們參考jekyll的文件目錄，可以把他人的博客刪去，并且做一些小的調(diào)整。接下來，我們把改頭換面的博客上傳到自己的GitHub帳號(hào)中去。一般情況下，假設(shè)你的帳號(hào)名是USERNAME，你需要建一個(gè)名為USERNAME.github.io的帳號(hào)，分支為master。這樣，在你將本地的網(wǎng)站push上去之后，不到10分鐘，訪問USERNAME.github.io，就可以看到你新鮮出爐的網(wǎng)站了：

  git init git add -A git commit -m "first commit" git remote add origin https://github.com/USERNAME/USERNAME.github.io.git git push -u origin master

  Git博大精深，我還沒有熟練掌握。具體的命令可以參考下面一些參考資料：

  • 入門：git - 簡(jiǎn)易指南

  • 進(jìn)階：Think Like (a) Git

  • 參考圖解：A Visual Git Reference

  如果你想要在push之前就在本地預(yù)覽一下網(wǎng)站，可以使用jekyll serve --watch命令。默認(rèn)設(shè)置下，可以在瀏覽器中訪問localhost:4000預(yù)覽。詳細(xì)情況請(qǐng)點(diǎn)擊這里。

  那么，我們?nèi)绾巫珜懶碌牟┛湍?#xff1f;下面，我們隆重推出Markdown。

  Markdown語法

  根據(jù)維基百科上的介紹

  Markdown 是一種輕量級(jí)標(biāo)記語言，創(chuàng)始人為約翰·格魯伯（John Gruber）和亞倫·斯沃茨（Aaron Swartz）。

  想到Aaron Swartz已經(jīng)故去，不禁一陣傷感。

  Markdown的介紹有許多，個(gè)人推薦：

  • 入門：獻(xiàn)給寫作者的 Markdown 新手指南

  • 另一份入門文檔：Markdown Cheatsheet

  • 進(jìn)階：Markdown 語法說明 (簡(jiǎn)體中文版)

  • kramdown使用心得：Kramdown notes

  備注：如何在Markdown中寫注釋呢？這里提供了最原始的一種解決方法：

  看來在Markdown文件里寫注釋的唯一方法就是用<!– –>了，好吧。

  
  

  from: http://coolshell.info/blog/2015/03/github-pages-blog.html
  

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的利用github-pages建立个人博客的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。