這是基于githubpage使用Jekyll工具搭建的博客效果：曾思勇的博客
一、Jekyll是什么
Jekyll是一款靜態(tài)網(wǎng)站生成工具，允許用戶使用HTML、Markdown或Textile通過(guò)模塊的方式建立所需網(wǎng)站业汰，然后通過(guò)模板引擎Liquid（Liquid Templating Engine）來(lái)運(yùn)行或者生成對(duì)應(yīng)的靜態(tài)網(wǎng)站文件。因?yàn)镚itHub的渲染引擎默認(rèn)為Jekyll菩颖，所以Jekyll在GitHub上使用較多样漆，通過(guò)GitHub搭建自己的博客一般都是使用Jekyll。
Jekyll是一款靜態(tài)網(wǎng)站生成工具位他，雨蕁用戶使用HTML氛濒、Mardown或Textile通過(guò)模塊的方式簡(jiǎn)歷所需網(wǎng)站，然后通過(guò)模版引擎Liquid來(lái)運(yùn)行或者生成對(duì)應(yīng)的靜態(tài)
因?yàn)镴ekyll是一款基于Ruby的插件鹅髓，必須先配置Ruby開(kāi)發(fā)環(huán)境舞竿，需要Pygments代碼高亮引擎，所以需配置Python開(kāi)發(fā)環(huán)境**
二窿冯、安裝Ruby
** 安裝包下載頁(yè)面 **
-
在 “RubyInstallers” 部分骗奖，選擇某個(gè)版本點(diǎn)擊下載。
例如， Ruby 2.2.4-p230-(x64) 是適于64位 Windows 機(jī)器上的安裝包执桌。
Ruby安裝包.png -
通過(guò)安裝包安裝
最好保持默認(rèn)的路徑 C:\Ruby22-x64鄙皇， 因?yàn)榘惭b包明確提出 “請(qǐng)不要使用帶有空格的文件夾 (如： Program Files)”。
勾選 “Add Ruby executables to your PATH”仰挣，這樣執(zhí)行程序會(huì)被自動(dòng)添加至 PATH 而避免不必要的頭疼伴逸。
安裝目錄設(shè)置.png -
打開(kāi)一個(gè)命令提示行并輸入
ruby -v檢測(cè) Ruby 是否成功安裝（注意命令行要重新開(kāi)啟）
檢測(cè)Ruby版本.png -
** 打開(kāi)一個(gè)命令提示行并輸入
gem -v來(lái)檢測(cè) gem 是否存在**
檢測(cè)gem版本.png
三、安裝 DevKit
DevKit 是一個(gè)在 Windows 上幫助簡(jiǎn)化安裝及使用 Ruby C/C++ 擴(kuò)展如 RDiscount 和 RedCloth 的工具箱膘壶。 詳細(xì)的安裝指南可以在程序的wiki 頁(yè)面 閱讀错蝴。
** 安裝包下載頁(yè)面 **
-
下載同系統(tǒng)及 Ruby 版本相對(duì)應(yīng)的 DevKit 安裝包。 例如颓芭，DevKit-mingw64-64-4.7.2-20130224-1432-sfx.exe 適用于64位 Windows 系統(tǒng)上的 Ruby 2.0.0及以上的版本
選擇DevKit 版本.png 運(yùn)行安裝包并解壓縮至某文件夾顷锰，如 C:\DevKit
-
通過(guò)初始化來(lái)創(chuàng)建 config.yml 文件。在命令行窗口內(nèi)亡问，輸入下列命令：
cd “C:\DevKit” ruby dk.rb init
初始化.png 通過(guò)記事本打開(kāi)該目錄下config.yml官紫，于末尾添加如下代碼，保存后退出
- C:\Ruby22-x64回到命令行窗口內(nèi)州藕，審查（非必須）并安裝束世。
ruby dk.rb review ruby dk.rb install
四、安裝 Jekyll
1.確保 gem 已經(jīng)正確安裝（在2.2.4版本的ruby會(huì)自動(dòng)安裝）
2.安裝 Jekyll gem
gem install jekyll
- 如果報(bào)錯(cuò)參照解決辦法
證書驗(yàn)證 - 其他報(bào)錯(cuò)請(qǐng)參考文末的常見(jiàn)錯(cuò)誤及解決方法
3.安裝jekyll-paginate慎框，在命令行里輸入
gem install jekyll-paginate
如遇到以下錯(cuò)誤良狈，說(shuō)明網(wǎng)絡(luò)不通：
ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)
Errno::ECONNRESET: An existing connection was forcibly closed by the remote host.
4.該方法如果不行請(qǐng)先繼續(xù)下面操作
五、安裝 Python
下載合適的 Python windows 安裝包笨枯，如 Python 2.7.6 Windows Installer薪丁。
安裝
-
添加安裝路徑 (如： C:\Python27) 至 PATH。(不懂可百度添加環(huán)境變量)
添加環(huán)境變量.png -
檢驗(yàn) Python 安裝是否成功
python –V
檢驗(yàn) Python 安裝是否成功.png 安裝 ‘Easy Install’
- 詳細(xì)安裝指南 （需要梯子）
- 對(duì)于 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
- 確保 easy_install 已經(jīng)正確安裝
easy_install --version
輸出示例：
setuptools 3.1 - 使用 “easy_install” 來(lái)安裝 Pygments
easy_install Pygments
安裝 Pygments
八、啟動(dòng) Jekyll
按照Jekyll中文文檔 的步驟
- 先進(jìn)入一個(gè)你想要存儲(chǔ)博客的文件夾中
jekyll new myblogcd myblog-
jekyll serve
生成的 myblog文件夾內(nèi)容.png
一個(gè)新的 Jekyll 博客可以被建立并在 localhost:4000 瀏覽压彭。即在瀏覽器地址框輸入 localhost:4000 或者 127.0.0.1:4000
九睦优、套用優(yōu)秀的博客模版
詳細(xì)教程請(qǐng)查看我的另外一篇博文[17年重整版]GithubPages + Jekyll搭建個(gè)人博客
- ** 挑選“模版” **
Jekyll項(xiàng)目的wiki頁(yè)面給出了大量?jī)?yōu)秀的風(fēng)格各異的網(wǎng)站，這里以 Zhijun Kang為例講解壮不。
點(diǎn)擊Zhijun Kang汗盘，會(huì)跳出他的博客首頁(yè)
返回github進(jìn)入wiki頁(yè)，點(diǎn)擊Zhijun Kang右邊的source鏈接询一，進(jìn)入到作者的模版?zhèn)}庫(kù)隐孽。
操作演示.png
在右邊有綠色的克隆代碼到本地按鈕癌椿，通過(guò)ZIP下載到本地
下載后解壓得到模版的網(wǎng)頁(yè)站點(diǎn)文件夾
十、使用jekyll serve命令部署本地服務(wù)
打開(kāi)命令行進(jìn)入到模板文件夾目錄下菱阵，執(zhí)行命令
jekyll serve
如果你配置jekyll環(huán)境不完全踢俄，可能會(huì)出現(xiàn)許多未知錯(cuò)誤
下圖為正確配置jekyll環(huán)境后會(huì)發(fā)生的錯(cuò)誤提示
原因： 沒(méi)有安裝 bundler ，所以接下來(lái)執(zhí)行安裝 bundler 命令
gem install bundler
如果報(bào)錯(cuò)晴及，嘗試更換源都办，注意眾多博客中的源都沒(méi)有更新
更換源的步驟如下
$ gem sources //查看當(dāng)前源
$ gem sources --remove http://ruby.taobao.org/
$ gem sources -a http://gems.ruby-china.org/
$ gem sources -l
命令行顯示當(dāng)前ruby源
*** CURRENT SOURCES ***
http://gems.ruby-china.org/
接下來(lái)執(zhí)行
bundle install
安裝過(guò)程中出現(xiàn)錯(cuò)誤提示：在安裝redcarpet時(shí)出現(xiàn)錯(cuò)誤
請(qǐng)用一下指令安裝該程序至成功再重新安裝bundle
gem install redcarpet
如下圖顯示redcarpet已經(jīng)安裝成功
再次運(yùn)行 bundle install 直到提示成功（未知錯(cuò)誤請(qǐng)參考文末解決方法）
執(zhí)行jekyll server
錯(cuò)誤信息中有提示：嘗試在你要輸入的命令前添加 bundle exec
如上圖所示，在本地啟動(dòng)jekyll sever成功虑稼，現(xiàn)在即可在瀏覽器通過(guò)
http://localhost:4000 或者 http://127.0.0.1:4000/ 脆丁，訪問(wèn)拷貝的博客模版。
十一动雹、將模版修改為自己的內(nèi)容
修改博客名，博客簡(jiǎn)介等個(gè)人信息內(nèi)容 ：
使用編輯器打開(kāi)本地倉(cāng)庫(kù)中的 _config.yml 文件跟压，按照里面的注釋修改為自己的內(nèi)容胰蝠。修改博客文章內(nèi)容
打開(kāi)本地倉(cāng)庫(kù)的 _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語(yǔ)言寫文章效扫，windows下推薦MarkdownPad這個(gè)軟件編寫Markdown文本，web中使用簡(jiǎn)書直砂。提交修改
修改好內(nèi)容后按照更新倉(cāng)庫(kù)版本的方法重新提交本地倉(cāng)庫(kù)中的內(nèi)容到github的遠(yuǎn)程倉(cāng)庫(kù)菌仁，關(guān)閉瀏覽器再次刷新 http://localhost:4000 或者 http://127.0.0.1:4000/ 就可以生效修改了 。
十二静暂、博客部署到遠(yuǎn)端
詳細(xì)教程請(qǐng)查看我的另外一篇博文[17年重整版]GithubPages + Jekyll搭建個(gè)人博客
這里講的是部署到 Github Page济丘， 創(chuàng)建一個(gè) github 賬號(hào)，然后創(chuàng)建一個(gè)跟你賬戶名一樣的倉(cāng)庫(kù)洽蛀，如我的 github 賬戶名叫 zengsiyong摹迷，我的 github 倉(cāng)庫(kù)名就叫 zengsiyong.github.io，創(chuàng)建好了之后郊供，把剛才建立的 myBlog 項(xiàng)目 push 到 username.github.io倉(cāng)庫(kù)里去（username指的是你的github用戶名）峡碉，檢查你遠(yuǎn)端倉(cāng)庫(kù)已經(jīng)跟你本地 myBlog 同步了，然后你在瀏覽器里輸入 username.github.io 颂碘，就可以訪問(wèn)你的博客了异赫。
十三椅挣、總結(jié)
所以通過(guò)配置jekyll環(huán)境，我們就可以通過(guò)在站點(diǎn)文件夾中運(yùn)行 jekyll server命令并通過(guò) http://localhost:4000 查看我們對(duì)網(wǎng)頁(yè)做出的修改塔拳，修改滿意后再push到 github 遠(yuǎn)程倉(cāng)庫(kù)鼠证，在外網(wǎng)通過(guò) github page username.github.io訪問(wèn)自己的博客。
錯(cuò)誤匯總：
1.使用ruby2.0.0等較舊的版本時(shí)靠抑，可能會(huì)出現(xiàn)如下錯(cuò)誤量九，解決方法是進(jìn)入ruby安裝文件夾，點(diǎn)擊卸載颂碧，重新下載例如本博客使用的ruby2.2.4版本安裝荠列。
2.如果jekyll serve命令執(zhí)行出現(xiàn)如下錯(cuò)誤，就必須重新執(zhí)行
install bundle和gem bundle install兩條命令直至成功
3.出現(xiàn)如下錯(cuò)誤時(shí)载城，應(yīng)按照正文中的方式步驟重新做一遍
參考文檔
[1]windows安裝jekyll
[2]Jekyll中文文檔
[3]使用Github Pages建獨(dú)立博客
[4]亢志軍博客
[5]獨(dú)立博客一小時(shí)快速搭建
