当前位置：首页 > news >正文

Github 自动化部署到GitHub Pages

news 2026/2/10 4:32:23

1.准备工作

新建仓库

在这里插入图片描述

新建项目

在这里插入图片描述

配置 vite.config.ts

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

name: Build and Deploy
# 监听 master 分支上的 push 事件
on:push:branches:- master
jobs:build-and-deploy:# 构建环境使用 ubunturuns-on: ubuntu-lateststeps:# 官方action, 将代码拉取到虚拟机- name: Checkoutuses: actions/checkout@v3with:persist-credentials: false# 安装node.js- name: Use Node.jsuses: actions/setup-node@v3with:node-version: "18.18.2"# 下载依赖、打包项目- name: Install and Buildrun: |yarn installyarn build# 部署- name: Deployuses: JamesIves/github-pages-deploy-action@v4.3.3with:# 项目配置的打包目录名称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 分支，可以看到文件更新了

在这里插入图片描述

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

在这里插入图片描述

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

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

Github 自动化部署到GitHub Pages

1.准备工作新建仓库新建项目配置 vite.config.ts base: ./,部署应用包时的基本URL，例：vue-cli 5.x 配置 publicPath 推送到远程仓库 2.配置 GitHub Token 点击 Settings -> Actions -> General 找到 Workflow permissions，选中第…...

编程日记 2023/11/6 5:37:49

Golang 串口通信

简介串口通信是一种常见的硬件通信方式，用于在计算机和外部设备之间传输数据。Golang（Go语言）作为一种高效、可靠的编程语言，提供了丰富的库和工具用于串口通信。本文将介绍如何使用Golang进行串口通信，包括串口配置…...

编程日记 2023/11/6 5:35:47

项目管理之如何识别并应对项目风险

项目风险管理是项目管理中不可忽视的环节，如何识别并应对项目的风险对于项目的成功实施至关重要。本文将介绍风险管理的流程、风险分解结构、定性及定量风险评估方法，以及消极和积极的风险应对策略，旨在帮助读者更好地理解和应对项目风险。 …...

编程日记 2023/11/6 5:34:46

vue封装独立组件：实现手写签名功能

目录第一章效果展示第二章准备工作 2.1 使用的工具vue-sign 2.1.1 安装 2.1.2 了解 2.1.3 参数说明第三章源代码第一章效果展示第二章准备工作 2.1 使用的工具vue-esign 2.1.1 安装 npm install vue-esign --save 2.1.2 了解兼容pc端和移动端有对应的参…...

编程日记 2023/11/6 5:32:45

图及谱聚类商圈聚类中的应用

背景在O2O业务场景中，有商圈的概念，商圈是业务运营的单元，有对应的商户BD负责人以及配送运力负责任。这些商圈通常是一定地理围栏构成的区域，区域内包括商户和用户，商圈和商圈之间就通常以道路、河流等围栏进行分隔。…...

编程日记 2023/11/6 5:30:40

npx 和 npm 区别

文章目录背景作用执行流程背景解决 npm 之前的执行包中的命令行需要先下载的问题，如果有多个不同版本的包就需要下载多次比如已经装了全局的 webpack 1.x 版本并且还要继续使用，还需要装个 webpack 4.x 使用的其相应功能,这个时候可以不装在全局&…...

编程日记 2023/11/6 5:29:39

HTML_案例1_注册页面

用纯html页面，不用css画一个注册页面。最终效果如下： html页面代码如下： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>注册页面</title> </head>…...

编程日记 2023/11/6 5:28:38

Adobe After Effects 2024（Ae2024）在新版本中的升级有哪些？

After Effects 2024是Adobe公司推出的一款视频处理软件，它适用于从事设计和视频特技的机构，包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。通过After Effects，用户可以高效且精确地创建无数种引人注目的动态图形和震撼人心…...

编程日记 2023/11/6 5:27:37

超越 GLIP! | RegionSpot: 识别一切区域，多模态融合的开放世界物体识别新方法

本文的主题是多模态融合和图文理解，文中提出了一种名为RegionSpot的新颖区域识别架构，旨在解决计算机视觉中的一个关键问题：理解无约束图像中的各个区域或patch的语义。这在开放世界目标检测等领域是一个具有挑战性的任务。关于这一块&…...

编程日记 2023/11/6 5:26:36

