經常看到大神們用github展示demo案例，一直很困惑他們是怎麼做到的。今天看部落格時，發現了一篇《用github來展示你的前端頁面吧》這篇文章，詳細的介紹了怎麼使用github展示你的前端頁面。這篇文章的作者部落格園裡好多關于前端的文章，很不錯的，值得關注。
知道github的人不在少數，但是大部分人可能僅知道它可以用于管理我們的項目代碼，而不知道其還可以用于展示我們前端的靜态頁面。比如：
https://github.com/Songyj-225/jq-demo
了解github的人都知道上方的位址指向的是一個github項目目錄，同時你可能還會發現這樣的一個位址：
https://songyj-225.github.io/jq-demo
上方的位址就是對應demo項目的展示頁面了。
步驟
其實利用github來展示前端靜态頁面的例子很多，比如各種插件、架構的demo示範位址都會這樣做，那麼下面我們就來實際操作一下，體驗一把展示自己前端項目成果的樂趣。
1.安裝git
如果你是mac使用者，那麼恭喜你mac自帶git指令功能，你無須安裝git。如果你是windows使用者，你可以前往windows位址下載下傳并安裝。
2.建立倉庫
在你的github首頁，我們可以點選右上角的加号按鈕下的“New repository”來建立一個項目倉庫，如圖所示：
點選之後我們給倉庫取一個名字并進行相應的描述和配置後點選“Create repository”就ok了。
3.上傳代碼
倉庫建立完畢後，這時候就需要用我們之前安裝的git指令來将本地的代碼推送到github上了。如果你僅為了展示自己的前端頁面，那麼隻要掌握如下指令即可（不熟悉git指令的可以參考git - 簡易指南）：
（1）克隆一個遠端倉庫到你的本地電腦
git clone .... 複制這個網址，填到 git clone https://...
（2）打開你的目錄
cd jq-demo （2）初始化版本庫，用于生成.git檔案
git init
（3）将所有檔案添加到緩存區
git add *
（4）送出目前工作空間的修改内容
git commit -m "first commit"
（5）将倉庫連接配接到遠端伺服器
git remote add origin <server>
（6）将改動推送到所添加的伺服器上
git push -u origin master
4.建立gh-pages分支
之前的工作隻是将我們的代碼釋出到了github上jq-demo倉庫的master分支上，當然你也可以不釋出，而我們的展示頁面代碼必須釋出到名為“gh-pages”的分支上。方法很簡單，我們隻需要在github的jq-demo項目頁面手動建立gh-pages分支即可。如圖：
輸入gh-pages後建立即可，這樣的方式會直接拷貝master分支的所有檔案到gh-pages分支，而你也可以用指令行的形式建立并重新上傳一份新的代碼：
（1）建立并切換到gh-pages分支
git checkout --orphan gh-pages
（2）之後的操作和之前一樣，隻是push的時候是gh-pages
git add *
git commit -m "update"
git push -u origin gh-pages
如此，我們的demo項目就多了一個gh-pages分支，裡面的代碼檔案就可以用來展示頁面了。
5.通路頁面
建立并上傳檔案至gh-pages之後，我們就可以通路如下url來檢視自己的demo了：
http://(user_name|org_name).github.io/repo_name 這裡我們的demo位址為：https://songyj-225.github.io/jq-demo, 最終頁面如圖：
這樣我們便實作了利用github來展示前端靜态頁面的目标。
原文：http://www.cnblogs.com/luozhihao/p/5579786.html