使用GitHub的Action，实现前端静态页面自动部署（保姆级教程）在用到github做开源分享的时候，前端的纯静态页

在用到github做开源分享的时候，前端的纯静态页面展示，可以使用GitHub Pages功能，充当静态资源服务器，用来展示网站效果。为了提高效率，用GitHub的Action，来执行自动化部署

1. 创建一个分支名称为：gh-pages

2.创建tokens

点击头像 Setting-> Developer Setting > Personal access tokens

点击Generate new token (classic)

名称，有效期，仓库权限(repo,workflow),生成tokens，复制秘钥(可以复用所有项目部署)

3.在项目的Setting设置

3-1 选择Security-> actions

命名name: GH_PAGE_ACTION_TOKEN
复制刚刚创建的token到secre文本框下面
添加确认

3-2.Pages目录的设置

设置Build and deployment
设置Branch

3-3 Actions目录的设置

选择 Read and write permissions
选择 Allow GitHub Actions to create and approve pull requests

4. 项目配置

4-1 创建自动化构建脚本

在项目根目录创建文件.github/workflows/main.yml
写入配置代码主要功能是

  1：maste分支触发构建
  
  2: 拉取master分支代码
  
  3： 指定node版本
  
  4：执行构建脚本npm run install && npm run bulild
  
  5: 拉取打包之后的dist文件到gh-pages分支下面

name: vite-vue3-admin
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
    - name: Checkout
      uses: actions/checkout@master # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
      with:
        persist-credentials: false
    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16.18.0'
    - name: Install and Build
      run: |
        npm install
        npm run build
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@v4
      with: 
        ACCESS_TOKEN: ${{ secrets.GH_PAGE_ACTION_TOKEN }}
        BRANCH: gh-pages
        FOLDER: dist
        BUILD_SCRIPT: npm install && npm run build

4-2. 配置打包的公共路径

docs\.vitepress\config.js配置

打包后会增加基础路径：

4-3 推送代码，自动触发构建

每次推送的时候，都可以在Actions下面就可以看到构建的进度和结果

4-4 访问静态资源

https://git账号名称.github.io/你的仓库名/

总结

GitHub Action做的流程就是帮你打包代码，然后把静态资源复制到你设置GitHub Page分支下面。既手动操作的步骤，用机器帮你做。很简单，很舒服^_^

参考git仓库：github.com/WangZhenHao…

使用GitHub的Action，实现前端静态页面自动部署（保姆级教程）