Jekyll 動態地創建靜態博客網站 (Get Started)

提早聲明：Jekyll並不簡單，必需要正確的看待它。把它和PHP，JSP和Django等放在一塊兒討論會減小不少失落感。它的學習曲線幾乎至關於Wordpress，工做流程和結構也幾乎同樣。

Jekyll與Wordpress最大不一樣的就是，沒有數據庫。可是體驗上來講也算不上什麼大差異。
完全摒棄數據庫，這算是一種Jekyll式的新思路。
由於你須要的只是按期更新一些Markdown格式的文章，而後讓它顯示成網頁，並放在一塊兒成爲網站而已。不必大動干戈的設計數據庫什麼的。

簡單的說，Jekyll是一個基於Ruby語言的靜態博客網站製做工具，它能夠把Markdown轉換成HTML網頁。

不過對於一個HTML網頁來講，它得有標題、樣式、日期什麼的，甚至一些根據文章的不一樣而動態改變的內容等。這些就不只是把Markdown轉換成HTML而已了。不少內容須要你在Markdown文件裏面就寫明指定。

另注：Jekyll雖然和Github Pages搭配免費，但實際上是徹底獨立的產品。能夠在任何地方使用，像Wordpress同樣。

安裝Jekyll

安裝Jekyll須要用Ruby的包管理器gem下載，像Python的pip同樣：

$ gem install jekyll

可是若是本機的gem版本不夠新，是裝不了jekyll的，因此就依照官網從ruby從頭開始安裝：

sudo apt-get install ruby ruby-dev build-essential

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME=$HOME/gems' >> ~/.bashrc
echo 'export PATH=$HOME/gems/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

gem install jekyll bundler

用Jekyll建立一個網站（自動生成名爲test_blog的文件夾和一個完整的Demo網站）：

$ jekyll new test_blog

目錄裏面內容以下：

這裏面是完整的一個網站，能夠直接運行瀏覽。
而後你就能夠根據本身的主頁、其它網頁什麼的，在這個基礎上修改了。

Jekyll new時發送錯誤：Bundler: ruby: No such file or directory

個人Mac機上歷來沒作過任何Ruby項目，也不懂gem使用方法。所有原始配置後，使用gem install jekyll沒問題，可是在jekyll new ..時，就發送這個錯誤：

Bundler: ruby: No such file or directory -- /usr/local/lib/ruby/gems/2.5.0/gems/bundler-1.16.1/exe/bundle (LoadError)

發生錯誤後，項目文件夾是生成了，可是不完整，也不能執行。

問題在於本機的gem和bundler都不是很新，須要更新一下。
參考：https://github.com/rubygems/r...

更新以下：

# Install latest version of Rubygems
gem update --system

# Install latest version of bundler system-wide
gem install bundler

更新時間會很長，等所有安裝好後，就能夠正常的使用jekyll了。

生成網站

渲染網站

$ cd test_blog
$ jekyll serve

或實時渲染網站：

$ jekyll server --watch

若是加上了--watch參數，jekyll就會實時監控你的文件，只要那個文件有變更了，好比新增了markdown文件，或修改了layout模板，它都會即時渲染生成網站，總保持更新。

運行渲染的命令後，jekyll就會把你的Markdown根據指定的模板渲染爲靜態網站，
同時還會把網站映射到本機的一個端口，你能夠打開命令行裏提示的url連接察看網站效果。

容許公網訪問

若是jekyll部署在了公網上的服務器上，那麼很輕鬆就能夠公開給全部人訪問了。
語法以下：

$ jekyll serve --detach  --host 0.0.0.0

# 或
$ jekyll serve --force_polling -H 0.0.0.0 -P 4000

而後就會顯示以下：

也就是說公網運行jekyll的話，程序就轉到後臺了，須要退出的話須要手動關閉進程。

而後根據網站設計時候指定的端口，相應的在服務器防火牆上開放這個端口，好比4000。
而後用http://服務器IP:4000這樣的就能訪問了。
若是要不帶端口號訪問，就在_config.yml中把端口號設計爲80。（可是常常有衝突，須要解決）

