深入 Github 主頁

上一篇我們講了 如何打造一個自動化的前端項目 ，大致提了一下如何用 Github 作為主頁來展示。這一章我們就來詳細說說 Github 主頁。

什么是 Github 主頁

Github 提供給每個用戶的一個用于運行靜態頁面的地址。包括一個二級域名（ http://[Github 用戶名].github.io/ ）和存放文件的版本庫。按照庫的類型可以分為 個人主頁 和 項目主頁 。

下面我們就來講講如何創建這兩種主頁以及注意事項。

個人（組織）主頁

一般是用來作為你的個人（或組織）信息展示的主頁。

注意：

• 1、創建的版本庫必須命名為 [Github 用戶名].github.io
• 2、必須將要展示的內容放到 master 分支下
• 3、訪問地址為 http://<Github 用戶名>.github.io

步驟：

這里我以我的 Github 賬戶 awesomes-cn 為例來講解:

1、在本地創建一個 awesomes-cn.github.io 文件夾：

mkdir awesomes-cn.github.io 

創建自己的主頁的項目，具體可參考 如何打造一個自動化的前端項目 ，這里我們簡單地只創建一個 index.html 頁面。

echo "My Page" > index.html 

2、在 Github 上創建名為 awesomes-cn.github.io 的個人項目。

3、回到本地項目根目錄，依次執行：

git init 

git add .

git commit -m 'init project'

git remote add origin git@github.com:awesomes-cn/auto-web.git

git push -u origin master 

上面的命令將本地項目上傳到了 Github 上，現在你可以通過 http://awesomes-cn.github.io 來訪問你的個人主頁了，注意這里也許會有延遲。

項目主頁

主要用來為每個項目創建說明文檔主頁。

注意：

• 1、必須將要展示的內容放到 gh-pages 分支下
• 2、訪問地址為 http://<Github 用戶名>.github.io/<項目名>

一般我們是在一個項目自身完成后才去創建項目主頁，所以在我們創建項目主頁之前，該項目已經存在了。 下面我們就給 awesomes-cn/emoji 這個項目添加一個項目主頁。

步驟：

1、首先我們給項目創建一個 gh-pages 分支：

git checkout --orphan gh-pages 

上面的指令是創建一個 gh-pages 分支，并切換到該分支。 --orphan 表示該分支是全新的，不繼承原分支的提交歷史（默認 git branch gh-pages 創建的分支會繼承 master 分支的提交歷史，所以就不純凈了）。不過需要注意的是，這里 git branch 是顯示不出 gh-page 分支的，需要做一次提交才行。

2、別急，接下來把新分支中的文件刪掉：

git rm -rf .
rm '.gitignore' 

3、然后創建我們需要的靜態頁面文件，這里象征性地創建一個 index.html 并寫入內容：

echo "My Page" > index.html 

4、然后開始做提交：

git add index.html
git commit -a -m "First pages commit"
git push origin gh-pages 

現在通過 git branch 就可以看到 gh-page 分支了。

然后訪問 http://awesomes-cn.github.io/emoji 就可以看到我們的項目主頁了。

注意事項

1、如果你的項目名開始或結尾包含破折號（如 emoji- 或 -emoji ），或者包含連續破折號（如 web--emoji ），那么Linux用戶訪問的時候會報錯，你需要移除項目名中的非字母數字的字符。

2、 大家也許注意到了，個人主頁的地址是 http://awesomes-cn.github.io/ ，而項目主頁的地址是類似 http://awesomes-cn.github.io/emoji ，事實上就是一個相對于個人主頁項目的二級訪問目錄。

那么問題來了，如果個人主頁項目里面有一個 emoji 文件夾，里面也有相應的靜態頁面。訪問 http://awesomes-cn.github.io/emoji 時究竟訪問的是哪個項目呢？

經過測試，實際上訪問的是 awesomes-cn/emoji 的項目主頁，也就是說個人主頁的 emoji 目錄是訪問不到的。

所以大家要注意不要造成這兩者的命名沖突。

