GitHub Pages 和 Jekyll 建站入門
一. 背景介紹
如今是網際網路時代，誰不想擁有一個自己的網站呢？可是，真要建站卻沒有想的那麼簡單。除了金錢成本，時間成本也不小。維護網站，多多少少都需要學習一點兒相關知識。
其實，部落格平臺在一定程度上滿足了這個“剛需”，但它和真正的個人網站還有差距。因此，GitHub 早就推出了 GitHub Pages 服務。它既保留個人網站的靈活性，又降低了建站的成本。它不需要資料庫，也不需要配置伺服器，更不需要花錢買空間。一切都可以通過免費的 GitHub 庫進行管理，實在可謂良心了。
當然，GitHub Pages 提供的是靜態網站託管服務。簡言之，它更適合釋出內容，而不是做複雜的業務。 它的前端足夠靈活，已經可以滿足絕大多數個人網站的需求了。
GitHub Pages 背後的靜態網站生成引擎是 Jekyll。因此，本文多多少少也會提到它。
二. GitHub Pages
如何建立網站？
-
訪問 GitHub 網站，註冊一個賬號。有賬號直接登入就可以了。
-
建立一個 GitHub 庫，名字為：username.github.io。注意，這裡的 username，要替換成你自己賬戶的使用者名稱。而後面的 github.io 域名則是必須的，不能更改。
-
使用 Git 克隆上面的庫到本地：
git clone https://github.com/username/username.github.io
-
在庫的根目錄建立一個檔案 index.html，並隨便在檔案之中新增一些內容。比如：Hello World！
-
提交併上傳檔案：
git add --all
git commit -m "Initial commit"
git push -u origin master
- 稍等一會兒，然後訪問：https://username.github.io 就可以了。
要說明的幾點
- 你要稍微懂點 Git。在 GitHub 上的一切操作都離不開 Git，因此最基本的克隆、提交、推送操作應該掌握。
- 如果你稍微懂一點 Web 開發方面的知識就會更加得心應手。比如上面建立的 index.html 檔案，一般就是作為網站的歡迎頁面。但你不懂也無所謂，因為 GitHub Pages 提供了不少漂亮的模板，可以直接使用。
- https://username.github.io 是你的預設域名，你也可以繫結自己的域名。在庫的 Setting 設定裡可以配置。
- username.github.io 庫只能有一個，它被作為使用者的個人網站。而對於使用者的其他庫，也可以配置相應的專案網站。只不過 URL 變為：http://username.github.io/repository 的形式。
三. Jekyll
Jekyll 的主要功能就是生成靜態網站。我們在本地，通過 Jekyll 配置好網站模板和樣式，push 到 Github 庫中。GitHub Pages 服務會自動把程式碼生成網站。
此後，我們專注於內容就可以了。每次僅需要把新的檔案提交到 GitHub 庫，就完成了文章的釋出。
Jekyll 涉及到的東西比較多，只能簡單介紹一下了。
安裝 Jekyll
gem install jekyll bundler
jekyll new myblog
cd myblog
bundle exec jekyll serve
然後檢視 http://localhost:4000 就可以了。
Jekyll 是用 Ruby 開發的，所以你需要 Ruby 環境。在 Linux 和 Mac OS 系統，一般都是直接帶有 Ruby 環境的。
Gem 是一個 Ruby 程式和包的管理工具，可以下載 Ruby 開發需要的庫。這有點類似於 Ubuntu 中的 apt，或 Mac OS 用的Homebrew。
從上面的程式碼我們也可以看到，jekyll 自帶了 web server。因此，當你啟動了 server 之後，可以在本地檢視網站。這也大大方便了測試。
Jekyll 基本用法
我是真心想介紹一下 Jekyll 基本操作的，但這個網站：Jekyll 中文網站 已經有很詳細的資料了，而且還是中文的（感謝譯者）。查閱很方便。我就不再贅述了。
Jekyll 實用建議
這一部分還值得我分享一下經驗。請記住，最最最最重要的一點就是：不要從頭開始！不要從頭開始！不要從頭開始！
使用 Jekyll + GitHub Pages 建站雖不那麼難，但對於非程式設計師來講，仍然談不上容易。什麼 Layout、Liquid、CSS、JavaScript… 我就問你蒙不蒙！更不要說對於普通人，不自帶藝術細胞的，根本就做不出來好看的網站。配色啊、佈局啊、LOGO 啊，哪個不需要點設計技巧？聽我勸，如果你沒有兩把刷子，就不要從頭開始建立網站，哪怕是靜態網站！
在你的耐心被耗盡之前，儘快去找一個模板或者人家的站點，拷貝過來，執行起來。然後，發上一兩篇文章，積累些滿足感。想個性化？路還很長，慢慢來吧。前端專業人士請忽略我上面的言論。
如何找現成的資源呢？
第一，可以去一些專門的網站下載：
第二，去 GitHub 上找人家做好的站點拿來用。許多人都精心打磨了自己的網站，因此通常都好看又實用。但是！！！一定要和人家打聲招呼！看看是否允許拷貝，是否有什麼限制！直接剽竊別人的成果是讓人鄙視的！
下載的資源怎麼用？
下載的資源，通常都包含了我下面將會提到的目錄結構。把這個目錄的所有內容，統統拷貝到 myblog 目錄下（前面提到的 jekyll new myblog 命令，myblog 就是專案的根目錄）。然後執行 bundle exec jekyll serve 就可以在本地瀏覽網站了，和上面提到的一樣。
怎麼上傳到 GitHub？
Jekyll 自帶伺服器是為了方便本地檢視和除錯的，要讓所有人都能訪問，當然要傳到 GitHub 上，也就是 username.github.io 庫中。
前面提到了通過 git clone 命令把 Git 庫克隆到本地了。現在，你只需要把之前 myblog 下的內容，拷貝到 git clone 下來的目錄中（不用拷貝 _site 目錄），然後按照前面 GitHub Pages 部分的內容，執行 git add，git commit，git push 就可以了。
Jekyll 必備知識
現在，你應該找到了一個自己喜歡的模板了。但你仍然需要了解一些必要的知識。
jekyll build
用來生成 _site 目錄，也就是最終的站點。
- 可以用 --source, --destination 引數指定源目錄和目標目錄。注意，目標路徑會被清空，確保備份了重要檔案。
- 可以用 --watch, —no-watch 引數來指定是否監視目錄的改變，如果 watch 了，改變了就會自動重新生成站點。但是，_config.yml 不會重新自動更新，只有重新執行才會再讀取一次。
jekyll serve
用來啟動本地伺服器。啟動之後，在瀏覽器預設訪問 localhost:4000 就可以看到站點了。
- 可以 —detach 來從當前命令視窗分離，但是要結束就必須殺程序。
- 預設是 watch 的，自動生成修改，可以通過 —no-watch 關閉這個功能。
Jekyll 目錄結構如下：
.
├── _config.yml
├── _data
| └── members.yml
├── _drafts
| ├── begin-with-the-crazy-ideas.md
| └── on-simplicity-in-technology.md
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 2007-10-29-why-every-programmer-should-play-nethack.md
| └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass
| ├── _base.scss
| └── _layout.scss
├── _site
├── .jekyll-metadata
└── index.html # can also be an 'index.md' with valid front matter
值得注意的有：
- _site，通過 Jekyll build 生成的站點目錄。這個目錄不需要修改，也不需要上傳到 GitHub，因為 GitHub 會自己生成站點的。
- _posts，我們最常用到的目錄，會存放我們的文章。通常是 markdown 檔案。
- _config.yml，配置檔案。很多選項既可以通過命令列指定，也可以在配置檔案裡指定。當然，在配置檔案中指定更加方便一些。
結語
好了，基本上這些知識已經可以使你擁有一個個人網站了。GitHub Pages + Jekyll 建立的網站，足夠釋出內容之用。如果你想讓網站個性十足，還是有必要深入學習一下 Jekyll 的。另外，最好不要重頭建站。參考牛人的作品學習，會更有效率的。Enjoy it！