在 github 建立靜態頁面

如果有用過Twitter Bootstrap的人應該會發現它們的網址是 http://twitter.github.io/bootstrap/ ，他們將網站放在github下，雖然只支援靜態網站，但對於簡單的小網站我想也夠了，而且還有版本控制，一舉兩得，所以現在開始來玩玩github page吧~

建立github page方法

1. 手動建立

2. 自動建立

手動建立

 clone要建立page的repository

git clone https://github.com/kejyun/github-page.git

建立一個沒有母節點，名字叫gh-pages的分支（branch）

git checkout --orphan gh-pages

在gh-pages分支中，刪除從原本分支複製到gh-pages分支的所有檔案 因為gh-pages沒有了母節點，所以檔案異動不會影響到其他原本的分支

git rm -rf .

建立在github pages的網頁

echo "<h1>Hello GitHub Page</h1>" > manually.html
git add manually.html
git commit -a -m "First Hello Github Page commit"git push origin gh-pages

檢視github page網頁

github pages的網址結構是http://帳號.github.io/分支名稱/檔案名稱

所以我們可以透過下列網址去檢視剛剛推上去的檔案

http://kejyun.github.io/github-page/manually.html

---

 自動建立

前往repository頁面點選setting

找到GitHub Pages的功能，點選Automatic Page Generator

填入你的專案名稱（Project Name）、專案下標（Tagline）以及內文（Body）

填入Google Analytics Tracking ID（選填）並產生Github Page樣板 若需要使用GA（Google Analytics）追蹤分析頁面活動則填入你的GA追蹤編號，不需要則不必填寫

填寫完畢後點選Continue to Layouts觀看產生的預覽畫面

檢視預覽畫面 這裡可以挑選不同的樣板，若挑選好預設樣板，可以點選PUBLIS產生Github Page

檢視自動產生Github Pages成果 可以在github上看到自動產生的github pages

https://github.com/kejyun/github-page/tree/gh-pages

github pages自動產生器會將剛剛的預覽畫面產生為index.html

我們也可以看到手動產生的manually.html

github pages的網址結構是http://帳號.github.io/分支名稱/

而Github Page預設會讀取index.html的檔案

所以我們可以透過下列網址去檢視自動產生的GitHub Pages

http://kejyun.github.io/github-page/

---

參考網站

• kejyun學習日誌
• Creating Pages with the automatic generator · GitHub Help
• Creating Project Pages manually · GitHub Help
• 如何建立一個沒有 Parent 的獨立 Git branch
• Creating Pages with the automatic generator · GitHub Help