只要一小時？！

人生道路上布滿了坑，于是有了人生導(dǎo)師。?
美麗的地球上布滿了坑，于是有了Google Earth。?
使用Github Pages搭建獨立博客的過程中布滿了坑，所以有了這篇指南。

我在自己查找資料搭建的過程中發(fā)現(xiàn)了許多大大小小的坑，大部分是因為軟件版本、技術(shù)的升級、網(wǎng)絡(luò)環(huán)境的影響、設(shè)計方案的變化、操作順序的不當(dāng)而引起，于是想整理一篇快速而準(zhǔn)確的攻略以供各種同我一樣的小白也能輕松獲取知識，搭建自己知識分享的平臺。

這篇文章能幫助你一小時快速上線（當(dāng)然要在網(wǎng)絡(luò)環(huán)境良好的情況下，有時候網(wǎng)絡(luò)環(huán)境不好可能需要自備梯子），如果不想自己折騰，直接fork模版，就可以寫文章了，如果想把自己的博客打理得更符合自己的口味兒，大家還需要多多學(xué)習(xí)和實踐。

此篇攻略盡力做到清晰明了，但也必有不足之處，遇到問題歡迎大家多多留言交流提問(′?ω?)ﾉ。

---

目錄

Why Github Pages + Jekyll

注冊Github

關(guān)于域名

安裝Git環(huán)境

建立個人GitHub Pages

寫博客

進(jìn)階：安裝Jekyll本地編譯環(huán)境

進(jìn)階：添加評論、分享功能

擴(kuò)展閱讀

Why Github Pages + Jekyll

Git & Github

Git是一種分布式版本控制系統(tǒng)，由大名鼎鼎的Linux操作系統(tǒng)創(chuàng)建人Linus Torvalds編寫，當(dāng)時的目的是用來管理Linux內(nèi)核的源碼。?

Github是全球知名的使用Git系統(tǒng)的一個免費遠(yuǎn)程倉庫（Repository），倡導(dǎo)開源理念，若要將自己的代碼倉庫私有則需付費。

GitHub Pages

托管在Github上的項目頁面看上去往往是這樣：?

What does the geek say?!

對于非專業(yè)人士看到這樣的頁面有80%只能默默點叉了。

于是GitHub Pages誕生了。它是Github提供給托管項目的開發(fā)者一個更個性化展示自己項目的方法，使用GitHub Pages服務(wù)可以編寫同樣是托管在Github上的靜態(tài)網(wǎng)頁。

比如上面Jekyll項目的GitHub Pages長成這樣：?

Github Pages分為用戶、組織、項目三種網(wǎng)站，我們的Blog要用到的是?User Pages site?，即用戶網(wǎng)站。

Jekyll

下面是來自?Jekyll中文文檔站?的介紹：

將純文本轉(zhuǎn)化為靜態(tài)網(wǎng)站和博客。?
簡單 – 無需數(shù)據(jù)庫、評論功能，不需要不斷的更新版本——只用關(guān)心你的博客內(nèi)容。?
靜態(tài) – 只用 Markdown (或Textile)、Liquid、HTML & CSS 就可以構(gòu)建可部署的靜態(tài)網(wǎng)站。

我們遵循Jekyll規(guī)范編寫網(wǎng)站源碼，上傳到Github上，Github會自動進(jìn)行編譯出最終的網(wǎng)站文件，給你一個新世界！

Tip: 如果本地安裝Jekyll編譯環(huán)境，便可實時預(yù)覽網(wǎng)站，不必每修改一點都要經(jīng)過上傳刷新才能看到結(jié)果，大大方便了我們的調(diào)試。

Github Pages + Jekyll 方案適合我嗎？

Github Pages + Jekyll 方案的優(yōu)點：

Github免費托管源文件，自動編譯符合Jekyll規(guī)范的網(wǎng)站。?
引入版本管理，修改網(wǎng)站更加安全方便。?
支持?Markdown?，編寫具有優(yōu)美排版的文章。

Github Pages + Jekyll 方案的不足：

需要學(xué)習(xí)一些基礎(chǔ)的Git命令。?
若要自己全權(quán)制作主題的話需要懂一點網(wǎng)頁開發(fā)。?
由于生成的是靜態(tài)網(wǎng)頁，若要使用動態(tài)功能，如評論功能（下文解決），則要使用第三方服務(wù)。

所以，如果你只是想做一個分享見聞心得的博客，這個方案非常適合你。

注冊Github

到?Github的官方網(wǎng)站?注冊賬戶，記住自己的用戶名，后面會常用到。

Tip: 有時網(wǎng)絡(luò)狀況不好可以喝杯牛奶再來。

