使用 Jekyll 與 GitHub Pages 架站

使用 Jekyll 建置的 Node.js Taiwan Book Store

Jekyll 是使用 Ruby 開發的「靜態網站產生器」（static site generator），它可以當做內容管理系統（CMS）使用。

* [Jekyll](http://jekyllrb.com/)

和一般直接以 HTML 編寫靜態網站不同的地方是，Jekyll 產生的網站可以有佈景、模組等動態的好處，當你需要修改網站整體的佈局（layout），只需要設計、切換為新的佈景，重新產生的網站就會套用新的外觀。或是在日後加上留言回應、瀏覽統計的模組，就可以輕鬆擴充網站整體的功能。

靜態網站很適合用於內容被大量存取的網站類型，只要搭配高效能的伺服器軟體（如 Nginx），就可以有非常好的負載。並且可以採用價格相對便宜很多的服務來發佈網站，例如  S3 + CloudFront。

* [Amazon Simple Storage Service (S3)](http://aws.amazon.com/s3/)
* [Amazon Cloud Front](http://aws.amazon.com/cloudfront/)

這篇文章寫給 Jekyll 的入門者參考，並使用免費的 GitHub Pages 服務發佈網站。

首先，系統必須先裝有 Ruby。

* [Ruby](http://www.ruby-lang.org/zh_TW/downloads/)

以及 RubyGems。

* [RubyGems](http://rubygems.org/pages/download)

如此就能使用 gem 指令快速安裝 Jekyll。

sudo gem install jekyll

* [Install Jekyll](https://github.com/mojombo/jekyll/wiki/install)

這個網站列出不少使用 Jekyll 架設的網站，並且也提供原始碼連結，是很好的參考範本。

* [Jekyll Sites](https://github.com/mojombo/jekyll/wiki/Sites)

Jekyll 並沒有內建範本（template），對入門者來說，從頭到尾自己建立一個新的 site 並不容易，因此建議可以從 jekyll-bootstrap 開始。

* [Jekyll Bootstrap](http://jekyllbootstrap.com/)

這個範本可以讓你有個基本的網站雛形，並且可以快速發佈到 GitHub Pages。

Pages 是 GitHub 提供的專案網站托管服務，一般來說是開放源碼專案開發者，用來建立專案首頁的服務，但它的速度不錯、使用方便，因此用來當個人部落格或筆記網站，也是相當合適的選擇。

* [GitHub Pages](http://pages.github.com/)

在繼續下個步驟前，需要先註冊、登入個人的 GitHub 帳號（架設帳號為 USERNAME）。

在 Jekyll Bootstrap 的 GitHub 專案頁面，使用 Fork 按鈕，複製一份專案到自己的空間（Fork to USERNAME）。


* [Jekyll Bootstrap at GitHub](https://github.com/plusjade/jekyll-bootstrap)

使用 Admin 按鈕，將專案名稱（repository name）改名為「USERNAME.github.com」，這是 GitHub Pages 的設定方式，如此一來你就能用「http://USERNAME.github.com/」存取已發佈的網站。

接下來需要用到 Git 版本控制指令。

* [Install Git](http://git-scm.com/download)

取得專案：

git clone git@github.com:USERNAME/USERNAME.github.com.git

這會建立一個 USERNAME.github.com 資料夾，切換到該路徑下。

cd USERNAME.github.com

目錄下的檔案，就是 Jekyll Bootstrap 的檔案結構。

第一個需要修改的設定檔是「_config.yml」，包括 title 及 author 等網站基本資料。

使用「rake -T」可以查詢有哪些指令可用，剛開始會用到的指令有：


rake page           # Create a new page.
rake post           # Begin a new post in ./_posts
rake preview        # Launch preview environment

輸入「rake preview」即可建立預覽專用的伺服器，預設的 Port 號碼為 4000，所以用瀏覽器打開「http://localhost:4000/」即可預覽。之後新增、修改網頁內容，都可以重新整理瀏覽器網頁，查看更新的結果（需要等待 Jekyll 在背景產生好靜態網站）。

資料夾下的 index.md、tags.html、archive.html、categories.html、pages.html 是一些預設的基本頁面，可以直接修改內容，這些檔案的內容採用 Markdown 格式編寫。檔首的 --- 區塊有 title 等設定，是 Jekyll 網頁的特殊設定方式。

* [Markdown](http://markdown.tw/)

再來就是建立新網頁：

rake page title="about me"

或

rake post title="hello world"

使用 page 或 post，必須看新增的網頁內容是屬於頁面（page）或文章（post）類型，舉例來說，「關於本站」、「作者介紹」這種不會經常發佈、固定式的資料，就是用 page，而「新聞」、「活動」等日後會常發佈新內容的類型，就是 post。

建立或修改網頁內容後，使用 git 將目前的版本提交。

git add .
git commit . -m 'just another commit'
git push origin master

之後專案就會更新，使用「http://github.com/USERNAME/USERNAME.github.com」可以看一下專案更新結果。通常只需要等待片刻時間（第一次發佈會比較久），就可以從「http://USERNAME.github.com」瀏覽已發佈的網站。

如果你擁有自己的網域名稱，可以在 DNS 設定增加一筆 CNAME，例如 jekyll.YOURDOMAIN.com 這個 hostname 透過 CNAME 指向「USERNAME.github.com」。

接著在 Jekyll 專案的根目錄下，增加一個命名為 CNAME 的檔案，內容就是自訂的 hostname，如 jekyll.YOURDOMAIN.com。並且重新 git add、commit、push 一次。

這樣就可以讓 GitHub Pages 架設的網站擁有自訂網域名稱。

Node.js Taiwan Book Store 目前就是使用 Jekyll + GitHub Pages 架設，參考： http://book.nodejs.tw/

使用 GitHub Pages 入門 Jekyll 可以有個輕鬆愉快的開始，但如果是商業用途的網站，則可以搭配前面提到的 Amazon S3 + CloudFront 服務（這兩個服務皆可自訂網域名稱），就可以用相對一般虛擬主機便宜非常多的價格架站。