---
tags: 基礎
---
###### tags: `CI/CD`、`vue`、`github`、`gitlab`

# ♨ Day 1 Github CI/CD自動部屬 + Vue

為何要使用 Github Action ?
---------
我們可以用 gh-pages 套件來手動部屬 Github Pages

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

實際操做
---------
切換到專案中的 Actions Panel

搜尋出jekyll，並點選jekyll

創建一個main.yml，並填入以下code

# 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


其他需要設定的部分
--------
在settings的general的最下方，的 Github Pages
設定 Github Pages 的對應資料夾
別忘了要將 Github Pages 的使用分支改成 gh-pages


調整 vue 的網站根目錄( publicPath )
------
新建 vue.config.js，將根目錄改成 social-media-platform

// vue.config.js
module.exports = {
    publicPath: process.env.NODE_ENV === 'production'
        ? '/social-media-platform/'
        : '/'
}

參考:
* [Github Action 初次嘗試](https://hackmd.io/@c36ICNyhQE6-iTXKxoIocg/H1TE8hXOP)