關(guān)于域名

符合下面條件，可以跳過此部分：

1.已有域名。

2.不想使用獨立域名，直接使用Github Pages提供的域名訪問：

http://{username}.github.io //用你的Github用戶名替換網(wǎng)址中的{username}`

• 1

購買域名

之所以把購買域名放在前面，是因為購買和DNS配置過后可能會有服務(wù)延遲，為了讓大家盡快看到自己的成果，可以先買域名。

大家可以自由選擇域名注冊商，這里介紹GoDaddy上的購買流程。

進(jìn)入GoDaddy中文網(wǎng)站?（當(dāng)然英文也可以），在搜索框輸入一個霸氣的名字，點擊“域名搜索”。?

如果幸運的話，還沒有人注冊過這個域名。?
我們只需購買一個?.com?域名即可，點擊第一個“選擇”，再點擊“進(jìn)入購物車”。?

出現(xiàn)GoDaddy的增值服務(wù)，我們不需要的話，直接點擊右上角的“進(jìn)入購物車”。?

到了購買頁面，可以自由選擇購買期限，默認(rèn)兩年，不同時間優(yōu)惠不同。?
注意這里右側(cè)有個地方可以添加“促銷碼”，大家可以用搜索引擎找找，有很多可用的優(yōu)惠，不同的促銷碼可能會對支付方式和年份等有所限制（無限制時可以使用支付寶、信用卡、銀聯(lián)銀行卡等）。?

認(rèn)真核對好購買項目和金額后，點擊“去付款”，進(jìn)行信息注冊和結(jié)算。?
注意！郵箱名字很重要，后期激活和修改密碼都必須通過郵箱，請確保無誤，可不要讓銀子白白流走啊。?
購買完成后去剛才填寫的郵箱收信激活。

設(shè)置DNS

重新登錄你剛注冊的帳號，點擊右上角用戶中心里的“我的產(chǎn)品”。?

此時已經(jīng)可以看到我們購買的域名了。

為了防止不可控因素導(dǎo)致GoDaddy的域名服務(wù)器無法訪問，我們可以把域名解析的任務(wù)轉(zhuǎn)給國內(nèi)穩(wěn)定的域名服務(wù)商。?
這里推薦使用?DNSPod?的服務(wù)，穩(wěn)定且免費。

在“我的產(chǎn)品”界面找到剛才注冊的域名，點擊“管理DNS”。?

在“域名服務(wù)器” 處點擊“管理”。?

按照下圖設(shè)置好DNSPod的域名服務(wù)器。?

設(shè)置好后進(jìn)入?DNSPod?
注冊帳號后登錄，進(jìn)入“域名解析”，點擊“添加域名”。?

添加好之前購買的域名，點擊你的域名進(jìn)入記錄管理。按照下圖添加每條記錄。?

前兩條A型記錄值?192.30.252.153?和?192.30.252.154?是GitHub的服務(wù)器地址，可以在這里查到。?
NS類型記錄是默認(rèn)不可變的。?
CNAME類型的記錄值填寫?{username}.github.io?
Tip: 用你的Github用戶名替換上面的?{username}

安裝Git環(huán)境

本文主要介紹windows環(huán)境下的安裝，其他環(huán)境可參考廖大神的教程。

安裝git for windows

進(jìn)入下載頁面?
安裝好以后在開始菜單中找到Git Bash并打開。?

在打開的命令行窗口（Shell）內(nèi)執(zhí)行以下命令，設(shè)置你的git用戶名和郵箱：

$ git config --global user.name "{username}" // 用你的用戶名替換{username} $ git config --global user.email "{name@site.com}" // 用你的郵箱替換{name@site.com}

• 1
• 2

SSH配置

為了和Github的遠(yuǎn)程倉庫進(jìn)行傳輸，需要進(jìn)行SSH加密設(shè)置。

在剛才打開的Shell內(nèi)執(zhí)行：

$ ssh-keygen -t rsa -C"{name@site.com}" // 用你的郵箱替換{name@site.com}

• 1

可以不輸入其他信息，一直敲回車直到命令完成。?
這時你的用戶目錄（win7以上系統(tǒng)默認(rèn)在?C:\Users\你的計算機(jī)用戶名）內(nèi)會出現(xiàn)名為?.ssh?的文件夾，點進(jìn)去能看到?id_rsa?和?id_rsa.pub?兩個文件，其中?id_rsa?是私鑰，不能讓怪人拿走，?id_rsa.pub?是公鑰，無需保密（原理請自行參看密碼學(xué)………………………………………我相信你也不會看）。

接下來用你的瀏覽器登錄Github，點擊右上角的“Settings”：?

