很多開源項目托管平臺都支持為托管的項目建立主頁，但主頁的維護方式都沒有GitHub這么酷。大多數托管平臺無非是開放一個FTP或類似服務，用戶把制作好的網頁或腳本上傳了事，而在GitHub用戶通過創建特殊名稱的Git版本庫或在Git庫中建立特別的分支實現對主頁的維護。 ## 3.5.1\. 創建個人主頁 GitHub 為每一個用戶分配了一個二級域名.github.io，用戶為自己的二級域名創建主頁很容易，只要在托管空間下創建一個名為.github.io的版本庫，向其master分支提交網站靜態頁面即可，其中網站首頁為index.html。下面以gotgithub用戶為例介紹如何創建個人主頁。 * 用戶gotgithub創建一個名為gotgithub.github.io的Git版本庫。 在GitHub上創建版本庫的操作，參見“第3.1節?[_創建新項目_](http://www.worldhello.net/gotgithub/03-project-hosting/010-new-project.html#new-project)”。 * 在本地克隆新建立的版本庫。 ~~~ $ git clone git@github.com:gotgithub/gotgithub.github.io.git $ cd gotgithub.github.io/ ~~~ * 在版本庫根目錄中創建文件index.html作為首頁。 ~~~ $ printf "<h1>GotGitHub's HomePage</h1>It works.\n" > index.html ~~~ * 建立提交。 ~~~ $ git add index.html $ git commit -m "Homepage test version." ~~~ * 推送到GitHub，完成遠程版本庫創建。 ~~~ $ git push origin master ~~~ * 訪問網址：?[http://gotgithub.github.io/](http://gotgithub.github.io/)?。 最多等待10分鐘，GitHub就可以完成新網站的部署。網站完成部署后版本庫的所有者會收到郵件通知。 還有要注意訪問用戶二級域名的主頁要使用HTTP協議非HTTPS協議。 ## 3.5.2\. 創建項目主頁 如前所述，GitHub會為每個賬號分配一個二級域名.github.io作為用戶的首頁地址。實際上還可以為每個項目設置主頁，項目主頁也通過此二級域名進行訪問。 例如gotgithub用戶創建的helloworld項目如果啟用了項目主頁，則可通過網址http://gotgithub.github.io/helloworld/訪問。 為項目啟用項目主頁很簡單，只需要在項目版本庫中創建一個名為gh-pages的分支，并向其中添加靜態網頁即可。也就是說如果項目的Git版本庫中包含了名為gh-pages分支的話，則表明該項目提供靜態網頁構成的主頁，可以通過網址http://.github.io/訪問到。 下面以用戶gotgithub的項目helloworld為例，介紹如何維護項目主頁。 如果本地尚未從GitHub克隆helloworld版本庫，執行如下命令。 ~~~ $ git clone git@github.com:gotgithub/helloworld.git $ cd helloworld ~~~ 當前版本庫只有一個名為master的分支，如果直接從master分支創建gh-pages分支操作非常簡單，但是作為保存網頁的gh-pages分支中的內容和master分支中的可能完全不同。如果不希望gh-pages分支繼承master分支的歷史和文件，即想要創建一個干凈的gh-pages分支，需要一點小技巧。 若使用命令行創建干凈的gh-pages分支，可以從下面三個方法任選一種。 第一種方法用到兩個Git底層命令：git?write-tree和git?commit-tree。步驟如下： * 基于master分支建立分支gh-pages。 ~~~ $ git checkout -b gh-pages ~~~ * 刪除暫存區文件，即相當于清空暫存區。 ~~~ $ rm .git/index ~~~ * 創建項目首頁index.html。 ~~~ $ printf "hello world.\n" > index.html ~~~ * 添加文件index.html到暫存區。 ~~~ $ git add index.html ~~~ * 用Git底層命令創建新的根提交，并將分支gh-pages重置。 ~~~ $ git reset --hard $(echo "branch gh-pages init." | git commit-tree $(git write-tree)) ~~~ * 執行推送命令，在GitHub遠程版本庫創建分支gh-pages。 ~~~ $ git push -u origin gh-pages ~~~ 第二種方法用到Git底層命令：git?symbolic-ref。步驟如下： * 用git?symbolic-ref命令將當前工作分支由master切換到一個尚不存在的分支gh-pages。 ~~~ $ git symbolic-ref HEAD refs/heads/gh-pages ~~~ * 刪除暫存區文件，即相當于清空暫存區。 ~~~ $ rm .git/index ~~~ * 創建項目首頁index.html。 ~~~ $ printf "hello world.\n" > index.html ~~~ * 添加文件index.html到暫存區。 ~~~ $ git add index.html ~~~ * 執行提交。提交完畢分支gh-pages完成創建。 ~~~ $ git commit -m "branch gh-pages init." ~~~ * 執行推送命令，在GitHub遠程版本庫創建分支gh-pages。 ~~~ $ git push -u origin gh-pages ~~~ 第三種方法沒有使用任何Git底層命令，是從另外的版本庫獲取提交建立分支。操作如下： * 在helloworld版本庫之外創建另外一個版本庫，例如helloworld-web。 ~~~ $ git init ../helloworld-web $ cd ../helloworld-web ~~~ * 在helloworld-web版本庫中創建主頁文件index.html。 ~~~ $ printf "hello world.\n" > index.html ~~~ * 添加文件index.html到暫存區。 ~~~ $ git add index.html ~~~ * 執行提交。 實際提交到master分支，雖然提交說明中出現的是gh-pages?。 ~~~ $ git commit -m "branch gh-pages init." ~~~ * 切換到helloworld版本庫目錄。 ~~~ $ cd ../helloworld ~~~ * 從helloworld-web版本庫獲取提交，并據此創建gh-pages分支。 ~~~ $ git fetch ../helloworld-web $ git checkout -b gh-pages FETCH_HEAD ~~~ * 執行推送命令，在GitHub遠程版本庫創建分支gh-pages。 ~~~ $ git push -u origin gh-pages ~~~ 無論哪種方法，一旦在GitHub遠程版本庫中創建分支gh-pages，項目的主頁就已經建立。稍后（不超過10分鐘），用瀏覽器訪問下面的地址即可看到剛剛提交的項目首頁：?[http://gotgithub.github.io/helloworld/](http://gotgithub.github.io/helloworld/)?。 除了以上通過命令行創建gh-pages分支為項目設定主頁之外，GitHub還提供了圖形操作界面。如圖3-19所示。 [](https://box.kancloud.cn/2015-07-09_559de30aaa25b.png) 圖3-19：項目管理頁面中的GitHub Pages選項 當在項目管理頁面中勾選“GitHub Pages”選項，并按照提示操作，會自動在項目版本庫中創建gh-pages分支。然后執行下面命令從版本庫檢出gh-pages分支，對項目主頁進行相應定制。 ~~~ $ git fetch $ git checkout gh-pages ~~~ ## 3.5.3\. 使用專有域名 無論是用戶主頁還是項目主頁，除了使用github.com下的二級域名訪問之外，還可以使用專有域名。實現起來也非常簡單，只要在master分支（用戶主頁所在版本庫）或gh-pages分支（項目版本庫）的根目錄下檢入一個名為CNAME的文件，內容為相應的專有域名。當然還要更改專有域名的域名解析，使得該專有域名的IP地址指向相應的GitHub二級域名的IP地址。 例如worldhello.net(“Hello, world”最為程序員所熟知，2002年申請不到helloworld相關域名便退而求其次，申請了 worldhello.net。)是我的個人網站，若計劃將網站改為由GitHub托管，并由賬號gotgit通過個人主頁提供服務，可做如下操作。 首先按照前面章節介紹的步驟，為賬號gotgit設置賬戶主頁。 1. 在賬戶gotgit下創建版本庫gotgit.github.io以維護該賬號主頁。 地址：?[https://github.com/gotgit/gotgit.github.io/](https://github.com/gotgit/gotgit.github.io/) 2. 將網站內容提交并推送到該版本庫master分支中。 即在gotgit.github.io版本庫的根目錄下至少包含一個首頁文件，如index.html。還可以使用下節將要介紹到的 Jekyll 技術，讓網頁有統一的顯示風格，此時首頁文件可能并非一個完整的HTML文檔，而是套用了頁面模版。 3. 至此當訪問網址[http://gotgit.github.io](http://gotgit.github.io/)時，會將賬號gotgit的版本庫gotgit.github.io中的內容作為網站內容顯示出來。 接下來進行如下操作，使得該網站能夠使用專有域名www.worldhello.net提供服務。 1. 在賬號gotgit的版本庫gotgit.github.io根目錄下添加文件CNAME，文件內容為：www.worldhello.net。 參見：?[https://github.com/gotgit/gotgit.github.io/blob/master/CNAME](https://github.com/gotgit/gotgit.github.io/blob/master/CNAME) 2. 然后更改域名www.worldhello.net的IP地址，指向域名gotgit.github.io對應的IP地址（注意不是github.com的IP地址）。 完成域名的DNS指向后，可試著用ping或dig命令確認域名www.worldhello.net和gotgit.github.io指向同一IP地址。 ~~~ $ dig @8.8.8.8 -t a www.worldhello.net ... ; ANSWER SECTION: www.worldhello.net. 81078 IN A 204.232.175.78 $ dig @8.8.8.8 -t a gotgit.github.io ... ; ANSWER SECTION: gotgit.github.io. 43200 IN A 204.232.175.78 ~~~ 設置完成后用瀏覽器訪問?[http://www.worldhello.net/](http://www.worldhello.net/)?即可看到由賬號gotgit的版本庫gotgit.github.io維護的頁面。若將域名worldhello.net（不帶www前綴）也指向IP地址204.232.175.78，則訪問網址[http://worldhello.net/](http://worldhello.net/)會發現GitHub體貼地將該網址重定向到正確的地址[http://www.worldhello.net/](http://www.worldhello.net/)。 在賬號gotgit下的其他版本庫，若包含了gh-pages分支，亦可由域名www.worldhello.net訪問到。 * 網址?[http://www.worldhello.net/doc](http://www.worldhello.net/doc)?實際對應于版本庫?[gotgit/doc](https://github.com/gotgit/doc)?。 * 網址?[http://www.worldhello.net/gotgit](http://www.worldhello.net/gotgit)?實際對應于版本庫?[gotgit/gotgit](https://github.com/gotgit/gotgit)?。 * 網址?[http://www.worldhello.net/gotgithub](http://www.worldhello.net/gotgithub)?實際對應于版本庫[gotgit/gotgithub](https://github.com/gotgit/gotgithub)?。 ## 3.5.4\. 使用Jekyll維護網站 Jekyll是一個支持Textile、Markdown等標記語言的靜態網站生成軟件，還支持博客和網頁模版，由Tom Preston-Werner（GitHub創始人之一）開發。Jekyll用Ruby語言實現，項目在GitHub的托管地址：?[http://github.com/mojombo/jekyll/](http://github.com/mojombo/jekyll/)?，專有的URL地址為：[http://jekyllrb.com/](http://jekyllrb.com/)。 GitHub為用戶賬號或項目提供主頁服務，會從相應版本庫的master分支或gh-pages分支檢出網頁文件，然后執行 Jekyll 相應的命令對網頁進行編譯。因此在設計GitHub的用戶主頁和項目主頁時都可以利用Jekyll，實現用Markdown等標記語言撰寫網頁及博客，并用頁面模版實現網頁風格的統一。 安裝Jekyll最簡單的方法是通過RubyGems安裝，會自動將Jekyll依賴的directory_watcher、liquid、open4、maruku和classifier等Gem包一并安裝。 ~~~ $ gem install jekyll ~~~ 如果安裝過程因編譯擴展模組遇到錯誤，可能是因為尚未安裝所需的頭文件，需要進行如下操作： * 對于Debian Linux、Ubuntu等可以用如下方法安裝所需軟件包： ~~~ $ sudo apt-get install ruby1.8-dev ~~~ * 如果是Red Hat、CentOS或Fedora等系統，使用如下命令安裝： ~~~ $ sudo yum install ruby-devel ~~~ * 對于Mac OSX，可能需要更新RubyGems，如下： ~~~ $ sudo gem update --system ~~~ Jekyll安裝完畢，執行下面的命令顯示軟件版本： ~~~ $ jekyll -v Jekyll 0.11.0 ~~~ 要學習如何用Jekyll設計網站，可以先看一下作者Tom Preston-Werner在GitHub上的個人網站是如何用Jekyll制作出來的。 克隆版本庫： ~~~ $ git clone git://github.com/mojombo/mojombo.github.com.git ~~~ 版本庫包含的文件如下： ~~~ $ cd mojombo.github.com $ ls -F CNAME _config.yml _posts/ css/ index.html README.textile _layouts/ atom.xml images/ random/ ~~~ 版本庫根目錄下的index.html文件不是一個普通的HTML文件，而是使用Liquid模版語言[[2]](http://liquidmarkup.org/)定義的頁面。 ~~~ 1 --- 2 layout: default 3 title: Tom Preston-Werner 4 --- 5 6 <div id="home"> 7 <h1>Blog Posts</h1> 8 <ul class="posts"> 9 {% for post in site.posts %} 10 <li><span>{{ post.date | date_to_string }}</span> &raquo; <a href="{{ post.url }}">{{ post.title }}</a></li> 11 {% endfor %} 12 </ul> ... 63 </div> ~~~ 為方便描述為內容添加了行號，說明如下： * 第1-4行是YAML格式的文件頭，設定了該文件所使用的模版文件及模版中要用到的變量。 凡是設置有YAML文件頭的文件（目錄_layouts除外）無論文件擴展名是什么，都會在Jekyll編譯時進行轉換。若源文件由Markdown等標記語言撰寫（擴展名為.md、.textile等），Jekyll還會將編譯后的文件還將以擴展名.html來保存。 * 其中第2行含義為使用default模版。 對應的模版文件為_layouts/default.html。 * 第3行設定本頁面的標題。 在模版文件_layouts/default.html中用{{?page.title?}}語法嵌入所設置的標題。下面是模版文件中部分內容： ~~~ <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>{{ page.title }}</title> ~~~ * 第6行開始的內容絕大多數是標準的HTML語法，其中夾雜少量Liquid模版特有的語法。 * 第9行和第11行，對于有著Liquid或其他模版編程經驗的用戶，不難理解其中出現的由“{%”和“%}”標識的指令是一個循環指令（for循環），用于逐條對博客進行相關操作。 * 第10行中由“{{”和“}}”標識的表達式則用于顯示博文的日期、鏈接和標題。 非下劃線（`_`）開頭的文件（包括子目錄中文件），如果包含YAML文件頭，就會使用Jekyll進行編譯，并將編譯后的文件復制到目標文件夾（默認為`_site`目錄）下。對于包含YAML文件頭并用標記語言Markdown等撰寫的文件，還會將編譯后的文件以`.html`擴展名保存。而以下劃線開頭的文件和目錄有的直接忽略不予處理（如`_layouts`、`_site`目錄等），有的則需要特殊處理（如`_post`目錄）。 目錄_post用于保存博客條目，每個博客條目都以`<YYYY>-<MM>-<DD>-<blog-tiltle>`格式的文件名命名。擴展名為.md的為Markdown格式，擴展名為.textile的為Textile格式。這些文件都包含類似的文件頭： ~~~ --- layout: post title: How I Turned Down $300,000 from Microsoft to go Full-Time on GitHub --- ~~~ 即博客使用文件`_layouts/post.html`作為頁面模版，而不是index.html等文件所使用的`_layouts/default.html`模版。這些模版文件都采用Liquid模版語法。保存于_post目錄下的博客文件編譯后會以`<YYYY>/<MM>/<DD>/<blog-title>.html`文件名保存在輸出目錄中。 在根目錄下還有一個配置文件_config.yml用于覆蓋Jekyll的默認設置，例如本版本庫中的設置。 ~~~ markdown: rdiscount pygments: true ~~~ 第1行設置使用rdiscount軟件包作為Markdown的解析引擎，而非默認的Maruku。第2行開啟pygments支持。對于中文用戶強烈建議通過配置文件_config.yml重設 markdown 解析引擎，默認的 Maruku 對中文支持不好，而使用 rdiscount 或 kramdown 均可。關于該配置文件的更多參數詳見Jekyll項目維基[[3]](https://github.com/mojombo/jekyll/wiki/configuration)?。 編譯Jekyll編輯網站只需在根目錄執行jekyll命令，下面的命令是GitHub更新網站所使用的默認指令。 ~~~ $ jekyll --pygments --safe ~~~ 現在執行這條命令，就會將整個網站創建在目錄_site下。 如果沒有安裝Apache等Web服務器，還可以使用Jekyll的內置Web服務器。 ~~~ $ jekyll --server ~~~ 默認在端口4000開啟Web服務器。 網址?[http://gitready.com/](http://gitready.com/)?是一個提供Git使用小竅門的網站，如圖3-20所示。 [](https://box.kancloud.cn/2015-07-09_559de30ce3c24.png) 圖3-20：Git Ready 網站 你相信這是一個用Jekyll制作的網站么？看看該網站對應的IP，會發現其指向的正是GitHub。研究GitHub上?[gitready](https://github.com/gitready)?用戶托管的版本庫，會發現en版本庫的gh-pages分支負責生成gitready.com網站，de版本庫的gh-pages分支負責生成德文網站de.gitready.com，等等。而gitready版本庫則是各種語種網站的匯總。 我的個人網站也使用Jekyll構建并托管在GitHub上，網址：[http://www.worldhello.net/](http://www.worldhello.net/)。