---
# System prepended metadata

title: '使用 github page 把 vue 專案部屬到 github page  '

---

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

2. 請先去設定自己的 github personal token
個人檔案 -> settings -> Developer setting 
創建一個 personal token 然後記得 token 要有 workflow 的權限
![](https://hackmd.io/_uploads/HypDfzCR3.png)


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
    
    ![](https://hackmd.io/_uploads/HkkZEMAAh.png)
    
    之後加入此 repo 新的 secret 變數

    ![](https://hackmd.io/_uploads/rJUGEfR03.png)

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

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

    ![](https://hackmd.io/_uploads/HJjvSMAR2.png)

    ![](https://hackmd.io/_uploads/SkJOrMCAh.png)

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

    4.1 去 package.json 加入 homepage 這個屬性 值就放 https://<your github name>.github.io/<your project name your>
        以下是範例
    
    ![](https://hackmd.io/_uploads/rJRXUf00n.png)

    4.2 修改你的 vue.config.js 增加 publicPath 這個屬性的值直接放專案名稱
    
    ![](https://hackmd.io/_uploads/HJ8oUMAAh.png)

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

6. 點選這個專案的 actions 然後直接選  set up a workflow yourself  開始創自己的 workflow
    
    ![](https://hackmd.io/_uploads/HyYNPfRC3.png)
    
    ![](https://hackmd.io/_uploads/rJJHDMCAh.png)

7. 再來就是裡面的 yaml 怎麼寫 可以照抄我下面寫的
    
```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  ）
 
![](https://hackmd.io/_uploads/S1BuOsMya.png)


 ( 開發分支放的是你原本 vue project 這裡是 main )    
  ![](https://hackmd.io/_uploads/H1wq3f0A2.png)

8. 來設定一下 github page settings -> pages 這邊選你要拿來做成 github pages 的 branch 
    
 ![](https://hackmd.io/_uploads/HJSI5MA0h.png)

以上基本上你的東西就會部屬上去了 之後基本上你每次只要 push 到指定 branch 它就會自己幫你更新
    
點選它給的網址即可拜訪自己的網站 展示一下我自己的成果 
    
![](https://hackmd.io/_uploads/SJEY5f002.png)

參考 ： 
    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
    
    