這是基于githubpage使用Jekyll工具搭建的博客效果：曾思勇的博客

博客截圖.jpg

一、Jekyll是什么

Jekyll是一款靜態(tài)網(wǎng)站生成工具，允許用戶使用HTML、Markdown或Textile通過模塊的方式建立所需網(wǎng)站，然后通過模板引擎Liquid（Liquid Templating Engine）來運(yùn)行或者生成對應(yīng)的靜態(tài)網(wǎng)站文件。因?yàn)镚itHub的渲染引擎默認(rèn)為Jekyll，所以Jekyll在GitHub上使用較多，通過GitHub搭建自己的博客一般都是使用Jekyll。

Jekyll是一款靜態(tài)網(wǎng)站生成工具，雨蕁用戶使用HTML、Mardown或Textile通過模塊的方式簡歷所需網(wǎng)站，然后通過模版引擎Liquid來運(yùn)行或者生成對應(yīng)的靜態(tài)

因?yàn)镴ekyll是一款基于Ruby的插件，必須先配置Ruby開發(fā)環(huán)境，需要Pygments代碼高亮引擎，所以需配置Python開發(fā)環(huán)境**

二、安裝Ruby

1. ** 安裝包下載頁面 **

2. 在 “RubyInstallers” 部分，選擇某個(gè)版本點(diǎn)擊下載。
   例如， Ruby 2.2.4-p230-(x64) 是適于64位 Windows 機(jī)器上的安裝包。
   

   Ruby安裝包.png

3. 通過安裝包安裝
   　　最好保持默認(rèn)的路徑 C:\Ruby22-x64， 因?yàn)榘惭b包明確提出 “請不要使用帶有空格的文件夾 (如： Program Files)”。
   　　 勾選 “Add Ruby executables to your PATH”，這樣執(zhí)行程序會被自動(dòng)添加至 PATH 而避免不必要的頭疼。
   

   安裝目錄設(shè)置.png

4. 打開一個(gè)命令提示行并輸入ruby -v檢測 Ruby 是否成功安裝（注意命令行要重新開啟）
   

   檢測Ruby版本.png

5. ** 打開一個(gè)命令提示行并輸入gem -v來檢測 gem 是否存在**
   

   檢測gem版本.png

三、安裝 DevKit

DevKit 是一個(gè)在 Windows 上幫助簡化安裝及使用 Ruby C/C++ 擴(kuò)展如 RDiscount 和 RedCloth 的工具箱。 詳細(xì)的安裝指南可以在程序的wiki 頁面 閱讀。

1. ** 安裝包下載頁面 **

2. 下載同系統(tǒng)及 Ruby 版本相對應(yīng)的 DevKit 安裝包。 例如，DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe 適用于64位 Windows 系統(tǒng)上的 Ruby 2.0.0及以上的版本
   

   選擇DevKit 版本.png

3. 運(yùn)行安裝包并解壓縮至某文件夾，如 C:\DevKit

4. 通過初始化來創(chuàng)建 config.yml 文件。在命令行窗口內(nèi)，輸入下列命令：
   cd “C:\DevKit” ruby dk.rb init
   

   初始化.png

5. 通過記事本打開該目錄下config.yml，于末尾添加如下代碼，保存后退出
   - C:\Ruby22-x64

6. 回到命令行窗口內(nèi)，審查（非必須）并安裝。
   ruby dk.rb review ruby dk.rb install

四、安裝 Jekyll

1.確保 gem 已經(jīng)正確安裝（在2.2.4版本的ruby會自動(dòng)安裝）
2.安裝 Jekyll gem

安裝 Jekyll gem.png

gem install jekyll

• 如果報(bào)錯(cuò)參照解決辦法
  證書驗(yàn)證
• 其他報(bào)錯(cuò)請參考文末的常見錯(cuò)誤及解決方法

3.安裝jekyll-paginate，在命令行里輸入
gem install jekyll-paginate

gem install jekyll-paginate.png

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

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

4.該方法如果不行請先繼續(xù)下面操作

五、安裝 Python

1. python下載地址

2. 下載合適的 Python windows 安裝包，如 Python 2.7.6 Windows Installer。