用文字處理軟件打開剛才的?id_rsa.pub?文件，復(fù)制全部內(nèi)容。?
點擊“SSH Keys”，“Add SSH Key”，將復(fù)制的內(nèi)容粘貼在Key中，點“Add Key”確定。?
?
至此SSH配置完畢。

建立個人 GitHub Pages

建立基于Jekyll的個人Github Pages有兩條路線：?
1.自己學(xué)習(xí)Jekyll教程和網(wǎng)頁設(shè)計，設(shè)計絕對自我基因的網(wǎng)頁。?
2.Fork（Git系統(tǒng)的創(chuàng)建分支，簡單來說是把當(dāng)前倉庫復(fù)制一份到你的倉庫，你可以進(jìn)行修改，因為你的倉庫是原來倉庫的新的分支）已有的開源博客倉庫，在巨人的肩膀上進(jìn)行符合自我的創(chuàng)作。

建議和我一樣的小白們可以從第二條路線學(xué)起。

挑選“模版”

Jekyll項目的wiki頁面給出了大量優(yōu)秀的風(fēng)格各異的網(wǎng)站，這里以 Panxw’s blog 為例講解。

進(jìn)入wiki頁，點擊Panxw’s blog右邊的source鏈接，進(jìn)入到作者的模版?zhèn)}庫。?

點擊右上角的“Fork”。?

然后在你的主頁里找到你剛才Fork的分支，點進(jìn)去：?

點擊“Settings”，將“Repository name”改為?{你的Github用戶名}.github.io，點擊“Rename”。?

此時你會發(fā)現(xiàn)已經(jīng)可以通過?http://{你的Github用戶名}.github.io?訪問你fork下來的網(wǎng)站啦！

綁定域名

接下來讓你能用之前購買的域名來訪問你的網(wǎng)站。

在你的代碼倉庫中找到?CNAME?文件，點擊它：?

點擊右方的鉛筆圖標(biāo)，把文件內(nèi)容改成你購買的域名，比如?www.awesome.com，這樣你就可以用自己的域名訪問你的Github Pages啦！?

寫博客

同步倉庫

我們不可能一切編寫都像剛才更改CNAME那樣在網(wǎng)頁上直接進(jìn)行，那樣會十分受限及效率低下，我們需要把托管在Github上的倉庫同步到本地計算機(jī)來。

再次打開Git Bash，輸入以下命令切換到你想放置本地代碼倉庫的位置：

$ cd {本地路徑} // 比如：cd e:/workspace

• 1

clone（克隆）你自己的遠(yuǎn)程倉庫：

$ git clone https://github.com/{username}/{username}.github.io.git // 用你的Github用戶名替換{username}

• 1

結(jié)果如下：?

這時所有遠(yuǎn)程倉庫里的源碼都拷貝到?e:/workspace/{username}.github.io?這個文件夾里來了。?
Tip: 如果clone失敗有可能是網(wǎng)絡(luò)原因，可以過一個時段再試，或者尋找梯子。

撰寫博文

打開本地倉庫的?_posts?文件夾，你的所有博文都將放在這里，寫新博文只需要新建一個標(biāo)準(zhǔn)文件名的文件，在文件中編寫文章內(nèi)容。?
比如我們fork的模版中?_posts?文件夾里有一篇?2016-03-23-hello-world.markdown，你的文件命名也要嚴(yán)格遵循年-月-日-文章標(biāo)題.文檔格式?這樣的格式，尤其要注意月份和日期一定是兩位數(shù)。

推薦使用Markdown語言寫文章，windows下推薦MarkdownPad這個軟件編寫Markdown文本。

最開始寫可以直接模仿別人的博文語法，更多Markdown語法可參考?認(rèn)識與入門Markdown。

簡單Git命令

這里只介紹快速修改上傳博客的方法，詳細(xì)的Git學(xué)習(xí)可以參考文末給出的擴(kuò)展閱讀。

當(dāng)你使用Git Bash對你的本地倉庫進(jìn)行操作時，先用?cd?命令將你的工作目錄設(shè)置到你要操作的本地倉庫

$ cd {你剛才clone下來的項目文件夾路徑}

• 1

每當(dāng)你對本地倉庫里的文件進(jìn)行了修改，只需在Bash中依次執(zhí)行以下三個命令即可將修改同步到Github，刷新網(wǎng)站頁面就能看到修改后的網(wǎng)頁：

$ git add . $ git commit -m "statement" //此處statement填寫此次提交修改的內(nèi)容，作為日后查閱 $ git push origin master

• 1
• 2
• 3

