Github、Jekyll 搭建及優化靜態博客方法指南

jopen 10年前發布 | 42K 次閱讀 Jekyll 博客系統 Github

嘗試自己寫 Blog 的人，一般會經歷三個階段。

第一階段，剛接觸 Blog，覺得很新鮮，試著選擇一個免費空間來寫。
第二階段，發現免費空間限制太多，就自己購買域名和空間，搭建獨立博客。
第三階段，覺得獨立博客的管理太麻煩，最好在保留控制權的前提下，讓別人來管，自己只負責寫文章。

大多數人，都停留在第一和第二階段，因為第三階段不太容易到達：你很難找到俯首聽命、愿意為你管理服務器的人。

前兩天在站長之家里面看到一個文章，講的是如何在 github 上搭建 Blog，現在分享給大家。比較詳細的介紹了 github 的 Pages 功能，以及 Jekyll 軟件的基本用法。

從大概 2012 年開始，一些程序員開始在 Github 網站上搭建 blog，既擁有絕對管理權，又享受 github 帶來的便利：不管何時何地，只要向主機提交 commit，就能發布新文章，還是免費的！github 提供無限流量，世界各地都有理想的訪問速度。

一、Github Pages 是什么？

如果你對編程有所了解，就一定聽說過 github,它號稱程序員的非死book，有著極高的人氣，許多重要的項目都托管在上面。

簡單說，它是一個具有版本管理功能的代碼倉庫，每個項目都有一個主頁，列出項目的源文件。

但是對于一個新手來說，看到一大堆源碼，只會讓人頭暈腦漲，不知何處入手。他希望看到的是，一個簡明易懂的網頁，說明每一步應該怎么做。因此，github 就設計了 Pages 功能，允許用戶自定義項目首頁，用來替代默認的源碼列表。所以，github Pages 可以被認為是用戶編寫的、托管在 github 上的靜態網頁。

github 提供模板，允許站內生成網頁，但也允許用戶自己編寫網頁，然后上傳。有意思的是，這種上傳并不是單純的上傳，而是會經過Jekyll程序的再處理。

二、Jekyll是什么？

Jekyll（發音/'d?i?k ?l/，"杰克爾"）是一個靜態站點生成器，它會根據網頁源碼生成靜態文件。它提供了模板、變量、插件等功能，所以實際上可以用來編寫整個網站。

整個思路到這里就很明顯了。你先在本地編寫符合 Jekyll 規范的網站源碼，然后上傳到 github，由 github 生成并托管整個網站。

這種做法的好處是：

免費，無限流量。
享受 git 的版本管理功能，不用擔心文章遺失。
你只要用自己喜歡的編輯器寫文章就可以了，其他事情一概不用操心，都由 github 處理。

它的缺點是：

有一定技術門檻，你必須要懂一點 git 和網頁開發。
它生成的是靜態網頁，添加動態功能必須使用外部服務，比如評論功能就只能用 disqus。
它不適合大型網站，因為沒有用到數據庫，每運行一次都必須遍歷全部的文本文件，網站越大，生成時間越長。

但是，綜合來看，它不失為搭建中小型 Blog 或項目主頁的最佳選項之一。

三、一個實例

下面，我舉一個實例，演示如何在 github 上搭建 blog，你可以跟著一步步做,為了便于理解，這個 blog 只有最基本的功能。在搭建之前，你必須已經安裝了 git，并且有 github 賬戶。

第一步，創建項目。

在你的電腦上，建立一個目錄，作為項目的主目錄。我們假定，它的名稱為 jekyll_demo。

?$ mkdir jekyll_demo

對該目錄進行git初始化:

?$ cd jekyll_demo
?$ git init

然后，創建一個沒有父節點的分支 gh-pages，因為 github 規定，只有該分支中的頁面，才會生成網頁文件。

?$ git checkout --orphan gh-pages

以下所有動作，都在該分支下完成。

第二步，創建設置文件。

在項目根目錄下，建立一個名為 _config.yml 的文本文件。它是 jekyll 的設置文件，我們在里面填入如下內容，其他設置都可以用默認選項，具體解釋參見官方網頁。

?baseurl: /jekyll_demo

目錄結構變成：

?/jekyll_demo
?|--　_config.yml

第三步，創建模板文件。

在項目根目錄下，創建一個 _layouts 目錄，用于存放模板文件。

?$ mkdir _layouts

