用github來展示你的前端頁面吧

前言

經常會有人問我如何才能將自己做的靜態頁面放到網上供他人欣賞，是不是需要自己有一個伺服器，是不是還要搞個域名才能訪問？對於以上問題我都會回答：用github來展示你的前端頁面吧。

工欲善其事，必先利其器。github是一個很好的程式碼管理與協同開發平臺，在程式界又被稱為最大的“同性交友網站”。如果你不懂git，沒有自己的github賬戶，那你就丟失了一把能夠很好的展示自我，儲存知識的利器。

當然知道github的人不在少數，但是大部分人可能僅知道它可以用於管理我們的專案程式碼，而不知道其還可以用於展示我們前端的靜態頁面。比如：

github.com/luozhihao/d…

瞭解github的人都知道上方的地址指向的是一個github專案目錄，同時你可能還會發現這樣的一個地址：

luozhihao.github.io/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）開啟你的目錄

cd demo複製程式碼

（2）初始化版本庫，用於生成.git檔案

git init複製程式碼

（3）將所有檔案新增到快取區

git add *複製程式碼

（4）提交當前工作空間的修改內容

git commit -m "first commit"複製程式碼

（5）將倉庫連線到遠端伺服器

git remote add origin 複製程式碼

（6）將改動推送到所新增的伺服器上

git push -u origin master複製程式碼

上方server中的地址在github上建立倉庫後可以找到，如下：

4.建立gh-pages分支

之前的工作只是將我們的程式碼釋出到了github上demo倉庫的master分支上，當然你也可以不釋出，而我們的展示頁面程式碼必須釋出到名為“gh-pages”的分支上。方法很簡單，我們只需要在github的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地址為：luozhihao.github.io/demo/, 最終頁面如圖：

這樣我們便實現了利用github來展示前端靜態頁面的目標。

結語

很多時候方法就擺在眼前，就看你會不會捅破那層隔膜，敢不敢進行鑽研與嘗試。github之所以經久不衰是因為其不僅解決了我們程式碼提交、版本管理的問題，還提供了其他實用而獨特的功能。

本文只針對Github Pages提供給我們展示靜態頁面（不支援服務端語言）的功能做了基礎的介紹，至於想真正掌握並瞭解更加深入內容的同學還請付諸於實踐，比如利用gihub搭建部落格等。

補充：根據讀者反饋，現在github有一種更加簡便的方式來實現上述功能，將程式碼上傳至倉庫後在settings裡配置下GitHub Pages為你想展示的分支就行了。