GitHub Actions自动发布Page页流程

理子
206 阅读2分钟
  1. 创建一个vue项目用于测试
# npm 7+，需要添加额外的 --：
npm create vite@latest my-vue-app -- --template vue
  1. 创建一个名为hello的git仓库并提交代码
echo "# hello" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/你的github账户名/hello.git
git push -u origin main
  1. 访问仓库网站
  • 创建gh-pages分支，只保留一个index.html文件，内容为666；
  • 在此分支下，github会自动执行actions发布index.html，访问即可看到666；
  • 也可以在Settings->Pages->Branch下自行绑定index.html所在的分支和目录；
  • 地址：https://你的github账户名.github.io/hello/
  1. 自动发布
  • 目标：更改main分支的内容后自动构建并把dist内容放到gh-pages分支
  • 点击Actions->Skip this and set up a workflow yourself->Commit changes...
name: CI Github Pages
on:
  #监听push操作
  push:
    branches:
      - main # 这里只配置了main分支，所以只有推送main分支才会触发以下任务
permissions:
  contents: write   
jobs:
  # 任务ID
  build-and-deploy:
    # 运行环境
    runs-on: ubuntu-latest
    # 步骤
    steps:
      # 官方action，将代码拉取到虚拟机
      - name: Checkout 🛎️
        uses: actions/checkout@v4

      - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
        run: |
          npm ci
          npm run build

      - name: Deploy 🚀
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages # 部署后提交到那个分支
          folder: dist # 这里填打包好的目录名称
  1. 更改main分支vite.config.js文件 添加一行base:'/hello/'或base:'./'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  base:'/hello/',
})
  1. 推送main分支进行测试：点击Actions会发现有任务执行，刷新，等到2个任务完成后访问地址。

文章参考：

avatar
文章
阅读
粉丝