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

Github 自动化部署到GitHub Pages

news 2026/2/10 8:55:26

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页面&#xff0c;不用css画一个注册页面。 最终效果如下&#xff1a; html页面代码如下&#xff1a; <!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公司推出的一款视频处理软件&#xff0c;它适用于从事设计和视频特技的机构&#xff0c;包括电视台、动画制作公司、个人后期制作工作室以及多媒体工作室。通过After Effects&#xff0c;用户可以高效且精确地创建无数种引人注目的动态图形和震撼人心…...

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

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

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

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

webgoat-（A1）injection

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

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

51单片机-中断

文章目录 前言 前言 #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可以制作出非常炫酷的动画&#xff0c;以下是一个梦幻树的示例。 效果图 源代码 <!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 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; **基于深度学习猫狗分类 ** 该项目较为新颖&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&#xff0c;Recovery.Idle 和 Tx 的 L0s.FTS 状态发送。Loopback 模式下&#xff0c;主机允许发送 SDS。…...

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

CentOS操作系统的特点

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

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

Go基础（待更新）

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

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

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

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

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

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

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

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

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

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

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

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/8 4:37:13

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

编程新知 2025/6/11 15:21:26

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2026/1/31 14:56:22

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2026/2/2 2:47:37

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波（Mean Shift Filtering）函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

编程新知 2026/1/20 12:53:30

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2026/1/9 8:59:09

PHP 8.5 即将发布：管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...

编程新知 2026/1/31 8:53:50