到此你已經(jīng)可以發(fā)表文章到你的個人博客啦！！如有更多需求，可以繼續(xù)看下面的進(jìn)階部分。

進(jìn)階：安裝Jekyll本地編譯環(huán)境

每次修改了本地文件，都要至少經(jīng)過三個命令和服務(wù)器延遲刷新才能看到修改的效果，是不是有點疼？

如果你覺得“疼！” 那么這部分就是你的解藥。

環(huán)境安裝

本文主要介紹windows環(huán)境下的安裝，Mac和Linux環(huán)境下可以使用自帶的包管理器進(jìn)行安裝，可參考這篇文章。

1.安裝?Ruby?

注意：這里一定要勾選添加到環(huán)境變量PATH！?

2.安裝?RubyGems

windows下下載ZIP格式較為方便，下好后解壓到本地任意路徑，下面以?{unzip-path}?代替你解壓的路徑。?
打開windows的cmd終端（按win+R快捷鍵打開“運行”，輸入cmd，確定），輸入命令:

$ cd {unzip-path} //如果你沒有解壓在C盤，windows的終端切換到其他盤需要寫為 cd /d {unzip-path} $ ruby setup.rb

• 1
• 2

3.安裝Jekyll

在終端里輸入

$ gem install jekyll

• 1

4.安裝jekyll-paginate

在終端里輸入

$ gem install jekyll-paginate

• 1

如遇到以下錯誤，說明網(wǎng)絡(luò)不通：

ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError) Errno::ECONNRESET: An existing connection was forcibly closed by the remote host.

• 1
• 2

這時候有三種解決方法：?
1. 等天氣好的時候再來?
2. 架梯子?
3. [推薦] 更換為Ruby China源，點進(jìn)去會有詳細(xì)的設(shè)置方法。（感謝 @mortred 博友告知淘寶源已不可用，建議使用Ruby China的源，上不去的話換個時間就好。）

開啟本地實時預(yù)覽

上一小節(jié)的安裝都完成以后，在終端中輸入命令

$ cd {local repository} // {local repository}替換成你的本地倉庫的目錄 $ jekyll serve

• 1
• 2

1.如遇到以下錯誤，在倉庫文件?_config.yml?中加入一句?gems: [jekyll-paginate]?即可。

Deprecation: You appear to have pagination turned on, but you haven't included the `jekyll-paginate` gem. Ensure you have `gems: [jekyll-paginate]` in your configuration file.

• 1

2.如遇到以下錯誤

jekyll 3.1.2 | Error: Permission denied - bind(2) for 127.0.0.1:4000

• 1

說明有程序在占用這個本地端口，這時候輸入命令

$ netstat -ano

• 1

可以看到如下進(jìn)程與所占用端口的對應(yīng)情況，找到本地地址為?127.0.0.1:4000?的記錄，看到該條記錄的PID為6668 (當(dāng)然你的和我的不一樣)。?

輸入命令

$ tasklist /svc /FI "PID eq 6668"

• 1

該進(jìn)程的名稱就會顯示出來:?

打開windows的任務(wù)管理器，結(jié)束它：?

再次運行?jekyll serve?就可以了。

如果一切順利，通過在瀏覽器地址欄輸入?http://localhost:4000/?回車就已經(jīng)可以看到自己網(wǎng)站的模樣啦。?
只要?jekyll serve?服務(wù)開著，你的本地倉庫文件有任何更新，本地網(wǎng)站刷新都能馬上看到，歐耶！

編寫符合Jekyll規(guī)范的網(wǎng)站

如要自己修改fork下來的主題，可以參考以下資料：?
使用Github Pages建獨立博客?
搭建一個免費的，無限流量的Blog—-github Pages和Jekyll入門?
Jekyll中文文檔

進(jìn)階：添加評論、分享功能

常見的第三方評論系統(tǒng)有：?Disqus，多說。

簡單來說是在html文件中嵌入Javascript代碼，注冊網(wǎng)站后都有較好的指導(dǎo)，并不困難。

擴(kuò)展閱讀：

[1]Github Pages?
[2]Git教程 - 廖雪峰?
[3]Jekyll中文文檔?
[4]認(rèn)識與入門Markdown?
[5]Ruby和Gem?
[6]使用Github Pages建獨立博客?
[7]搭建一個免費的，無限流量的Blog—-github Pages和Jekyll入門

作者：suburbiax79

鏈接：http://playingfingers.com/2016/03/26/build-a-blog/

來源：作者博客 http://playingfingers.com?

歡迎分享，轉(zhuǎn)載請注明出處。

總結(jié)

以上是生活随笔為你收集整理的Github Pages + Jekyll 独立博客一小时快速搭建上线指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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