輕鬆部署 Github Page

當網頁工程師最期待的就是把網頁部署到線上！
只要前端的網頁是靜態檔案，不需要搭配固定的伺服器，就可以輕鬆把網頁部署在雲端上！

打包 Vue 檔案

在終端機輸入：

$ npm run build

Vue CLI 就會自動幫我們把所有寫好的 Vue 組件和設定等等一併作打包的動作，打包好了之後，在專案資料夾中，你會看到多了一個 dist 資料夾，裡面放的就是靜態網頁所需的所有檔案

部署到 Github

在此之前，你會需要一個 Github 專案來部署，所以可以先在 github 註冊，
在 GitHub 上開一個 repository，而你的網址將會是：

https://{username}.github.io/{repository-name}

接下來我們可以把打包好的 Vue 檔案推上 master 分支就可以顯示了，但是每次部署前都需要先執行 npm run build 然後要手動 push 到 GitHub 上
步驟真的很（繁瑣），所以就有了讓工程師（偷懶）的方式！

在根目錄新增 deploy.sh

在專案的根目錄中，要先建立一支部署用的指令檔，取名叫做deploy.sh

接著在這支檔案中貼上下面的內容：

#!/usr/bin/env sh

# abort on errors
set -e

# build
npm run build

# navigate into the build output directory
cd dist

# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# if you are deploying to https://.github.io
# git push -f https://github.com//.GitHub.io.git master

# if you are deploying to https://.Github.io/
# git push -f https://github.com//.git master:gh-pages
git push -f https://github.com/ALPHACamp/forum-front-end-vue.git master:gh-pages

cd -

新增 vue.config.js

因為部署到 GitHub 上時，我們的網址並不是直接在路由的根目錄，而是在 repository 的資料夾內，因此需要告訴 Vue 我們真正檔案所在的路徑，在根目錄中新增檔案 vue.config.js

接著在裡面貼上這段內容，用以告訴 Vue 實際的檔案位置：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/你的專案名稱/'
    : '/'
}

接下來就是部署上 Github 了！

將檔案部署到 GitHub 上

需要在專案資料夾的根目錄透過終端機輸入：

$ ./deploy.sh

若執行這個指令時出現 permission denied: ./deploy.sh 的錯誤時，表示沒有執行這個檔案的權限，需要先透過下面的指令讓此檔案可以被執行：

$ chmod +x ./deploy.sh

接著一樣在輸入 ./deploy.sh 就可以了
成功部署後，在 GitHub 頁面上應該會發現多了一個名為 gh-pages 的分支

接著到 Github 頁面的 Settings 進行 GitHub Pages 的設定，側邊往下拉會有一個 Pages 的欄位，點進去後，在 Source 的地方選擇 gh-pages

設定完成後，進到 GitHub Pages 給你的連結，就可以看到剛部署好的網頁囉！

以後想要部署的話，也只要在終端機輸入 ./deploy.sh 就可以輕鬆部署了！ 😆