建立自己的GitHub Project Pages
在 GitHub 使用上,我算是初新者,有疑問才有進步。每當看到有人把好玩的東西放到 GitHub 上面變成靜態頁面,都會很想知道他是怎樣辦到的。結果不難,就是利用 GitHub Pages 來做到。
GitHub Pages 介紹
當你要有一個自己的 GitHub Pages,其實分成兩項。
- repo 的名字為
yourname.github.com
,則會產生的 page 路徑為yourname.github.io
。本部落格是建立在 github 上面,就是利用這一個 GitHub Pages 模式去建立,可以參考hexo 架 blog 初體驗、建立自己 blog 的 subdomain這兩篇文章。 - repo 的名字為
repo-name
,則會產生的 page 路徑為yourname.github.io/repo-name
,這邊的 repo name 就不像第一種模式,沒有固定名稱。
GitHub Pages 建立
在每一個新的 repo 下面,正常的情況都是在 mater 這一個 branch。分享一下我自己的作法。
- GitHub 頁面上建立一個新的 repo,這邊我取名為 first-repo。
- 從本機端 clone 下來,參照自己的路徑,我的 repo 則是在 command line 底下打
git clone git@github.com:kpman/first-repo.git
- 移到該資料夾
cd first-repo
- 將 branch 移到
gh-pages
,這步驟很重要,Github Pages 就是看這一個 branch 去決定頁面的。
git branch gh-pages
git checkout gh-pages
或者
git checkout --orphan gh-pages //建立一個沒有parent的branch,並移到該branch上
- 將編輯好的檔案 push 上去。
git add .
git commit
git push origin gh-pages
- 完成!
路徑差異
http://github.com/kpman/liteAccordion這樣代表連回 GitHub 的 code 頁面
http://kpman.github.io/liteAccordion因為新增到gh-pages
這一個 branch,所以可以看到靜態的 html 展示頁面。
其他範例
two.js
textillate