1. 先在本地建制一個 vue project 參考 https://cli.vuejs.org/guide/creating-a-project.html

2. 請先去設定自己的 github personal token
個人檔案 -> settings -> Developer setting
創建一個 personal token 然後記得 token 要有 workflow 的權限

3. 我們等等要來建制一個可以自動部屬 vue 專案到github page 的 github action 腳本（workflow）這裡我們先做一些事情準備

3.1. 創建一個要開 github page 的 repo 並且設定祕密變數（ 設定這個變數的理由 ： 因為你的 personal token 是很隱私的資料 你不會希望它被寫在一個公開的 yml 上 所以你可以創建 scret 變數 讓我們等一下 github action 的 yml 檔使用且保護這個變數的值）

選擇 repo 的 settings -> Secret and variables -> Actions


之後加入此 repo 新的 secret 變數


輸入你要的變數名稱 和 secret 值

3.2 再來你的 workflow 需要可以更改和讀取 repo 的權限 repo 的 setting -> Actions -> General 來把 workflow 的權限開好開滿



4. 再來你創建的專案有幾個部份要更改 才能讓等一下順利部屬成功

4.1 去 package.json 加入 homepage 這個屬性 值就放 https://<your github name>.github.io/<your project name your>
以下是範例


4.2 修改你的 vue.config.js 增加 publicPath 這個屬性的值直接放專案名稱


5. 接著把 code 推到你的 repo 接著來創建 github action 的腳本

6. 點選這個專案的 actions 然後直接選 set up a workflow yourself 開始創自己的 workflow



7. 再來就是裡面的 yaml 怎麼寫 可以照抄我下面寫的

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

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  # 你 push 到 main 這個分至就會觸發
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# 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
      
      - name: Install & Build # 執行指令
        run: |
          npm install
          npm run build 
          
      # Runs a single command using the runners shell
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@releases/v4
        with:
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} # Settings > Secret 建立的祕密變數 請將 ACCESS_TOKEN 換成你剛剛的命名
          BRANCH: gh-pages # deploy 到 gh-pages 這個分支
          FOLDER: dist # build 後的資料夾

之後讓這個 action 跑 可以注意到上面的 yaml 的倒數第二行 我們會把原始的 js css html 都放到這個分之 它應該會長的有點像這樣 我們等一下要用這個分之來建 github pages ( 如上面的範例是 gh-pages 這個 branch )

（ github actions 幫你部屬的原始 html js css 這裡是 gh-pages ）


( 開發分支放的是你原本 vue project 這裡是 main )

8. 來設定一下 github page settings -> pages 這邊選你要拿來做成 github pages 的 branch


以上基本上你的東西就會部屬上去了 之後基本上你每次只要 push 到指定 branch 它就會自己幫你更新

點選它給的網址即可拜訪自己的網站 展示一下我自己的成果


參考 ：
1. https://tzuhui.io/2020/12/11/Vue/Vue-deploy-github-actions/
2. https://medium.com/swlh/auto-deploy-vue-js-to-github-pages-using-actions-723a2206e4d3
3. https://segmentfault.com/a/1190000021875558
4. https://hackmd.io/@c36ICNyhQE6-iTXKxoIocg/H1TE8hXOP