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

前言

常常會有人問我如何才能將本身作的靜態頁面放到網上供他人欣賞，是否是須要本身有一個服務器，是否是還要搞個域名才能訪問？對於以上問題我都會回答：用github來展現你的前端頁面吧。

工欲善其事，必先利其器。github是一個很好的代碼管理與協同開發平臺，在程序界又被稱爲最大的「同性交友網站」。若是你不懂git，沒有本身的github帳戶，那你就丟失了一把可以很好的展現自我，儲存知識的利器。

固然知道github的人不在少數，可是大部分人可能僅知道它能夠用於管理咱們的項目代碼，而不知道其還能夠用於展現咱們前端的靜態頁面。好比：

https://github.com/luozhihao/...

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

https://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 <server>

（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地址爲：https://luozhihao.github.io/d... 最終頁面如圖：

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

結語

不少時候方法就擺在眼前，就看你會不會捅破那層隔膜，敢不敢進行鑽研與嘗試。github之因此經久不衰是由於其不只解決了咱們代碼提交、版本管理的問題，還提供了其餘實用而獨特的功能。

本文只針對Github Pages提供給咱們展現靜態頁面（不支持服務端語言）的功能作了基礎的介紹，至於想真正掌握並瞭解更加深刻內容的同窗還請付諸於實踐，好比利用gihub搭建博客等。

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

本文爲勞卜原創文章，首發於微信公衆號：前端呼啦圈（Love-FED） 轉載請註明來自——微信公衆號：前端呼啦圈（Love-FED）