2013年6月5日 星期三

在github建立靜態網站

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

建立github page方法


  • 手動建立
  • 使用產生器建立


手動建立

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>KeJyun's Manually GitHub Page</h1>" > manually.html
git add manually.html
git commit -a -m "KeJyun's First Manually Github Page commit"
git push origin gh-pages

檢視github page網頁

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

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


使用產生器建立

前往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/





參考網站

張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)

ADS