很多時候我們想需要一個地址就可以訪問自己的前端作品，

但是註冊一個服務器和域名是需要花錢，很多小夥伴都不願意，

其實這種前端靜態頁面github就可以幫我們預覽其效果，而且只要在有網的情況下都可以訪問的。

下面我就以vue.js為例，如何一步一步的在github上部署自己的前端項目的。

我的案例：https://husanfeng.github.io/vue-components-web/

首先你需要一個github賬號，所有還沒有的話先去註冊吧！

https://github.com/

我們使用git需要先安裝git工具，這裏給出下載地址，下載後一路直接安裝即可：

https://git-for-windows.github.io/

1.1 創建一個本地項目

進到自己的本地項目文件下，右鍵-選擇git bash here（如下圖）

1.2 建立本地倉庫

如上點擊git bash here之後即可打開git客戶端黑窗口，

輸入命令： git init 初始化，

初始化成功後你會發現項目裏多了一個隱藏文件夾.git（.git是隱藏文件，可通過設置顯示隱藏文件夾令其顯示）

然後，將項目中所有文件添加到倉庫

輸入指令： git add .（此處有空格）

註意： git是不能管理空的文件夾的，文件夾裏必須有文件才能add

接著，把文件提交到倉庫，雙引號內是提交註釋。

輸入指令： git commit -m "註釋內容"

1.3 創建github倉庫

登錄個人github賬戶之後，選擇 New repository,

接著，根據提示創建一個倉庫

如此，一個名為vue-components-web的github倉庫就創建成功了

1.4 關聯github倉庫

復制github vue-components-web倉庫的倉庫地址，這裏選擇的是http地址，這樣比較簡單，沒有選擇ssh，如有需要，可自行百度設置ssh，

獲取到github倉庫地址後，將本地倉庫與github倉庫關聯

輸入指令： git remote add origin http://github.com/husanfeng/vue-components-web.git

註：在git客戶端直接按 insert 即可粘貼內容

接下來彈出對話框輸入自己github帳號密碼；

關聯成功

1.5 上傳本地項目

輸入指令： git push -u origin master

稍等幾分鐘即可，

這樣本地代碼已經推送到github倉庫了，去githubt倉庫刷新即可。

2:如何在github上訪問自己的項目

2.1:創建gh-pages分支

2.2:在vscode上切換到gh-pages分支

2.3：將打包後的文件copy到gh-pages分支，在vscode上提交即可（記住打包文件放到gh-pages分支的根路徑，不然頁面出不來）

2.4：在github上切換到gh-pages分支，點擊Settng按鈕

2.5：選擇到gh-pages branch分支，點擊Save

點擊 https://husanfeng.github.io/vue-components-web/ 地址 就可以訪問了

如何在github上部署自己的前端項目