只要一小時？！

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

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

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

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

---

目錄

Why Github Pages + Jekyll

注冊Github

關于域名

安裝Git環境

建立個人GitHub Pages

寫博客

進階：安裝Jekyll本地編譯環境

進階：添加評論、分享功能

擴展閱讀

Why Github Pages + Jekyll

Git & Github

Git是一種分布式版本控制系統，由大名鼎鼎的Linux操作系統創建人Linus Torvalds編寫，當時的目的是用來管理Linux內核的源碼。?

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

GitHub Pages

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

What does the geek say?!

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

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

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

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

Jekyll

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

將純文本轉化為靜態網站和博客。?
簡單 – 無需數據庫、評論功能，不需要不斷的更新版本——只用關心你的博客內容。?
靜態 – 只用 Markdown (或Textile)、Liquid、HTML & CSS 就可以構建可部署的靜態網站。

我們遵循Jekyll規范編寫網站源碼，上傳到Github上，Github會自動進行編譯出最終的網站文件，給你一個新世界！

Tip: 如果本地安裝Jekyll編譯環境，便可實時預覽網站，不必每修改一點都要經過上傳刷新才能看到結果，大大方便了我們的調試。

Github Pages + Jekyll 方案適合我嗎？

Github Pages + Jekyll 方案的優點：

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

Github Pages + Jekyll 方案的不足：

需要學習一些基礎的Git命令。?
若要自己全權制作主題的話需要懂一點網頁開發。?
由于生成的是靜態網頁，若要使用動態功能，如評論功能（下文解決），則要使用第三方服務。

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

注冊Github

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

Tip: 有時網絡狀況不好可以喝杯牛奶再來。

關于域名

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

1.已有域名。

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

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

• 1

購買域名

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

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

進入GoDaddy中文網站?（當然英文也可以），在搜索框輸入一個霸氣的名字，點擊“域名搜索”。?

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

出現GoDaddy的增值服務，我們不需要的話，直接點擊右上角的“進入購物車”。?

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

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

設置DNS

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

此時已經可以看到我們購買的域名了。

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

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

在“域名服務器” 處點擊“管理”。?

按照下圖設置好DNSPod的域名服務器。?

設置好后進入?DNSPod?
注冊帳號后登錄，進入“域名解析”，點擊“添加域名”。?

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

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

安裝Git環境

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

安裝git for windows

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

在打開的命令行窗口（Shell）內執行以下命令，設置你的git用戶名和郵箱：

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

• 1
• 2

SSH配置

為了和Github的遠程倉庫進行傳輸，需要進行SSH加密設置。

在剛才打開的Shell內執行：

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

• 1

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

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

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

建立個人 GitHub Pages

建立基于Jekyll的個人Github Pages有兩條路線：?
1.自己學習Jekyll教程和網頁設計，設計絕對自我基因的網頁。?
2.Fork（Git系統的創建分支，簡單來說是把當前倉庫復制一份到你的倉庫，你可以進行修改，因為你的倉庫是原來倉庫的新的分支）已有的開源博客倉庫，在巨人的肩膀上進行符合自我的創作。

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

挑選“模版”

Jekyll項目的wiki頁面給出了大量優秀的風格各異的網站，這里以 Panxw’s blog 為例講解。

進入wiki頁，點擊Panxw’s blog右邊的source鏈接，進入到作者的模版倉庫。?

點擊右上角的“Fork”。?

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

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

此時你會發現已經可以通過?http://{你的Github用戶名}.github.io?訪問你fork下來的網站啦！

綁定域名

接下來讓你能用之前購買的域名來訪問你的網站。

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

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

寫博客

同步倉庫

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

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

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

• 1

clone（克隆）你自己的遠程倉庫：

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

• 1

結果如下：?

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

撰寫博文

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

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

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

簡單Git命令

這里只介紹快速修改上傳博客的方法，詳細的Git學習可以參考文末給出的擴展閱讀。

當你使用Git Bash對你的本地倉庫進行操作時，先用?cd?命令將你的工作目錄設置到你要操作的本地倉庫

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

• 1

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

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

• 1
• 2
• 3

到此你已經可以發表文章到你的個人博客啦！！如有更多需求，可以繼續看下面的進階部分。

進階：安裝Jekyll本地編譯環境

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

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

環境安裝

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

1.安裝?Ruby?

注意：這里一定要勾選添加到環境變量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

如遇到以下錯誤，說明網絡不通：

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源，點進去會有詳細的設置方法。（感謝 @mortred 博友告知淘寶源已不可用，建議使用Ruby China的源，上不去的話換個時間就好。）

開啟本地實時預覽

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

$ 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

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

輸入命令

$ tasklist /svc /FI "PID eq 6668"

• 1

該進程的名稱就會顯示出來:?

打開windows的任務管理器，結束它：?

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

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

編寫符合Jekyll規范的網站

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

進階：添加評論、分享功能

常見的第三方評論系統有：?Disqus，多說。

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

擴展閱讀：

[1]Github Pages?
[2]Git教程 - 廖雪峰?
[3]Jekyll中文文檔?
[4]認識與入門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?

歡迎分享，轉載請注明出處。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。