Github 自动化部署到GitHub Pages

1.准备工作

新建仓库

新建项目

配置 vite.config.ts

typescript 复制代码
base: './',

部署应用包时的基本URL,例:vue-cli 5.x 配置 publicPath

推送到远程仓库

2.配置 GitHub Token

点击 Settings -> Actions -> General

找到 Workflow permissions,选中第一项并保存

工作流默认是没有推送代码的权限,配置选中第一项,工作流才具有读取和写入权限

3.配置 Actions 工作流

点击 Actions -> set up a workflow yourself

新建的 main.yml 文件名可以自定义,例:ci.yml

将以下配置填充到 ci.yml

yaml 复制代码
name: Build and Deploy
# 监听 master 分支上的 push 事件
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    # 构建环境使用 ubuntu
    runs-on: ubuntu-latest
    steps:
      # 官方action, 将代码拉取到虚拟机
      - name: Checkout
        uses: actions/checkout@v3
        with:
          persist-credentials: false

      # 安装node.js
      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18.18.2"

      # 下载依赖、打包项目
      - name: Install and Build
        run: |
          yarn install
          yarn build

      # 部署
      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4.3.3
        with:
          # 项目配置的打包目录名称
          folder: dist
          # 部署后提交到的分支
          branch: static-pages

注意:

branches:根据自己仓库分支名进行修改,如 main

node-version:根据项目支持的 node 版本进行修改

foolder:根据项目打包目录名称进行修改

点击右上角 Commit Changes...,提交至仓库

仓库根目录下会生成一个 .github/workflows 文件夹

4.查看 Actions 工作流

点击 Actions 进入工作流页面

点击 Create ci.yml,可查看各个步骤的执行情况

5.配置 GitHub Pages

工作流运行成功之后, 会自动生成一个 static-pages 分支

进入 static-pages 分支

点击 Settings -> Pages,找到 Build and deployment 菜单下的 Branch 选项,选择 static-pages 分支并保存

等待1分钟左右刷新页面,会出现线上地址

访问页面

6.自动化部署

更新一些内容,并提交代码

等待工作流运行完成

查看 static-pages 分支, 可以看到文件更新了

再次访问页面,页面自动更新了

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。

相关推荐
物联网老王3 分钟前
Ubuntu Linux Cursor 安装与使用一
linux·运维·ubuntu
艾伦_耶格宇1 小时前
【ACP】阿里云云计算高级运维工程师--ACP
运维·阿里云·云计算
一位摩羯座DBA2 小时前
Redhat&Centos挂载镜像
linux·运维·centos
油泼辣子多加3 小时前
2025年06月30日Github流行趋势
github
ai小鬼头3 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
cui_win3 小时前
【网络】Linux 内核优化实战 - net.core.flow_limit_table_len
linux·运维·网络
风清再凯3 小时前
自动化工具ansible,以及playbook剧本
运维·自动化·ansible
深圳安锐科技有限公司3 小时前
深圳安锐科技发布国内首款4G 索力仪!让斜拉桥索力自动化监测更精准高效
运维·安全·自动化·自动化监测·人工监测·桥梁监测·索力监测
猫头虎4 小时前
猫头虎 AI工具分享:一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具:Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
SKYDROID云卓小助手4 小时前
无人设备遥控器之自动调整编码技术篇
人工智能·嵌入式硬件·算法·自动化·信号处理