[17年重整版]Jekyll搭建個人博客

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

博客截圖.jpg

一、Jekyll是什么

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

Jekyll是一款靜態網站生成工具，雨蕁用戶使用HTML、Mardown或Textile通過模塊的方式簡歷所需網站，然后通過模版引擎Liquid來運行或者生成對應的靜態

因為Jekyll是一款基于Ruby的插件，必須先配置Ruby開發環境，需要Pygments代碼高亮引擎，所以需配置Python開發環境**

二、安裝Ruby

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

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

    Ruby安裝包.png

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

    安裝目錄設置.png

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

    檢測Ruby版本.png

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

    檢測gem版本.png

三、安裝 DevKit

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

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

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

    選擇DevKit 版本.png

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

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

    初始化.png

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

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

四、安裝 Jekyll

1.確保 gem 已經正確安裝（在2.2.4版本的ruby會自動安裝）
2.安裝 Jekyll gem

安裝 Jekyll gem.png

gem install jekyll

  • 如果報錯參照解決辦法
    證書驗證
  • 其他報錯請參考文末的常見錯誤及解決方法

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

gem install jekyll-paginate.png

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

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

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

五、安裝 Python

  1. python下載地址

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

  3. 安裝

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

    添加環境變量.png

  5. 檢驗 Python 安裝是否成功
    python –V

    檢驗 Python 安裝是否成功.png

  6. 安裝 ‘Easy Install’

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

七、安裝 Pygments

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

八、啟動 Jekyll

按照Jekyll中文文檔 的步驟

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

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

我新建的Jekyll網頁.png

九、套用優秀的博客模版

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

  • ** 挑選“模版” **
    Jekyll項目的wiki頁面給出了大量優秀的風格各異的網站，這里以 Zhijun Kang為例講解。
    點擊Zhijun Kang，會跳出他的博客首頁
    返回github進入wiki頁，點擊Zhijun Kang右邊的source鏈接，進入到作者的模版倉庫。
    操作演示.png

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


Paste_Image.png

下載后解壓得到模版的網頁站點文件夾


模版網頁的站點文件夾.png

十、使用jekyll serve命令部署本地服務

打開命令行進入到模板文件夾目錄下，執行命令
jekyll serve
如果你配置jekyll環境不完全，可能會出現許多未知錯誤
下圖為正確配置jekyll環境后會發生的錯誤提示

錯誤提示1.png

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

Paste_Image.png

如果報錯，嘗試更換源，注意眾多博客中的源都沒有更新
更換源的步驟如下

$ gem sources  //查看當前源
$ gem sources --remove http://ruby.taobao.org/
$ gem sources -a http://gems.ruby-china.org/
$ gem sources -l
建議添加源為http://gems.ruby-china.org/.png

命令行顯示當前ruby源

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

接下來執行
bundle install
安裝過程中出現錯誤提示：在安裝redcarpet時出現錯誤

錯誤提示2.png

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

如下圖顯示redcarpet已經安裝成功


redcarpet安裝成功.png

再次運行 bundle install 直到提示成功（未知錯誤請參考文末解決方法）

再次運行 bundle install .png

執行jekyll server

錯誤提示3.png

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

在jekyll server 命令前添加 bundle exec

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

本地啟動模版網頁.png

十一、將模版修改為自己的內容

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

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

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

十二、博客部署到遠端

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

十三、總結

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

錯誤匯總：

1.使用ruby2.0.0等較舊的版本時，可能會出現如下錯誤，解決方法是進入ruby安裝文件夾，點擊卸載，重新下載例如本博客使用的ruby2.2.4版本安裝。

ruby舊版本導致的錯誤.png

2.如果jekyll serve命令執行出現如下錯誤，就必須重新執行
install bundle和gem bundle install兩條命令直至成功

bundle安裝失敗的錯誤.png

3.出現如下錯誤時，應按照正文中的方式步驟重新做一遍


未知錯誤請重新配置環境.png

參考文檔

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

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容