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

Github 自动化部署到GitHub Pages

news 2026/2/10 13:42:07

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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

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

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2026/1/30 8:46:45

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/9/18 19:34:22

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

编程新知 2026/1/31 12:03:23

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2026/1/25 13:32:52

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2026/1/31 4:26:17

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2026/1/31 6:01:08