喜歡寫Blog的人,會經歷三個階段。
第一階段,剛接觸Blog,覺得很新鮮,試著選擇一個免費空間來寫。
第二階段,發現免費空間限制太多,就自己購買域名和空間,搭建獨立部落格。
第三階段,覺得獨立部落格的管理太麻煩,最好在保留控制權的前提下,讓別人來管,自己只負責寫文章。
大多數Blog作者,都停留在第一和第二階段,因為第三階段不太容易到達:你很難找到俯首聽命、願意為你管理伺服器的人。
但是兩年前,情況出現變化,一些程式設計師開始在github網站上搭建blog。他們既擁有絕對管理權,又享受github帶來的便利----不管何時何地,只要向主機提交commit,就能釋出新文章。更妙的是,這一切還是免費的,github提供無限流量,世界各地都有理想的訪問速度。
今天,我就來示範如何在github上搭建Blog,你可以從中掌握github的Pages功能,以及Jekyll軟體的基本用法。更重要的是,你會體會到一種建立網站的全新思路。
一、Github Pages 是什麼?
如果你對程式設計有所瞭解,就一定聽說過github。它號稱程式設計師的Facebook,有著極高的人氣,許多重要的專案都託管在上面。
簡單說,它是一個具有版本管理功能的程式碼倉庫,每個專案都有一個主頁,列出專案的原始檔。
但是對於一個新手來說,看到一大堆原始碼,只會讓人頭暈腦漲,不知何處入手。他希望看到的是,一個簡明易懂的網頁,說明每一步應該怎麼做。因此,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的預設模板。並在該檔案中填入以下內容。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }}</title>
</head>
<body>
{{ content }}
</body></html>
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: 你好,世界
---<h2>{{ page.title }}</h2>
<p>我的第一篇文章</p>
<p>{{ page.date | date_to_string }}</p>
每篇文章的頭部,必須有一個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
---<h2>{{ page.title }}</h2>
<p>最新文章</p>
<ul>
{% for post in site.posts %}
<li>{{ post.date | date_to_string }} <a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
它的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改成根目錄"/"。
至此,最簡單的Blog就算搭建完成了。進一步的完善,請參考Jekyll創始人的示例庫,以及其他用Jekyll搭建的blog。
(完)