# Github Action 初次嘗試

###### tags: `w3HexSchool` . `github` . `CI/CD`

## 為何要使用 Github Action ?

[之前](https://hackmd.io/@c36ICNyhQE6-iTXKxoIocg/rkJxgxhDI)我們提過可以用 `gh-pages` 套件來手動部屬我們的 [Github Pages](https://pages.github.com/)

每次更新程式時，都需要自己手動部屬，
很容易不小心部屬到錯誤的版本==造成空白頁面==，
因此我們使用 Github Action，作為自動化部屬的工具，以避免手動部屬不小心出錯

## 實際操做

切換到專案中的 Actions Panel


點選 `set up a workflow yourself →` ，可以看到 Github 建議我們建立一個 main.yaml 到 .github/workflows 的資夾底下


然後點擊，Start commit → Commit new file ，將新增的 main.yml 檔案並 commit 到 master 分支中


將 main.yml 拉下來，並修改其中的內容

# This is a basic workflow to help you get started with Actions

name: CI

# Controls when the action will run. Triggers the workflow on push or pull request
# events but only for the master branch
on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      # install node.js
      - uses: actions/setup-node@v1

      # Runs a single command using the runners shell
      - name: install dependencies
        run: npm install

      # Runs a single command using the runners shell
      - name: try to build the project
        run: npm run build

      # use actions-gh-pages to deploy dist to gh-pages
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          # github will auto-generate a token for this job and use it 
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

之後每次 push 後，Github Action 都會增加一個 work 將我們定義的 Jobs 走一遍


之後設定一下 Github Pages 對應使用的資料夾，
就可以每次 commit 後，看到新版網站了 !

## 其他需要設定的部分

### 設定 Github Pages 的對應資料夾

別忘了要將 Github Pages 的使用分支改成 gh-pages




當你看到白畫面，顯示 css . js 找不到位置，
代表我們需要調整一下[網站根目錄](https://cli.vuejs.org/config/#publicpath)


### 調整 vue 的網站根目錄( publicPath )

新建 `vue.config.js`，將根目錄改成 `cloud-drive`

// vue.config.js
module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/cloud-drive/'
        : '/'
}

## 後話

當初看[別人的文章，說明 Github-Actions](https://blog.wu-boy.com/2019/05/introduction-to-github-actions/) 的使用，
雲裡霧裡的說明一大堆，覺得還蠻難設定的，
實際使用後發現，
現在 Github-Actions 上面有很多工程師將他們的部屬流程完成並分享出來，
只要自己先確定好確定要 CI/CD 的流程，
其實設定 Github-Actions 還蠻容易的

## 參考資料

- [GitHub 推出 CI/CD 服務 Actions 之踩雷經驗](https://blog.wu-boy.com/2019/05/introduction-to-github-actions/)
- [GitHub Action - Deploy to GitHub Pages](https://github.com/marketplace/actions/deploy-to-github-pages)