webgoat-（A1）injection

SQL Injection (intro) SQL 命令主要分为三类： 数据操作语言 （DML）DML 语句可用于请求记录 （SELECT）、添加记录 （INSERT）、删除记录 （DELETE） 和修改现有记录 &#xff…...

编程日记 2023/11/6 5:25:35

文章目录前言前言 #include <reg52.h> #include <intrins.h>sbit key_s2P3^0; sbit flagP3^7;void delay(unsigned int z){unsigned int x,y;for(xz;x>0;x--)for(y114;y>0;y--); }void int_init(){EA1;EX11;IT11;}void main(){int_init();while(1){if (key…...

编程日记 2023/11/6 5:24:34

Canvas 梦幻树生长动画

canvas可以制作出非常炫酷的动画，以下是一个梦幻树的示例。效果图源代码 <!DOCTYPE> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>梦幻数生长动画</title&…...

编程日记 2023/11/6 5:23:33

Unity之UI、模型跟随鼠标移动（自适应屏幕分辨率、锚点、pivot中心点）

一、效果 UI跟随鼠标移动，动态修改屏幕分辨率、锚点、pivot等参数也不会受到影响。同时脚本中包含3d物体跟随ui位置、鼠标位置移动二、屏幕坐标、Canvas自适应、锚点、中心点在说原理之前我们需要先了解屏幕坐标、Canvas自适应、锚点、中心的特性和之间的关系。 1.屏幕坐标…...

编程日记 2023/11/6 5:22:32

竞赛深度学习猫狗分类 - python opencv cnn

文章目录 0 前言1 课题背景2 使用CNN进行猫狗分类3 数据集处理4 神经网络的编写5 Tensorflow计算图的构建6 模型的训练和测试7 预测效果8 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 **基于深度学习猫狗分类 ** 该项目较为新颖&a…...

编程日记 2023/11/6 5:21:32

S4.2.4.7 Start of Data Stream Ordered Set (SDS)

一本章节主讲知识点 1.1 xxx 1.2 sss 1.3 ddd 二本章节原文翻译 2.1 SDS 数据流开始有序集 SDS 代表传输的数据类型从有序集转为数据流。它会在 Configuration.Idle，Recovery.Idle 和 Tx 的 L0s.FTS 状态发送。Loopback 模式下，主机允许发送 SDS。…...

编程日记 2023/11/6 5:20:31

CentOS操作系统的特点

CentOS操作系统的特点如下： 免费开源：CentOS是一个免费开源的操作系统，完全免费，无需花费任何成本。稳定性高：CentOS以其出色的稳定性和安全性而闻名。它是一个基于Red Hat Enterprise Linux（RHEL&#x…...

编程日记 2023/11/6 5:19:30

Go基础（待更新）

Go基础（待更新） 参考Go 语言教程文章目录 Go基础（待更新）一、基本语法1、格式化输出2、声明并赋值1）单变量赋值2）多变量赋值二、math工具包的使用三、函数1、参数传递1）普通传递2&#xff09…...

编程日记 2023/11/6 5:17:27

二、Hadoop分布式系统基础架构

1、分布式分布式体系中，会存在众多服务器，会造成混乱等情况。那如何让众多服务器一起工作，高效且不出现问题呢？ 2、调度 （1）架构在大数据体系中，分布式的调度主要有2类架构模式&#xff1a…...

编程日记 2023/11/6 5:16:26

数据结构（超详细讲解！！）第二十一节特殊矩阵的压缩存储

1.压缩存储的目标值相同的元素只存储一次压缩掉对零元的存储，只存储非零元特殊形状矩阵： 是指非零元（如值相同的元素）或零元素分布具有一定规律性的矩阵。如： 对称矩阵上三角矩阵下三角矩阵对角矩阵准…...

编程日记 2023/11/6 5:15:24

Python最强自动化神器Playwright！再也不用为爬虫逆向担忧了！

版权说明：本文禁止抄袭、转载，侵权必究！目录一、简介+使用场景二、环境部署（准备）三、代码生成器（优势）四、元素定位器（核心）五、追踪查看器（辅助）六、权限控制与认证（高级）七、其他重要功能（进阶）八、作者Info一、简介+使用场景 Playwright是什么？来自Chat…...

编程日记 2023/11/6 5:11:18

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13