到此為止，我們已經實現了通過命令行手動創建項目主頁了，不過這頁面也著實太丑了。不行，我得好好美化一下，設計是件艱苦差事，幸好Github為我們提供了一個頁面自動生成器。

頁面自動生成器

這是Github 為我們提供的可視化生成主頁的工具，具體操作如下：

在此之前，我們將上面手動生成的 gh-pages 分支刪掉：

刪除本地分支（需要切換到非 gh-pages 的分支）：

 git checkout master
 git branch -D gh-pages 

然后刪除遠程分支：

git push origin --delete gh-pages 

OK 接下來我們就可以開始用自動生成的方式來創建項目主頁了。

1、在 Github 上切換到你的項目主頁，點擊 Settings 設置按鈕

2、點擊 Launch automatic page generator 啟動頁面自動生成器

3、進入主頁設計頁面（這里使用的是 Markdown 編輯器），并填寫相關的信息，還可以添加 Google 的統計插件。注意，這里我們一般可以通過加載 README.md 文件來直接從中讀取內容，否則你就得自己手動編寫。

4、點擊 Continue To Layouts 按鈕，進入模板選擇頁面。這里你可以選擇自己喜歡的模板樣式，是不是很漂亮？而且很多模板相信大家都在一些項目的主頁中看到過。

5、選擇好模板后，可以點擊左上角的 Publish page 發布頁面，然后就可以看到成功提示了。

6、最后，我們將 http://awesomes-cn.github.io/emoji/ 設置成項目主頁

整個過程完成后，你可以看到在你的項目中自動生成了一個新的分支。沒錯，就是 gh-pages ，可以看到里面有一些樣式和腳本文件。如果你對其中的某些部分不滿意，或者想添加新的頁面，那么可以將該分支 pull 到本地進行修改。

首先將分支拉到本地：

 git fetch origin 

然后切換到 gh-pages 分支：

 git checkout gh-pages 

接下來就可以做自己的修改了。

注意：如果你是在個人主頁中使用頁面自動生成器，那么最終的文件會生成到 master 分支下。因為上面我們說過個人主頁是 master 分支，項目主頁是 gh-pages 分支。所以可以直接

 git pull origin master 

第三方工具

當然，除了上面兩種方式，還有很多第三方的工具來幫助我們構建主頁，如 jekyll ，這里我就不詳細講了，感興趣的同學可以了解一下。

域名綁定

有的同學不喜歡 Github 給的二級域名，想設置自己的域名來訪問，很簡單，我們這里以我的個人主頁項目 來介紹。

1、來到 項目主頁 ，切換到 master 分支下（注意：如果是個人主頁則切換到 master 分支，如果是項目主頁則切換到 gh-pages 分支），新建一個文件：

2、將文件命名為 CNAME ，然后添加你要解析的域名 home.awesomes.cn （注意這里不是 http://home.awesomes.cn 且只能填寫一個域名），我這里用的是一個二級域名。

然后填寫提交信息并直接提交合并。

3、域名解析。這里我用的是萬網的域名，我們做下面的解析操作：

• 記錄類型：CNAME
• 主機記錄： home
• 記錄值：awesomes-cn.github.io

接下來你就可以直接訪問 http://home.awesomes.cn/ 來替代 http://awesomes-cn.github.io 了，是不是很簡單。

注意：

我這里是將 home.awesomes.cn 解析到了個人主頁項目上，訪問 http://home.awesomes.cn/emoji 仍然是可以訪問到 emoji 項目主頁的。

但是如果我把這個 CNAME 文件創建到 emoji 項目的 gh-pages 分支下（即直接解析 emoji 項目主頁），那么訪問 http://home.awesomes.cn 就相當于訪問 http://awesomes-cn.github.io/emoji 了，而個人主頁項目也就訪問不到了。

總結

一般情況下，我們都會選擇使用 頁面自動生成器來創建項目主頁，因為更加方便和美觀。但在此之前我們應該通過手動操作來知曉其中的原理。

上面的例子都使用了我的項目來做諒解，實際使用過程中請將對應的地方換成自己的項目名。

附

官方文檔： https://help.github.com/categories/github-pages-basics/