​ 有个闲暇之余放松写写的VUE项目。目前还在纯静态设计阶段，刚好可以拿来借助github actions和github pages学习CI/CD。

image-20250818155459341

image-20250818155516597

image-20250818155535379

CI/CD简介

CI/CD 概念

  1. CI（Continuous Integration，持续集成）
    • 目的：让开发者频繁地把代码合并到主分支，并自动验证代码质量。
    • 流程：
      1. 开发者提交代码到版本控制（Git）。
      2. 自动触发构建、编译、测试。
      3. 发现问题及时反馈，避免集成冲突。
    • 优势：
      • 提高代码质量
      • 及时发现问题
      • 保持主分支始终可用
  2. CD（Continuous Delivery/Deployment，持续交付/部署）
    • 持续交付（Continuous Delivery）：
      • 在 CI 基础上，把构建产物自动部署到测试或预生产环境。
      • 人工确认后可发布到生产环境。
    • 持续部署（Continuous Deployment）：
      • 自动将构建产物直接部署到生产环境，无需人工干预。
    • 优势：
      • 加快产品迭代速度
      • 降低手动部署出错风险

CI/CD 就是“提交就自动构建、测试、部署”，让开发流程自动化、可靠、快速。

我这里主要是目前还主要是前端的设计阶段，所以没有测试这一步骤，但是总体还是满足提交 → 构建 → 部署 的闭环，算作一个完整 CI/CD。

实现过程

个人设置中配置personal access token

个人设置

位置：Settings/Developer Settings/Personal access tokens (classic)

创建一个新的token即可，需要包含仓库的访问权限以及workflow权限。

image-20250818160556027

仓库设置中配置secrets and variables

仓库设置（仓库里面的）

位置：Settings/Secrets and vriables / Actions/ Repository secrets

添加一个token，内容是刚刚在个人设置中创建的access token。

编写自动化yaml

在Actions栏new一个workflow。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
name: Vue CI/CD

on:
  push:
    branches:
      - main   # 当推送到 main 分支时触发
  pull_request:

jobs:
  build:
    runs-on: ubuntu-latest 

    steps: 
      - name: Checkout code
        uses: actions/checkout@v4

      - name: Use Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm install

      - name: Run build
        run: npm run build

      - name: Upload production-ready build files
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Download build files
        uses: actions/download-artifact@v4
        with:
          name: dist
          path: dist

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.PERSONAL_TOKEN }}
          publish_dir: ./dist

test run !

​ 保存好这个文件之后就会自动进行一次action，因为这个文件也在main分支，触发方式也是main分支检测。

image-20250818161149348

然后就可以通过自己的github域名+仓库访问了regenm.github.io/Vuefarm。（大小写敏感），如果之前用过githubpages可能会有冲突，例如博客等等。因为域名只有一个，url路径相同的话就会有冲突，这里暂时还没遇到。