VuePress + Github 自動化部署

本文着重講 GitHub 部署，創建 VuePress 官方文檔比較詳細，就不說啦。

創建VuePress項目

https://v2.vuepress.vuejs.org/zh/

當然呢，可以參考我的項目

https://github.com/AmosWang0626/AmosWang0626.github.io

使用 yarn 命令打包部署：

# install
yarn install

# start
yarn dev

# build
yarn build

Github 自動化部署

步驟概覽

1. 創建個人維度的 Github Token（後邊自動化部署 push 代碼需要）
2. 創建項目維度的變量，值就是上一步生成的密鑰
3. 創建流水線，自動化打包發佈
4. 打包發佈完成，切換到 gh-pages 分支，等站點自動化部署完，就能訪問啦～

第一步：創建 Token

第二步：創建項目變量

這裏創建項目維度的變量，下一步創建的腳本里邊要用到。

名字就取 ACCESS_TOKEN ，值就是上一步生成的密鑰。

第三步：創建流水線，自動化打包發佈

這裏前端項目是 node.js 技術棧，就搜索 node 了

# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs

name: Node.js CI

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      - run: npm install yarn -g
      - run: yarn install
      - run: yarn build
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          token: ${{ secrets.ACCESS_TOKEN }}
          branch: gh-pages
          folder: dist

相比自動生成的，只改了這些地方。

保存之後，就會自己自動化部署了。

這裏常見的問題是push的時候權限不足，遇到這種情況，再檢查下第一步、第二步即可。

第四步：切換分支，自動化部署

進入 Actions 查看進度，等 deploy 完成就能訪問了。

刷新瀏覽器，可能有幾秒緩存，不慌，多刷幾次就好了。

相關問題：

Deploy 時報 403，也即權限不足

1. 檢查個人維度的 Github Token，Token 的名字隨意
2. 檢查項目維度的變量設置，變量的名字一定要和 node 腳本里的一致

<!---->

1. 1. 例如：ACCESS_TOKEN

Invalid username or password.

這種就是 token 更新了，需要換下 ACCESS_TOKEN 的值。

博客部署完成，頁面樣式錯誤

也即靜態文件加載不到了。

這是因爲部署的站點不在個人 xxx.github.io 下邊，請求路徑例如 xxx.github.io/xxx_blog

• 靜態文件的路徑也需要通過 xxx.github.io/xxx_blog/assets/xxx.css 這樣訪問。
• 但默認不配置 base 的時候，是直接在根域名下訪問靜態文件的，xxx.github.io/assets/xxx.css 這種。
• 配置base的時候，兩端的 / 不能少哦。