2025-11-22- 使用 GitHub Actions 自动部署基于vite的项目到 GitHub Pages

1
name: Deploy to GitHub Pages
2

3
on:
4
  push:
5
    branches: [main]
6
  workflow_dispatch:
7

8
permissions:
9
  contents: read
10
  pages: write
11
  id-token: write
12

13
jobs:
14
  deploy:
15
    environment:
16
      name: github-pages
17
      url: ${{ steps.deployment.outputs.page_url }}
18
    runs-on: ubuntu-latest
19
    steps:
20
      - name: Checkout
21
        uses: actions/checkout@v4
22

23
      - name: Setup Bun
24
        uses: oven-sh/setup-bun@v1
25
        with:
26
          bun-version: latest
27

28
      - name: Install dependencies
29
        run: bun install
30

31
      - name: Build
32
        run: bun run build
33

34
      - name: Setup Pages
35
        uses: actions/configure-pages@v5
36

37
      - name: Upload artifact
38
        uses: actions/upload-pages-artifact@v3
39
        with:
40
          path: "./dist"
41

42
      - name: Deploy to GitHub Pages
43
        id: deployment
44
        uses: actions/deploy-pages@v4

2. 配置 vite.config.ts 的 base#

打开 vite.config.ts

1
import { defineConfig } from 'vite'
2
import react from '@vitejs/plugin-react'
3

4
export default defineConfig({
5
  plugins: [react()],
6
  base: '/BDdraw_DEV/',   // 必须和仓库名完全一致！大小写也要一样
7
})

如果想让它在本地开发和 GitHub Pages 都正常，可以写成动态 base：

1
export default defineConfig({
2
  plugins: [react()],
3
  base: process.env.NODE_ENV === 'production' ? '/BDdraw_DEV/' : '/',
4
})

3. GitHub 仓库设置 Pages 为 Actions 模式#

进入仓库 → Settings → Pages（左侧菜单）
Build and deployment → Source 选 GitHub Actions
保存

4. 提交代码触发第一次部署#

1
git add .
2
git commit -m "chore: 新建 GitHub Actions 部署工作流"
3
git push origin main

然后去仓库 → Actions 标签页，就能看到正在跑的 “Deploy to GitHub Pages” 工作流。

成功后可以前往对应的 GitHub Pages 地址查看效果

只要 push 到 main 分支，GitHub Actions 就会自动触发工作流，实现自动部署。

如果是私有仓库，需要 GitHub Pro 才能开 Pages

分享到社交平台

将本文分享给你的朋友们

2025-11-22- 使用 GitHub Actions 自动部署基于vite的项目到 GitHub Pages

https://firefly.cuteleaf.cn/posts/2025-11-22-使用-github-actions-自动部署基于vite的项目到-github-pages/

作者

Zhongye

发布于

2025-11-23

CC BY-NC-SA 4.0

2025-11-23-Undo/Redo机制具体实现

2025-11-22- 关于前端包管理器npm,pnpm,yarn和bun以及我为何选择后者

音乐

音乐

0.前置条件#

1. 创建 GitHub Actions 工作流#

2. 配置 vite.config.ts 的 base#

3. GitHub 仓库设置 Pages 为 Actions 模式#

4. 提交代码触发第一次部署#

分享到社交平台

评论

音乐

目录