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

利用GitHub Pages快速部署前端框架静态网页

news 来源：原创 2025/7/15 9:44:13

文章目录

- 前言
- GitHub Pages 来部署前端框架（Vue 3 + Vite）项目
- - 1、配置 GitHub Pages 部署
  - 2、将项目推送到 GitHub
  - 3、部署到 GitHub Pages
  - 4、访问部署页面
  - 5、修改代码后的更新部署顺序

前言

可以先参考：

使用 GitHub Pages 快速部署静态网页: https://blog.csdn.net/m0_64289188/article/details/146493123

GitHub Pages 来部署前端框架（Vue 3 + Vite）项目

1、配置 GitHub Pages 部署

安装 gh-pages 包：
这个包用于将构建好的项目推送到 GitHub 仓库的 gh-pages 分支。
```
npm install --save-dev gh-pages
```

修改 vite.config.js 配置：
在 vite.config.js 中配置 base 路径，以便正确处理部署时的路径：

export default defineConfig({base: '/my-vue-project/', // 这里的 'my-vue-project' 为你的 GitHub 仓库名称plugins: [vue()]
});

修改 package.json 配置：
在 package.json 中添加 homepage 字段和部署脚本：
```
"scripts": {"deploy": "gh-pages -d dist"
}
```
将 <your-username> 替换为你的 GitHub 用户名。

当运行 npm run deploy 其实就是运行 gh-pages -d dist。

2、将项目推送到 GitHub

在 GitHub 创建一个新的仓库（例如 my-vue-project）。

初始化 Git 仓库并推送本地代码到 GitHub：

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/<your-username>/my-vue-project.git
git branch -M main
git push -u origin main

3、部署到 GitHub Pages

运行以下命令进行部署：
```
npm run build
npm run deploy
```
这会将 dist 文件夹推送到仓库的 gh-pages 分支。

4、访问部署页面

完成部署后，访问以下 URL 来查看你的项目：

https://<your-username>.github.io/my-vue-project/

5、修改代码后的更新部署顺序

简单来说，每次修改代码后的完整流程是：

npm run build        # 构建最新静态文件git add .            # 添加修改到 Git
git commit -m "msg"  # 提交修改
git push origin main # 推送代码到 main 分支npm run deploy       # 部署到 gh-pages 分支

❤觉得有用的可以留个关注❤

利用GitHub Pages快速部署前端框架静态网页

文章目录前言GitHub Pages 来部署前端框架（Vue 3 Vite）项目1、配置 GitHub Pages 部署2、将项目推送到 GitHub3、部署到 GitHub Pages4、访问部署页面5、修改代码后的更新部署顺序前言可以先参考： 使用 GitHub Pages 快速部署静态网页: …...

编程日记 2025/7/15 9:44:13

前端性能优化思路_场景题

20 万人同时在直播间打赏，前端优化需要考虑高并发、性能优化、流畅体验等问题，涉及 WebSocket 处理、消息去抖、虚拟列表优化、动画优化、CDN 加速等多个方面。 WebSocket 高并发优化 （1）使用 WebSocket 替代轮询轮询&#xf…...

编程日记 2025/7/14 9:15:22

45 55跳跃游戏解题记录

