用jekyll製做高大上的網站（一）——安裝與配置

不少人會製做本身的主頁，頁面美觀簡潔，一直很在乎是怎麼作的。

最近公司須要作個文檔庫的主頁，就研究了一些開源的工具，後面發現了jekyll（讀傑克爾），將純文本轉換爲靜態博客網站。

 

1、Ruby

jekyll提供了不少現成的主題可使用，裏面有不少高大上的款式。

官網上面有專門一節是介紹安裝的，不過在實際安裝中仍是會有一些問題。

須要有下載Ruby環境，選最新的那個版本便可，官網上面安裝列中有一個RubyGems，但Ruby1.9.1 之後版本已經自帶了，因此無需額外下載。

 

2、切換source源

因爲國內網絡緣由（你懂的），致使 rubygems.org 存放在 Amazon S3 上面的資源文件間歇性鏈接失敗。

有兩張方法，一種是切換到淘寶，另一種是切換到ruby-china，網上大部分的教程都是用淘寶的。

在用淘寶的後總是會出現認證錯誤，後面上google查問題，發現淘寶的已經不維護了，詳見《Ruby China的RubyGems 鏡像上線》

我把兩種方法都記錄了一下，

1） ruby-china

將source改爲「https://gems.ruby-china.org/」，在打開的頁面中，會告訴你幾個指令。

因爲我先用了taobao的source，因此這裏remove的是淘寶的。

ruby-china中說道：「若是遇到 SSL 證書問題，你又沒法解決，請直接用 http://gems.ruby-china.org 避免 SSL 的問題。」

 

2） taobao

將source改爲「https://ruby.taobao.org/」，在打開的頁面中，會告訴你幾個指令。

若是在輸入指令出錯的話，以下圖所示，就是要讓你下載下載證書文件。

而後放到某個位置，輸入指令set，「D:\Ruby23-x64\cacert.pem」就是文件的具體路徑

set SSL_CERT_FILE=D:\Ruby23-x64\cacert.pem

也能夠將「SSL_CERT_FILE」設置爲環境變量，這樣就不用每次都要輸入設置的指令。

不知爲什麼，後面我加載包的時候，就是會出現問題，囧，也許是我作了什麼操做致使的，額額額。

 

3、安裝jekyll

在輸入安裝指令後，就會看到默認安裝了14個包。

gem install jekyll

 

4、啓動

從主題列表中選了兩個，Minimal Mistakes和Jekyll Clean。前者頁面比較全但相對比較複雜，後者頁面少但很簡潔。

輸入指令，

jekyll serve --watch

在顯示的文字中有一句讓你安裝「wdm」，會在下面介紹。

在頁面中輸入「http://localhost:4000/jekyll-clean/index.html」後就能看到頁面了。

 

5、wdm

從 v2.4.0 開始，Jekyll 本地部署時，會至關於之前版本加 --watch 同樣，監聽其源文件的變化。

而 Windows 彷佛有時候並不會奏效，若你碰到，可安裝 wdm (Windows Directory Monitor ) 來改善這個問題。

若是要安裝「wdm」得要先安裝「Devkit」，在打開的網站中下載後，會讓你解壓到某個文件夾，接下來就是進入到這個文件夾中。

執行指令「ruby dk.rb init」。

再執行指令「ruby dk.rb install」，不過提示我先去修改「config.yml」中的路徑。

config.yml文件就在解壓出來的文件中。

再執行install指令。

 

6、Gemfile文件

Gemfile是一個用於描述gem之間依賴的文件。gem是一堆Ruby代碼的集合，它可以爲咱們提供調用。

Gemfile是可經過Bundler建立。

gem install bundler
bundle init
bundle install

Gemfile文件中設置的內容以下：

source "https://rubygems.org"

gem "jekyll-paginate"
gem "kramdown"
gem "jekyll-watch"
gem "wdm", "~> 0.1.0" if Gem.win_platform?

 

7、自動刷新頁面

1）修改Gemfile文件

gem 'guard'
gem 'guard-jekyll-plus'
gem 'guard-livereload'

要添加三個包，執行「bundle install」，若是執行出錯，那就一個一個加吧。

 

2）建立guard配置文件

執行指令，將會生成一個Guardfile文件。

guard init

生成的Guardfile文件內有一些代碼，在代碼的最後添加以下代碼：

guard 'jekyll-plus', :serve => true do
  watch /.*/
  ignore /^_site/
end

guard 'livereload' do
  watch /.*/
end

 

3）添加livereload插件

安裝Live Reload Extension，若是是chrome，就到Chrome Web Store下載。

安裝成功後，在右上角能夠看到一個小按鈕

若是是運行狀態，那麼會自動添加一個js文件引用：

 

4）運行

執行運行指令：

bundle exec guard start

這裏注意一下，livereload要先關閉。

運行上面指令，當出現下面的內容後，再運行livereload。

而後會出現「connected」鏈接了，接下來修改內容就會自動刷新頁面了。

試用後發現，有時候會刷新不成功，仍是原來的樣子，看來某些地方還須要改進。

 

demo下載：

http://download.csdn.net/detail/loneleaf1/9508074

 

參考資料：

Fixing SSL_connect error while installing Ruby Gems on Windows

Gemfile 詳解

Bundler 的做用及原理

gem install SSL 錯誤

Windows 下搭建Jekyll離線部落格環境

Setting Up LiveReload With Jekyll

Using Live Reload with Jekyll