前言
經(jīng)常會(huì)有人問(wèn)我如何才能將自己做的靜態(tài)頁(yè)面放到網(wǎng)上供他人欣賞，是不是需要自己有一個(gè)服務(wù)器，是不是還要搞個(gè)域名才能訪問(wèn)？對(duì)于以上問(wèn)題我都會(huì)回答：用github來(lái)展示你的前端頁(yè)面吧。
工欲善其事，必先利其器。github是一個(gè)很好的代碼管理與協(xié)同開發(fā)平臺(tái)，在程序界又被稱為最大的“同性交友網(wǎng)站”。如果你不懂git，沒(méi)有自己的github賬戶，那你就丟失了一把能夠很好的展示自我，儲(chǔ)存知識(shí)的利器。
當(dāng)然知道github的人不在少數(shù)，但是大部分人可能僅知道它可以用于管理我們的項(xiàng)目代碼，而不知道其還可以用于展示我們前端的靜態(tài)頁(yè)面。比如：
了解github的人都知道上方的地址指向的是一個(gè)github項(xiàng)目目錄，同時(shí)你可能還會(huì)發(fā)現(xiàn)這樣的一個(gè)地址：
上方的地址就是對(duì)應(yīng)demo項(xiàng)目的展示頁(yè)面了。
步驟
其實(shí)利用github來(lái)展示前端靜態(tài)頁(yè)面的例子很多，比如各種插件、框架的demo演示地址都會(huì)這樣做，那么下面我們就來(lái)實(shí)際操作一下，體驗(yàn)一把展示自己前端項(xiàng)目成果的樂(lè)趣。
1.安裝git
如果你是mac用戶，那么恭喜你mac自帶git命令功能，你無(wú)須安裝git。如果你是windows用戶，你可以前往windows地址下載并安裝。
2.建立倉(cāng)庫(kù)
在你的github主頁(yè)，我們可以點(diǎn)擊右上角的加號(hào)按鈕下的“New repository”來(lái)新建一個(gè)項(xiàng)目倉(cāng)庫(kù)，如圖所示：
點(diǎn)擊之后我們給倉(cāng)庫(kù)取一個(gè)名字并進(jìn)行相應(yīng)的描述和配置后點(diǎn)擊“Create repository”就ok了。
3.上傳代碼
倉(cāng)庫(kù)建立完畢后，這時(shí)候就需要用我們之前安裝的git命令來(lái)將本地的代碼推送到github上了。如果你僅為了展示自己的前端頁(yè)面，那么只要掌握如下命令即可（不熟悉git命令的可以參考git - 簡(jiǎn)易指南）：
（1）打開你的目錄
cd demo
（2）初始化版本庫(kù)，用于生成.git文件
git init
（3）將所有文件添加到緩存區(qū)
git add *
（4）提交當(dāng)前工作空間的修改內(nèi)容
git commit -m "first commit"
（5）將倉(cāng)庫(kù)連接到遠(yuǎn)程服務(wù)器
git remote add origin <server>
（6）將改動(dòng)推送到所添加的服務(wù)器上
git push -u origin master
上方server中的地址在github上創(chuàng)建倉(cāng)庫(kù)后可以找到，如下：
4.創(chuàng)建gh-pages分支
之前的工作只是將我們的代碼發(fā)布到了github上demo倉(cāng)庫(kù)的master分支上，當(dāng)然你也可以不發(fā)布，而我們的展示頁(yè)面代碼必須發(fā)布到名為“gh-pages”的分支上。方法很簡(jiǎn)單，我們只需要在github的demo項(xiàng)目頁(yè)面手動(dòng)創(chuàng)建gh-pages分支即可。如圖：
輸入gh-pages后創(chuàng)建即可，這樣的方式會(huì)直接拷貝master分支的所有文件到gh-pages分支，而你也可以用命令行的形式創(chuàng)建并重新上傳一份新的代碼：
（1）新建并切換到gh-pages分支
git checkout --orphan gh-pages
（2）之后的操作和之前一樣，只是push的時(shí)候是gh-pages
git add *
git commit -m "update"
git push -u origin gh-pages
如此，我們的demo項(xiàng)目就多了一個(gè)gh-pages分支，里面的代碼文件就可以用來(lái)展示頁(yè)面了。
5.訪問(wèn)頁(yè)面
創(chuàng)建并上傳文件至gh-pages之后，我們就可以訪問(wèn)如下url來(lái)查看自己的demo了：
http://(user_name|org_name).github.io/repo_name
這里我們的demo地址為：https://luozhihao.github.io/demo/, 最終頁(yè)面如圖：
這樣我們便實(shí)現(xiàn)了利用github來(lái)展示前端靜態(tài)頁(yè)面的目標(biāo)。
結(jié)語(yǔ)
很多時(shí)候方法就擺在眼前，就看你會(huì)不會(huì)捅破那層隔膜，敢不敢進(jìn)行鉆研與嘗試。github之所以經(jīng)久不衰是因?yàn)槠洳粌H解決了我們代碼提交、版本管理的問(wèn)題，還提供了其他實(shí)用而獨(dú)特的功能。
本文只針對(duì)Github Pages提供給我們展示靜態(tài)頁(yè)面（不支持服務(wù)端語(yǔ)言）的功能做了基礎(chǔ)的介紹，至于想真正掌握并了解更加深入內(nèi)容的同學(xué)還請(qǐng)付諸于實(shí)踐，比如利用gihub搭建博客等。
補(bǔ)充：根據(jù)讀者反饋，現(xiàn)在github有一種更加簡(jiǎn)便的方式來(lái)實(shí)現(xiàn)上述功能，將代碼上傳至倉(cāng)庫(kù)后在settings里配置下GitHub Pages為你想展示的分支就行了。
