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

Github 自动化部署到GitHub Pages

news 2026/2/10 5:29:39

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

web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段&#xff1a; 构建阶段&#xff08;Build Stage&#xff09;&#xff1a…...

编程新知 2025/8/12 16:28:43

Python爬虫实战：研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代，互联网上存在着海量的信息资源。RSS（Really Simple Syndication）作为一种标准化的信息聚合技术，被广泛用于网站内容的发布和订阅。通过 RSS，用户可以方便地获取网站更新的内容，而无需频繁访问各个网站。 然而，互联网…...

编程新知 2025/8/18 9:54:31

招商蛇口 | 执笔CID，启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

编程新知 2026/1/26 8:13:33

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2026/2/6 13:49:41

【Linux手册】探秘系统世界：从用户交互到硬件底层的全链路工作之旅

目录 前言 操作系统与驱动程序 是什么&#xff0c;为什么 怎么做 system call 用户操作接口 总结 前言 日常生活中&#xff0c;我们在使用电子设备时&#xff0c;我们所输入执行的每一条指令最终大多都会作用到硬件上&#xff0c;比如下载一款软件最终会下载到硬盘上&am…...

编程新知 2026/2/6 5:39:10

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/7 17:45:38

Ubuntu系统多网卡多相机IP设置方法

目录 1、硬件情况 2、如何设置网卡和相机IP 2.1 万兆网卡连接交换机&#xff0c;交换机再连相机 2.1.1 网卡设置 2.1.2 相机设置 2.3 万兆网卡直连相机 1、硬件情况 2个网卡n个相机 电脑系统信息&#xff0c;系统版本&#xff1a;Ubuntu22.04.5 LTS&#xff1b;内核版本…...

编程新知 2026/2/4 16:40:55

java高级——高阶函数、如何定义一个函数式接口类似stream流的filter

java高级——高阶函数、stream流 前情提要文章介绍一、函数伊始1.1 合格的函数1.2 有形的函数2. 函数对象2.1 函数对象——行为参数化2.2 函数对象——延迟执行 二、 函数编程语法1. 函数对象表现形式1.1 Lambda表达式1.2 方法引用&#xff08;Math::max&#xff09; 2 函数接口…...

编程新知 2026/2/9 5:15:34

如何通过git命令查看项目连接的仓库地址？

要通过 Git 命令查看项目连接的仓库地址&#xff0c;您可以使用以下几种方法&#xff1a; 1. 查看所有远程仓库地址 使用 git remote -v 命令&#xff0c;它会显示项目中配置的所有远程仓库及其对应的 URL&#xff1a; git remote -v输出示例&#xff1a; origin https://…...

编程新知 2026/1/14 22:57:49