Jekyll Workflow 工做流程

使用Jekyll，主要難就在一開始，須要設計網頁樣式，設置全站的規則等等。
可是一旦這些基本設置都完成了，之後更新就只須要專一的寫Markdown文件便可。

Jekyll自定義網站

Jekyll new命令新建一個網站結構後，文件夾裏面有不少文件。這些文件結構都是什麼做用，是咱們必需要學習的。

Jekyll文件夾結構

• _config.yml文件：這是你第一個須要修改的東西。全網站的通用設置都保存在這裏，好比網站主題，名稱，介紹，域名，Github用戶名等。.yml是像.ini同樣的配置文件類型。
• _site文件夾：這個存放你的完整靜態網站的文件夾，可是這是不須要你去碰的文件夾，它是Jekyll根據你的設置和模板之類的內容，自動生成的靜態網站。
• _layout文件夾：是存放各類網頁模板的地方，主頁什麼樣子，列表頁什麼樣子，博客內容頁面什麼樣子，這些分別的頁面模板都是放在這裏的。
• _includes文件夾：存放全部重複使用的、比較固定的頁面模塊。好比每一個網頁都同樣的頁頭、頁腳，導航欄，側邊欄等等。這裏面的HTML文件，都不是完整的HTML網頁，都只是模塊，可能只是一個<div>標籤。
• _posts文件夾：存放全部的Markdown格式文件。你全部的Markdown博客內容，都放在這裏。文件命名也是有規定的，好比必須是data-filename.markdown這種。

注意：

• _site文件夾須要你在.gitignore中加入屏蔽，由於這個動態生成的東西，徹底不須要在git裏面進行追蹤。並且放在Github Pages上的話，Github引擎也不會在你的目錄裏面生成這個文件夾，而是在後臺直接給你生成頁面。之因此會有它，主要是本地設計時候用。

Front-Matter 文件頭信息

文件頭信息在這裏被叫作front-matter,或yml-header，它是寫在每一個Markdown文件頭部的設置信息。主要是指明這篇文章標題、日期、使用的模板、樣式、標籤、分類等，這樣Jekyll就能夠根據這些設置把markdown文件轉換成你想要的最終HTML網頁了。

頭信息的經常使用參數以下：

• layout: 指明模板名稱，即指定使用_layout文件夾中哪一個HTML網頁作爲模板。
• title: 這篇文章的標題。
• data: 這篇文章的日期。
• categories: 這篇文章的分類。

「真正的」拿到Jekyll生成的靜態網站

Jekyll的最終目標和整個存在乎義都是生成靜態網站。
可是，
默認狀況下，所謂生成出來的靜態HTML頁面，你也不能直接打開看到效果！必需要運行jekyll serve才行，或者把它放到Github的Repo裏。
那還叫什麼靜態網站？！
真正的靜態網站不是生成HTML就好了，而是讓你雙擊打開HTML就能在瀏覽器看到效果。

避開這個有點矛盾的邏輯不說了，咱們有比較方便的外部工具來作到這點。
那就是最經常使用的wget下載命令。
wget能夠把網頁或整個網站下載下來，而且能自動轉換各類文件裏的路徑。
命令以下：

$ wget -r --convert-links <URL>

因此當你運行Jekyll serve成功編譯生成_site目錄後，就能夠用wget下載本地的這個網站了。

Jekyll的體驗

目前體驗極其糟糕：

• 不能真正生成靜態網站，必須開着Jekyll服務才能展現出網頁
• Macbook air上運行jekyll服務器不到一下子，CPU溫度就極速增高
• 大概幾十篇文章，就須要10s+的生成時間
• 各個主題安裝極其不一樣，每一個主題都須要單獨學習其內在邏輯、變量、結構、生成方法，學習成本很是高
• 依賴性極高，很容易致使gem或nodejs依賴過時無效或出錯
• Jekyll對配置文件的tokens（好比指定變量名）常常改變和更新，很快你寫的配置文件就無論用老報錯了。