3. 安裝

4. 添加安裝路徑 (如： C:\Python27) 至 PATH。(不懂可百度添加環(huán)境變量)
   

   添加環(huán)境變量.png

5. 檢驗(yàn) Python 安裝是否成功
   python –V
   

   檢驗(yàn) Python 安裝是否成功.png

6. 安裝 ‘Easy Install’

• 詳細(xì)安裝指南 （需要梯子）
• 對于 Windows 7以上的機(jī)器，百度查找 ez_setup.py 文件后復(fù)制內(nèi)容保存到本地，例如，至C:\。 然后從命令行使用 Python 運(yùn)行此文件：
  python “C:\ez_setup.py”
• 添加 ‘Python Scripts’ 路徑 (如： C:\Python27\Scripts) 至 PATH
  
  添加 ‘Python Scripts’ 路徑到環(huán)境變量.png

七、安裝 Pygments

1. 確保 easy_install 已經(jīng)正確安裝
   easy_install --version
   輸出示例：
   setuptools 3.1
2. 使用 “easy_install” 來安裝 Pygments
   easy_install Pygments
   
   安裝 Pygments

八、啟動(dòng) Jekyll

按照Jekyll中文文檔 的步驟

1. 先進(jìn)入一個(gè)你想要存儲博客的文件夾中
2. jekyll new myblog
3. cd myblog
4. jekyll serve
   
   生成的 myblog文件夾內(nèi)容.png

一個(gè)新的 Jekyll 博客可以被建立并在 localhost:4000 瀏覽。即在瀏覽器地址框輸入 localhost:4000 或者 127.0.0.1:4000

我新建的Jekyll網(wǎng)頁.png

九、套用優(yōu)秀的博客模版

詳細(xì)教程請查看我的另外一篇博文[17年重整版]GithubPages + Jekyll搭建個(gè)人博客

• ** 挑選“模版” **
  Jekyll項(xiàng)目的wiki頁面給出了大量優(yōu)秀的風(fēng)格各異的網(wǎng)站，這里以 Zhijun Kang為例講解。
  點(diǎn)擊Zhijun Kang，會跳出他的博客首頁
  返回github進(jìn)入wiki頁，點(diǎn)擊Zhijun Kang右邊的source鏈接，進(jìn)入到作者的模版?zhèn)}庫。
  
  操作演示.png

在右邊有綠色的克隆代碼到本地按鈕，通過ZIP下載到本地

Paste_Image.png

下載后解壓得到模版的網(wǎng)頁站點(diǎn)文件夾

模版網(wǎng)頁的站點(diǎn)文件夾.png

十、使用jekyll serve命令部署本地服務(wù)

打開命令行進(jìn)入到模板文件夾目錄下，執(zhí)行命令
jekyll serve
如果你配置jekyll環(huán)境不完全，可能會出現(xiàn)許多未知錯(cuò)誤
下圖為正確配置jekyll環(huán)境后會發(fā)生的錯(cuò)誤提示

錯(cuò)誤提示1.png

原因： 沒有安裝 bundler ，所以接下來執(zhí)行安裝 bundler 命令
gem install bundler

Paste_Image.png

如果報(bào)錯(cuò)，嘗試更換源，注意眾多博客中的源都沒有更新
更換源的步驟如下

$ gem sources  //查看當(dāng)前源
$ gem sources --remove http://ruby.taobao.org/
$ gem sources -a http://gems.ruby-china.org/
$ gem sources -l

建議添加源為http://gems.ruby-china.org/.png

命令行顯示當(dāng)前ruby源

*** CURRENT SOURCES ***
http://gems.ruby-china.org/

接下來執(zhí)行
bundle install
安裝過程中出現(xiàn)錯(cuò)誤提示：在安裝redcarpet時(shí)出現(xiàn)錯(cuò)誤

錯(cuò)誤提示2.png

請用一下指令安裝該程序至成功再重新安裝bundle
gem install redcarpet

如下圖顯示redcarpet已經(jīng)安裝成功

redcarpet安裝成功.png

再次運(yùn)行 bundle install 直到提示成功（未知錯(cuò)誤請參考文末解決方法）