進入該目錄，創建一個 default.html 文件，作為 Blog 的默認模板,并在該文件中填入以下內容。

?    
?    
?    
?    
?{{ page.title }}
?    
?    
?{{ content }}
?    
?

Jekyll 使用 Liquid 模板語言，{{ page.title }} 表示文章標題，{{ content }} 表示文章內容，更多模板變量請參考官方文檔。

目錄結構變成：

?/jekyll_demo
?|-- _config.yml
?|-- _layouts
?|   |--　default.html

第四步，創建文章。

回到項目根目錄，創建一個_posts目錄，用于存放blog文章。

?    $ mkdir _posts

進入該目錄，創建第一篇文章，文章就是普通的文本文件，文件名假定為 2012-08-25-hello-world.html。(注意，文件名必須為"年-月-日-文章標題.后綴名"的格式。如果網頁代碼采用 html 格式，后綴名為 html；如果采用 markdown 格式，后綴名為 md。）

在該文件中，填入以下內容：（注意，行首不能有空格）

?---
?layout: default
?title: 你好，世界
?---
?{{ page.title }}
?我的第一篇文章

?{{ page.date | date_to_string }}

每篇文章的頭部，必須有一個 yaml 文件頭，用來設置一些元數據。它用三根短劃線"---"，標記開始和結束，里面每一行設置一種元數據。"layout:default"，表示該文章的模板使用 _layouts 目錄下的 default.html 文件；"title: 你好，世界"，表示該文章的標題是"你好，世界"，如果不設置這個值，默認使用嵌入文件名的標題，即 "hello world"。

在yaml文件頭后面，就是文章的正式內容，里面可以使用模板變量。{{ page.title }} 就是文件頭中設置的"你好，世界"，{{ page.date }} 則是嵌入文件名的日期（也可以在文件頭重新定義date變量），"| date to string"表示將 page.date 變量轉化成人類可讀的格式。

目錄結構變成：

?/jekyll_demo
?|--　_config.yml
?|--　_layouts
?|　　　|--　default.html
?|--　_posts
?|　　　|--　2012-08-25-hello-world.html

第五步，創建首頁

有了文章以后，還需要有一個首頁。

回到根目錄，創建一個index.html文件，填入以下內容。

?---
?layout: default
?title: 我的Blog
?---
?{{ page.title }}
?最新文章
?    
?{% for post in site.posts %}
?{{ post.date | date_to_string }} {{ post.title }}
?{% endfor %}
?

它的 Yaml 文件頭表示，首頁使用 default 模板，標題為"我的Blog"。然后，首頁使用了{% for post in site.posts %}，表示對所有帖子進行一個遍歷。這里要注意的是，Liquid 模板語言規定，輸出內容使用兩層大括號，單純的命令使用一層大括號。至于 {{site.baseurl}} 就是 _config.yml 中設置的 baseurl 變量。

目錄結構變成：

?/jekyll_demo
?|--　_config.yml
?|--　_layouts
?|　　　|--　default.html
?|--　_posts
?|　　　|--　2012-08-25-hello-world.html
?|--　index.html

第六步，發布內容。

現在，這個簡單的 Blog 就可以發布了。先把所有內容加入本地 git 庫。

?$ git add .
?$ git commit -m "first post"

然后，前往 github 的網站，在網站上創建一個名為 jekyll_demo 的庫。接著，再將本地內容推送到 github 上你剛創建的庫。注意，下面命令中的 username，要替換成你的 username。

?$ git remote add origin
https://github.com/username/jekyll_demo.git  
?$ git push origin gh-pages

上傳成功之后，等 10 分鐘左右，訪問 http://username.github.com/jekyll_demo/ 就可以看到 Blog 已經生成了（將 username 換成你的用戶名）。

首頁：

文章頁面：

第七步，綁定域名。

如果你不想用 http://username.github.com/jekyll_demo/ 這個域名，可以換成自己的域名。

具體方法是在 repo 的根目錄下面，新建一個名為 CNAME 的文本文件，里面寫入你要綁定的域名，比如 example.com 或者 xxx.example.com。

如果綁定的是頂級域名，則 DNS 要新建一條 A 記錄，指向 204.232.175.78。如果綁定的是二級域名，則 DNS 要新建一條 CNAME 記錄，指向 username.github.com （請將 username 換成你的用戶名）。此外，別忘了將 _config.yml 文件中的 baseurl 改成根目錄 "/"。