先是55跳跃游戏，暴力解法会怎样？会超出时间限制，而且有很多细节要注意： func canJump(nums []int) bool {// 处理空数组情况，当nums只剩一个元素时，nums[i:]导致越界。if len(nums) 0 {return false}// 如…...

编程日记 2025/7/15 9:21:02

一个简单的用C#实现的分布式雪花ID算法

雪花ID是一个依赖时间戳根据算法生成的一个Int64的数字ID，一般用来做主键或者订单号等。以下是一个用C#写的雪花ID的简单实现方法 using System; using System.Collections.Concurrent; using System.Diagnostics;public class SnowflakeIdGenerator {// 配置常量p…...

编程日记 2025/7/15 9:33:42

16个气象数据可视化网站整理分享

好的！以下是关于“16个气象数据可视化网站整理分享”的软文： 16个气象数据可视化网站整理分享气象数据可视化已成为现代气象研究、决策支持以及公众天气服务的重要组成部分。从天气预报到气候变化监测，全球许多气象数据可视化平台为专业人士…...

编程日记 2025/7/11 18:25:12

一周学会Flask3 Python Web开发-SQLAlchemy数据迁移migrate

锋哥原创的Flask3 Python Web开发 Flask3视频教程： 2025版 Flask3 Python web开发视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 模型类(表)不是一成不变的，当你添加了新的模型类，或是在模型类中添加了新的字段，甚至是修改…...

编程日记 2025/7/14 10:23:22

[原创](Modern C++)现代C++的关键性概念: 如何利用多维数组的指针安全地遍历所有元素

[作者] 常用网名: 猪头三出生日期: 1981.XX.XX 企鹅交流: 643439947 个人网站: 80x86汇编小站编程生涯: 2001年~至今[共24年] 职业生涯: 22年开发语言: C/C、80x86ASM、Object Pascal、Objective-C、C#、R、Python、PHP、Perl、开发工具: Visual Studio、Delphi、XCode、C …...

编程日记 2025/7/13 7:52:20

本地化智能运维助手：基于 LangChain 数据增强和 DeepSeek-R1 的K8s运维文档检索与问答系统 Demo

写在前面博文内容为基于 LangChain 数据增强和 Ollams 本地部署 DeepSeek-R1实现 K8s运维文档检索与问答系统 Demo通过 Demo 对 LEDVR 工作流， 语义检索有基本认知理解不足小伙伴帮忙指正 😃,生活加油我看远山，远山悲悯持续分享技术干货…...

编程日记 2025/7/9 4:26:31

中间件框架漏洞攻略

中间件（英语：Middleware）是提供系统软件和应⽤软件之间连接的软件，以便于软件各部件之间的沟通。中间件处在操作系统和更⾼⼀级应⽤程序之间。他充当的功能是：将应⽤程序运⾏环境与操作系统隔离，从⽽实…...

编程日记 2025/7/11 8:21:10

1. 卸载旧版本（如有）在安装新版本前，建议先卸载旧版本： sudo apt remove docker docker-engine docker.io containerd runc 2. 安装依赖包更新软件包索引并安装必要的依赖： sudo apt update sudo apt install -y ca-certificates curl gnupg lsb-release 3. 添加 Do…...

编程日记 2025/7/13 21:15:11

Another Redis Desktop Manager下载安装使用

🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息文章目录 Another Redis Desktop Manager下载安装使用…...

编程日记 2025/7/9 9:49:00

GitLab 中文版17.10正式发布，27项重点功能解读【一】

GitLab 是一个全球知名的一体化 DevOps 平台，很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab 是 GitLab 在中国的发行版，专门为中国程序员服务。可以一键式部署极狐GitLab。学习极狐GitLab 的相关资料： 极狐GitLab 官网极狐…...

编程日记 2025/7/15 1:23:12

mysql慢查询日志

在 MySQL 中，慢查询日志（Slow Query Log）用于记录执行时间超过指定阈值的 SQL 语句。通过分析慢查询日志，可以优化数据库性能。以下是查看和配置 MySQL 慢查询日志的详细步骤： 1. 检查慢查询日志是否已启用登录 MySQ…...

编程日记 2025/7/15 9:43:10

unity 截图并且展现在UI中

using UnityEngine; using UnityEngine.UI; using System.IO; using System.Collections.Generic; using System; using System.Collections;public class ScreenshotManager : MonoBehaviour {[Header("UI 设置")]public RawImage latestScreenshotDisplay; // 显示…...

编程日记 2025/7/9 5:09:22

Linux上位机开发实践（MPP平台的核心构成）

编程日记 2025/7/15 5:22:25

Hosts文件与DNS的关系：原理、应用场景与安全风险

目录引言 Hosts文件与DNS的基本概念 2.1 什么是Hosts文件？ 2.2 什么是DNS？ Hosts文件与DNS的关系 Hosts文件的应用场景 4.1 本地开发与测试 4.2 屏蔽广告与恶意网站 4.3 绕过DNS污染或劫持 Hosts文件的优势 5.1 解析速度快 5.2 不受DNS缓存影…...

编程日记 2025/7/10 7:22:04

Stable Diffusion vue本地api接口对接，模型切换, ai功能集成开源项目 ollama-chat-ui-vue

1.开启Stable Diffusion的api服务编辑webui-user.bat 添加 –api 开启api服务，然后保存启动就可以了 2.api 文档地址 http://127.0.0.1:7860/docs3. 文生图接口地址 /sdapi/v1/txt2img //post 请求入参 {enable_hr: false, // 开启高清hrdenoising_stre…...

编程日记 2025/7/9 16:20:30

【含文档+源码】基于SpringBoot的过滤协同算法之网上服装商城设计与实现

项目介绍本课程演示的是一款基于SpringBoot的过滤协同算法之网上服装商城设计与实现，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署…...

编程日记 2025/7/15 9:36:29

优化 Docker 构建之方法（Methods for Optimizing Docker Construction）

优化 Docker 构建之方法优化 Docker 构建不仅是为了提高效率，它还是降低部署成本、确保安全性和保持跨环境一致性的有效方法。每个层、依赖项和配置选择都会影响镜像的大小、安全性和可维护性。大型镜像部署速度较慢且消耗更多资源，这会增加成本&#…...

编程日记 2025/7/11 11:03:28

谈谈空间复杂度考量，特别是递归调用栈空间消耗？

空间复杂度考量是算法设计的核心要素之一，递归调用栈的消耗问题在前端领域尤为突出。以下结合真实开发场景进行深度解析： 一、递归调用栈的典型问题 1. 深层次DOM遍历的陷阱 // 危险操作：递归遍历未知层级的DOM树 function countDOMNode…...

编程日记 2025/7/10 20:50:15

四川省汽车加气站操作工备考题库及答案分享

1.按压力容器的设计压力分为（ ）个压力等级。 A. 三 B. 四 C. 五 D. 六答案：B。解析：按压力容器的设计压力分为低压、中压、高压、超高压四个压力等级。 2.缓冲罐的安装位置在天然气压缩机（ ）。 A. 出口处 …...

编程日记 2025/7/15 9:19:31

《探秘SQL的BETWEEN：解锁数据范围查询的深度奥秘》

在数据的广袤宇宙中，结构化查询语言（SQL）宛如一座精密的导航系统，引导我们穿越数据的浩瀚星河，精准定位所需信息。其中，BETWEEN作为SQL的关键工具之一，以其独特的能力，在数据的海洋里…...

编程日记 2025/7/15 4:58:58

AppArmor 使用说明

目录一：AppArmor 功能介绍二：AppArmor 配置介绍1、AppArmor 配置文件存放路径2、AppArmor 配置文件命名规则三： AppArmor 工作模式1、AppArmor 两种工作模式2、查看当前进程的工作模式3、给指定进程切换工作模式4、重新加载配置文件生效四…...

编程日记 2025/7/11 14:48:59

Linux的一些常见指令

一、ls指令语法： ls (选项) 功能： ls可以查看当前目录下的所有文件和目录。常用选项： -a:列出目录下的所有文件，包括以点（.）开头的隐含文件。-d:将目录像文件一样显示，不显示其下的文件。…...

编程日记 2025/7/15 9:39:57

MATLAB中getfield函数用法

目录语法说明示例访问标量结构体的字段嵌套结构体的字段结构体数组元素的字段嵌套结构体数组的索引字段的元素 getfield函数的功能是结构体数组字段。语法 value getfield(S,field) value getfield(S,field1,...,fieldN) value getfield(S,idx,field1,..…...

编程日记 2025/7/15 8:58:07

算法｜河马优化算法原理，公式，应用，算法改进及研究综述，matlab代码

以下是关于河马优化算法（Hippopotamus Optimization Algorithm, HO）的完整综述，包含原理、公式、应用场景、改进方向及可直接运行的 Matlab 完整代码。一、算法原理河马优化算法（HO）由Amiri等人于2024年提出，是受河马群体行为启发的元启发式算法，其核心基于以下三阶段行…...

编程日记 2025/7/15 9:34:18

Oracle到MySQL实时数据互通：透明网关跨库查询终极方案

技术架构概述节点类型IP示例Oracle数据库172.18.0.11透明网关节点192.168.5.20MySQL数据库10.10.8.100 提示：透明网关支持部署在Oracle服务器实现集中式管理一、MySQL环境准备 1. ODBC驱动部署从MySQL官网获取对应版本的ODBC驱动： # 企业版推荐使…...

编程日记 2025/7/10 23:57:01

BAPLIE船图文件：EDI 核心字段与应用场景解析

BAPLIE（Bay Plan/Stowage Plan Occupied and Empty Locations Message）作为EDIFACT国际报文标准（D96A版本）的核心成员，是集装箱海运领域实现船舶配载数字化的关键工具。其通过结构化数据精确描述集装箱在船舶上的物理位…...

编程日记 2025/7/11 16:37:43

C#中获取字节数据的高字节和低字节

字节顺序(Endianness)： 1.小端序(Little-Endian)：低字节在前（x86架构） 2.大端序(Big-Endian)：高字节在前（网络字节序） 特性小端序（Little-Endian）大端序（B…...

编程日记 2025/7/11 23:30:43

26考研——查找_树形查找_二叉排序树（BST）（7）

408答疑文章目录三、树形查找二叉排序树（BST）二叉排序树中结点值之间的关系二叉树形查找二叉排序树的查找过程示例向二叉排序树中插入结点插入过程示例构造二叉排序树的过程构造示例二叉排序树中删除结点的操作情况一：被删除结点是叶结点…...

编程日记 2025/7/11 8:11:17

OpenCV图像拼接（5）图像拼接模块的用于创建权重图函数createWeightMap()

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::detail::createWeightMap 是 OpenCV 库中用于图像拼接模块的一个函数，主要用于创建权重图。这个权重图在图像拼接过程中扮演着重…...

编程日记 2025/7/13 19:00:19

【Unity】鼠标拖动物体移动速度跟不上鼠标，会掉落

错误示范： 一开始把移动的代码写到update里去了，发现物体老是掉(总之移动非常不流畅，体验感很差） void Update(){Ray ray Camera.main.ScreenPointToRay(Input.mousePosition);if (Physics.Raycast(ray, out RaycastHit hit, M…...

编程日记 2025/7/15 1:34:23

docker网桥问题导致ldap组件安装失败分析解决

使用pass_install_x86_64_0124版部署k8s底座、kem； 问题：一台kem节点部署ldap组件失败解决：恢复问题主机的docker0网卡，重新部署kem相关组件二、问题详情现象描述 ansible部署kem组件 TASK [kem : start ldap] **********…...

编程日记 2025/7/8 10:53:57

如何保障kafka的数据不会重复消费呢，如何防止漏掉呢

在 Kafka 中保障数据不重复消费且不丢失，需要从生产者、消费者和 Kafka 自身配置三个层面综合设计。以下是具体实现方案： 一、防止数据重复消费 1. 消费者端控制手动提交 Offset 禁用自动提交（enable.auto.commitfalse）&#x…...

编程日记 2025/7/15 1:34:36

mac vim命令快捷键

目录移动光标插入模式复制/粘贴删除搜索/替换退出移动光标快捷键说明0 / ^跳到行首，移动到光标所在行的"行首"$跳到行末，移动到光标所在行的"行尾"gg跳到文件第一行G移动到文章的最后[n]G跳到第n行w光标跳到下个字的开头e光标跳…...

编程日记 2025/7/11 14:11:41

【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置

噩梦终结：Flutter 配安卓、鸿蒙、iOS 真机调试环境问题背景很多开发者在配置 Flutter 项目环境时遇到困难，尤其是在处理 Android、鸿蒙和 iOS 真机调试环境时。卓伊凡最近接手了一个项目，发现很多“专业程序员”在环境搭建上花费了大量时…...

编程日记 2025/7/11 8:57:21

React 中React.memo的作用，如何利用它进行组件性能优化？

大白话React 中React.memo的作用，如何利用它进行组件性能优化？ React.memo 是啥玩意儿在 React 里，组件渲染是很频繁的事儿。每次父组件状态变了，子组件就可能会重新渲染，哪怕子组件的 props 压根儿没变化。这就好比…...

编程日记 2025/7/10 18:02:03

Python实现图片文字识别-OCR

PaddleOCR是由百度飞桨（PaddlePaddle）团队开发的OCR工具库，它包含超轻量级的中文OCR模型，支持多种语言和复杂情况下的文字识别。 pip install paddlepaddle paddleocr使用：已知我的图片是 img.png from paddleocr imp…...

编程日记 2025/7/15 9:14:26

MCP Server 实现一个天气查询

Step1. 环境配置安装 uv curl -LsSf https://astral.sh/uv/install.sh | shQuestion: 什么是 uv 呢和 conda 比有什么区别？ Answer: 一个用 Rust 编写的超快速 (100x) Python 包管理器和环境管理工具，由 Astral 开发。定位为 pip 和 venv 的替代品…...

编程日记 2025/7/12 1:43:09

第38周：文献阅读

目录摘要 Abstract 文献阅读问题引入研究背景研究意义研究目的相关工作自回归循环网络基于 GAN 的序列生成方法时间序列表示学习创新点提出模型基本原理代码实现实验研究实验1——基准和评估实验2——不同类型的时间序列数据实验3——…...

编程日记 2025/7/12 6:47:31

CD19.【C++ Dev】类和对象(10) 日期类对象的成员函数(日期+天数)

目录日期天数需要考虑的几个问题 1.天数加在日上,有可能会溢出,需要进位 2.对月进位,也有可能导致月会溢出,需要进位 3.对年进位,需要考虑是否为闰年代码设计取得指定月的天数GetMonthDay函数方法1:if判断或switch/case 方法2:查表版本1 版本2 operator 初始…...

编程日记 2025/7/11 19:49:50

Linux安装MySQL数据库并使用C语言进行数据库开发

目录一、前言二、安装VMware运行Ubuntu 1.安装VMware 2.使用VMware打开Ubuntu 三、配置VMware使用网卡 1.添加NAT网卡四、Linux下安装MySQL数据库五、安装MySQL开发库六、演示代码 sql_connect.c sql_connect.h main.c中数据库相关代码结尾一、前言由于最…...

编程日记 2025/7/9 1:35:48