再次運(yùn)行 bundle install .png

執(zhí)行jekyll server

錯(cuò)誤提示3.png

錯(cuò)誤信息中有提示：嘗試在你要輸入的命令前添加 bundle exec

在jekyll server 命令前添加 bundle exec

如上圖所示，在本地啟動(dòng)jekyll sever成功，現(xiàn)在即可在瀏覽器通過
http://localhost:4000 或者 http://127.0.0.1:4000/ ，訪問拷貝的博客模版。

本地啟動(dòng)模版網(wǎng)頁.png

十一、將模版修改為自己的內(nèi)容

• 修改博客名，博客簡介等個(gè)人信息內(nèi)容 ：
  　　使用編輯器打開本地倉庫中的 _config.yml 文件，按照里面的注釋修改為自己的內(nèi)容。

• 修改博客文章內(nèi)容
  　　打開本地倉庫的 _posts 文件夾。默認(rèn)博文都將放在這里，寫新博文只需要新建一個(gè)標(biāo)準(zhǔn)文件名的文件，在文件中編寫文章內(nèi)容。 比如_posts 文件夾里有一篇 2016-03-23-hello-world.markdown，你的文件命名也要嚴(yán)格遵循 年-月-日-文章標(biāo)題.文檔格式 這樣的格式，尤其要注意月份和日期一定是兩位數(shù)，盡量不要出現(xiàn)中文。推薦使用Markdown語言寫文章，windows下推薦MarkdownPad這個(gè)軟件編寫Markdown文本，web中使用簡書。

• 提交修改
  　　修改好內(nèi)容后按照更新倉庫版本的方法重新提交本地倉庫中的內(nèi)容到github的遠(yuǎn)程倉庫，關(guān)閉瀏覽器再次刷新 http://localhost:4000 或者 http://127.0.0.1:4000/ 就可以生效修改了 。

十二、博客部署到遠(yuǎn)端

詳細(xì)教程請查看我的另外一篇博文[17年重整版]GithubPages + Jekyll搭建個(gè)人博客　　
　　這里講的是部署到 Github Page， 創(chuàng)建一個(gè) github 賬號，然后創(chuàng)建一個(gè)跟你賬戶名一樣的倉庫，如我的 github 賬戶名叫 zengsiyong，我的 github 倉庫名就叫 zengsiyong.github.io，創(chuàng)建好了之后，把剛才建立的 myBlog 項(xiàng)目 push 到 username.github.io倉庫里去（username指的是你的github用戶名），檢查你遠(yuǎn)端倉庫已經(jīng)跟你本地 myBlog 同步了，然后你在瀏覽器里輸入 username.github.io ，就可以訪問你的博客了。

十三、總結(jié)

所以通過配置jekyll環(huán)境，我們就可以通過在站點(diǎn)文件夾中運(yùn)行 jekyll server命令并通過 http://localhost:4000 查看我們對網(wǎng)頁做出的修改，修改滿意后再push到 github 遠(yuǎn)程倉庫，在外網(wǎng)通過 github page username.github.io訪問自己的博客。

錯(cuò)誤匯總：

1.使用ruby2.0.0等較舊的版本時(shí)，可能會出現(xiàn)如下錯(cuò)誤，解決方法是進(jìn)入ruby安裝文件夾，點(diǎn)擊卸載，重新下載例如本博客使用的ruby2.2.4版本安裝。

ruby舊版本導(dǎo)致的錯(cuò)誤.png

2.如果jekyll serve命令執(zhí)行出現(xiàn)如下錯(cuò)誤，就必須重新執(zhí)行
install bundle和gem bundle install兩條命令直至成功

bundle安裝失敗的錯(cuò)誤.png

3.出現(xiàn)如下錯(cuò)誤時(shí)，應(yīng)按照正文中的方式步驟重新做一遍

未知錯(cuò)誤請重新配置環(huán)境.png

參考文檔

[1]windows安裝jekyll
[2]Jekyll中文文檔
[3]使用Github Pages建獨(dú)立博客
[4]亢志軍博客
[5]獨(dú)立博客一小時(shí)快速搭建