經常看到大神們用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