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/





參考網站

沒有留言:

張貼留言

ADS