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

博客搭建 — GitHub Pages 部署

news 来源：原创 2025/6/18 6:32:53

关于 GitHub Pages

GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，通过构建过程运行文件，然后发布网站。

本文最终效果是搭建出一个域名为 https://<user>.github.io 的网站

创建 GitHub Pages 站点仓库

输入仓库名称，必须命名为 <user>.github.io，<user>是你的用户名
选择仓库可见性：Public（公开）
选择 “使用 README 初始化此存储库”
创建仓库
将需要部署的静态页面代码提交到这个仓库

配置 GitHub Pages

在仓库下找到设置 Settings，在边栏部分找到 Pages
选择仓库分支；选择 index.html 文件所在路径，一般是 root
点击保存，过几分钟刷新下页面
点击 Visit site 访问

Vue 项目的打包部署流程

其实原理是一样的，在 Vue 项目下运行 npm run build 将打包后的 dist 文件发布到 GitHub Pages 站点仓库。
但是过程比较繁琐，可以使用脚本来实现自动化部署

自动发布脚本中，仓库 origin 选择 SSH 的地址，例如 git@github.com:user/repo.git。

不过在这之前需要先在 GitHub 上添加 ssh 公钥

1、新建一个 deploy.sh 文件

#!/usr/bin/env sh# 忽略错误
set -e# 构建
npm run build# 进入待发布的目录
cd distgit init
git add -A
git commit -m 'ci: deploy'# 部署到 https://<user>.github.io
git push -f git@github.com:hai-zou/hai-zou.github.io.git mastercd -

2、在 package.json 中添加一条命令行

{..."scripts": {"deploy": "bash scripts/deploy.sh"},...
}

3、最后运行 npm run deploy 就能够把代码提交到 Github Pages 仓库

注意

如果你的项目使用的是 history 模式路由，在生产环境下，访问非根路径的页面就会得到一个 404 错误。
这是因为浏览器在访问 https://example.com/user 获取不到 html 资源。
但是使用 hash 模式就没有这个问题，https://example.com/#/user 哈希字符（#）后面那部分 url 不会被发送到服务器，所以可以直接请求到根路径上的index.html文件。

可以查看官方给出的解决办法

GitHub Pages 上如何解决这个问题呢？

GitHub Pages 站点在访问错误路径的时候会跳转到 404 页面，利用这个机制，我们可以在根目录下创建一个跟 index.html 一样的 404.html 文件，
这样在访问错误路径的时候也能请求到根路由的资源，然后通过框架内部的路由机制进行跳转

修改一下发布脚本，在进入发布目录之后添加一行命令，将 index.html 的内容 copy 到 404.html

# 进入待发布的目录
cd dist# 这里是处理vue使用history模式路由，导致页面出现404问题
cp index.html 404.html

博客搭建 — GitHub Pages 部署

关于 GitHub Pages GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，通过构建过程运行文件，然后发布网站。本文最终效果是搭建出一个域名为 https://<user>.github.io 的网站创建…...

编程日记 2025/5/30 6:06:11

【0x0052】HCI_Write_Extended_Inquiry_Response命令详解

目录一、命令概述二、命令格式及参数 2.1. HCI_Write_Extended_Inquiry_Response命令格式 2.2. FEC_Required 2.3. Extended_Inquiry_Response 三、生成事件及参数 3.1. HCI_Command_Complete 事件 3.2. Status 四、命令执行流程 4.1. 命令准备阶段（主机端） 4.2…...

编程日记 2025/6/4 1:49:58

Kotlin Bytedeco OpenCV 图像图像55 图像透视变换

Kotlin Bytedeco OpenCV 图像图像53 图像透视变换 1 添加依赖2 测试代码3 测试结果 1 添加依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xmlns"http://maven.apa…...

编程日记 2025/5/29 16:55:07

flutter Get GetMiddleware 中间件不起作用问题

当使用 get: ^5.0.0-release-candidate-9.2.1最新版本时，中间件GetMiddleware各种教程都是让我们在redirect中实现，比如： overrideRouteSettings? redirect(String? route) {return RouteSettings(name: "/companyAuthIndexPage"…...

编程日记 2025/6/2 10:16:32

npm介绍

npm（Node Package Manager）是 Node.js 的默认包管理工具，用于管理 JavaScript 和 Node.js 项目的依赖关系。它既是一个包管理工具，又是一个在线仓库，开发者可以通过它分享和下载开源的 JavaScript 库和工具。npm 是世界…...

编程日记 2025/6/2 4:27:17

Ruby语言的数据结构

Ruby语言的数据结构详解 Ruby是一种动态、面向对象的编程语言，因其简洁优雅的语法而受到开发者的喜爱。在Ruby中，数据结构是构建和管理数据的一种方式，不同的数据结构适用于不同的场景。本文将详细探讨Ruby中的几种主要数据结构，…...

编程日记 2025/6/4 8:22:35

web开发工具之：一、UUID的介绍，java如何产生UUID，作为数据库的主键和加密算法的盐

文章目录前言一、UUID是什么二、java如何产生UUID1. 生成随机 UUID（Version 4）2. 通过指定的字符串生成 UUID 三、UUID作为数据库主键1. 优点2. 缺点四、UUID作为加密的盐总结前言现在web开发中，很多使用UUID作为主键和加密的盐的&#…...

编程日记 2025/6/3 12:57:27

精度论文：【Focaler-IoU: More Focused Intersection over Union Loss】

Focaler-IoU: 更聚焦的交并比损失 Focaler-IoU: More Focused Intersection over Union Loss Focaler-IoU: 更聚焦的交并比损失I. 引言II. 相关工作III. 方法IV. 实验V. 结论原文地址：官方论文地址代码地址：官方代码地址摘要——边界框回归在目标检…...

编程日记 2025/6/3 16:02:03

Android-目前最稳定和高效的UI适配方案

谈到适配，首先需要介绍几个基本单位： 1、密度无关像素（dp）： 含义：density-independent pixel，叫dp或dip，与终端上的实际物理像素点无关单位：dp，可以保证在…...

编程日记 2025/6/2 23:37:57

Realsense相机驱动安装及其ROS通讯配置——机器人抓取系统基础系列（四）

文章目录概要1 Realsense相机驱动安装Method1: 使用Intel服务器预编译包Method2: 使用ROS服务器预编译包Method3: 使用SDK源代码方法对比总结 2 Realsense-ROS通讯配置与使用2.1 Realsense-ROS包安装2.2 ROS节点启动小结Reference 概要本文首先阐述了Realsense相机驱动安装…...

编程日记 2025/6/2 14:56:47

开源地址：nginx-ui/README-zh_CN.md at dev 0xJacky/nginx-ui GitHub docker run -dit \ --namenginx-ui \ --restartalways \ -e TZAsia/Shanghai \ -v /Users/xiaoping/docker/appdata/nginx:/etc/nginx \ -v /Users/xiaoping/docker/appdata/nginx-ui:/etc/ng…...

编程日记 2025/5/30 13:48:19

【AI】【RAG】使用WebUI部署RAG：数据优化与设置技巧详解

RAG（Retrieval-Augmented Generation）是一种通过知识库构建的高效问答系统。然而，在使用WebUI部署和优化RAG时，数据源管理和参数设置直接决定了系统的回答质量。本文将结合具体问题和优化方法，为您详细解读如何最大化RAG的性能和准确性。数据源相关问题及解决方案在实际…...

编程日记 2025/6/4 9:51:03

如何在vue中渲染markdown内容？

文章目录引言什么是 markdown-it？安装 markdown-it基本用法样式失效？解决方法高级配置语法高亮效果展示引言在现代 Web 开发中，Markdown 作为一种轻量级的标记语言，广泛用于文档编写、内容管理以及富文本编辑器中。markdown…...

编程日记 2025/6/4 9:36:04

nvm安装详细教程（安装nvm、node、npm、cnpm、yarn及环境变量配置）

一、安装nvm 1. 下载nvm nvm-windows官网地址https://github.com/coreybutler/nvm-windows/releases 如果打不开也可以到这里下载 2.双击 nvm-setup.exe 开始安装 3.选择nvm安装路径，路径名称不要有空格，然后点击next 4.node.js安装…...

编程日记 2025/5/31 6:15:21

机器学习-归一化

文章目录一. 归一化二. 归一化的常见方法1. 最小-最大归一化 (Min-Max Normalization)2. Z-Score 归一化（标准化）3. MaxAbs 归一化三. 归一化的选择四. 为什么要进行归一化1. 消除量纲差异2. 提高模型训练速度3. 增强模型的稳定性4. 保证正则化项的有效…...

编程日记 2025/6/3 14:23:48

一次完整的tcpdump -XX输出报文详解

报文： 03:32:51.745623 IP (tos 0x0, ttl 64, id 65006, offset 0, flags [DF], proto TCP (6), length 94) 10.229.43.200.6471 > 10.229.43.200.55674: Flags [P.], cksum 0x6daa (incorrect -> 0x2e06), seq 1:43, ack 42, win 3635, options [nop,nop…...

编程日记 2025/6/1 14:55:46

【STM32-学习笔记-9-】SPI通信

文章目录 SPI通信Ⅰ、SPI通信概述1、SPI技术规格2、SPI应用 3、硬件电路移位示意图 Ⅱ、SPI时序基本单元①、起始条件②、终止条件③、交换一个字节（模式0）④、交换一个字节（模式1）⑤、交换一个字节（模式2）…...

编程日记 2025/6/1 7:09:34

kalilinux - 目录扫描之dirsearch

情景导入先简单介绍一下dirsearch有啥用。假如你现在访问一个网站，例如https://www.example.com/ 它是一个电商平台或者其他功能性质的平台。站在开发者的角度上思考，我们只指导https://www.example.com/ 但不知道它下面有什么文件，文…...

编程日记 2025/6/1 8:19:52

(12)springMVC文件的上传

SpringMVC文件上传首先是快速搭建一个springMVC项目新建项目mvn依赖导入添加webMoudle添加Tomcat运行环境.在配置tomcat时ApplicationContext置为"/"配置Artfact的lib配置WEB-INF配置文件（记得添加乱码过滤）配置springmvc-servlet文件&…...

编程日记 2025/6/3 8:20:38

[Mac + Icarus Verilog + gtkwave] Mac运行Verilog及查看波形图

目录 1. MAC安装环境 1. 1 Icarus Verilog 编译 1. 2 gtkwave 查看波形 2. 安装遇到的问题 2. 1 macOS cannot verify that this app is free from malware 2. 2 gtkwave-bin is not compatible with macOS 14 or later 3. 运行示例 3. 1 源代码 3. 2 编译Verilog 3. 3 生成.v…...

编程日记 2025/6/2 13:25:14

yt-dlp脚本下载音频可选设置代理

import yt_dlp# 配置：是否使用代理 use_proxy = True # 设置为 False 可关闭代理# 代理地址 proxy_url = socks5://127.0.0.1:1089URLS = [https://www.bilibili.com/video/BV1WTktYcEcQ/?spm_id_from=333.1007.tianma.6-2-20.click&vd_source=dcb58f8fe1faf749f438620b…...

编程日记 2025/6/2 11:15:08

【向量数据库 Milvus】linux 源码安装 Milvus 2.5.3

在 Linux 系统（如 ai 5.10.134-16.2.an8.x86_64）上通过源码安装 Milvus 2.5.3 的步骤如下。该指南适用于 x86_64 架构的系统。 1. 环境准备确保系统满足以下要求： 操作系统: Linux（x86_64 架构）Go: 1.21 或更高版本…...

编程日记 2025/6/3 16:49:03

初学stm32 --- CAN

目录 CAN介绍 CAN总线拓扑图 CAN总线特点 CAN应用场景 CAN物理层 CAN收发器芯片介绍 CAN协议层数据帧介绍 CAN位时序介绍数据同步过程硬件同步再同步 CAN总线仲裁 STM32 CAN控制器介绍 CAN控制器模式 CAN控制器模式 CAN控制器框图发送处理接收处理接收过…...

编程日记 2025/6/2 6:46:13

linux手动安装mysql5.7

一、下载mysql5.7 1、可以去官方网站下载mysql-5.7.24-linux-glibc2.12-x86_64.tar压缩包： https://downloads.mysql.com/archives/community/ 2、在线下载，使用wget命令，直接从官网下载到linux服务器上 wget https://downloads.mysql.co…...

编程日记 2025/5/29 13:37:13

【Java】LinkedHashMap （LRU）淘汰缓存的使用

文章目录 **1. initialCapacity（初始容量）****2. loadFactor（加载因子）****3. accessOrder（访问顺序）****完整参数解释示例****示例验证** LinkedHashMap 在 Java 中可维护元素插入或访问顺序，并…...

编程日记 2025/6/4 4:22:21

JAVA实现五子棋小游戏(附源码)

文章目录一、设计来源捡金币闯关小游戏讲解1.1 主界面1.2 黑棋胜利界面1.3 白棋胜利界面二、效果和源码2.1 动态效果2.2 源代码源码下载更多优质源码分享作者：xcLeigh 文章地址：https://blog.csdn.net/weixin_43151418/article/details/145161039 JA…...

编程日记 2025/6/3 7:49:49

基于Java的百度AOI数据解析与转换的实现方法

目录前言一、AOI数据结构简介 1、官网的实例接口 2、响应参数介绍二、Java对AOI数据的解析 1、数据解析流程图 2、数据解析实现 3、AOI数据解析成果三、总结前言在当今信息化社会，地理信息数据在城市规划、交通管理、商业选址等领域扮演着越来越重要的…...

编程日记 2025/6/2 14:36:50

细说STM32F407单片机窗口看门狗WWDG的原理及使用方法

目录一、窗口看门狗的工作原理 1、递减计数器 2、窗口值和比较器 3、看门狗的启动 4、提前唤醒中断二、窗口看门狗的HAL驱动程序 1、窗口看门狗初始化 2.窗口看门狗刷新 3.EWI中断及其处理三、不开启EWI的WWDG示例 1、示例功能 2、项目设置 （1&…...

编程日记 2025/6/2 13:37:47

【.net core】【sqlsugar】时间查询示例

1、时间包含查询示例 //model.TimeInterval为时间区间参数，参数格式为2024-01-01~2025-01-01 //query为当前查询的语句内容 //为当前查询语句增加创建时间模糊搜索查询条件 query query.Where(a > ((DateTime)a.F_CreatorTime).ToString("yyyy-MM-dd HH:m…...

编程日记 2025/5/29 5:31:15

基于Oracle与PyQt6的电子病历多模态大模型图形化查询系统编程构建

一、引言 1.1 研究背景阐述在当今数字化时代，医疗行业正经历着深刻的变革，数字化转型的需求日益迫切。电子病历（EMR）作为医疗信息化的核心，其管理的高效性和数据利用的深度对于提升医疗服务质量、优化临床决策以及推动医学研究具有至关重要的意义。传统的电子病历管理系…...

编程日记 2025/6/2 14:36:20

STM32 HAL库函数入门指南：从原理到实践

1 STM32 HAL库概述 STM32 HAL(Hardware Abstraction Layer)库是ST公司专门为STM32系列微控制器开发的一套硬件抽象层函数库。它的核心设计理念是在应用层与硬件层之间建立一个抽象层，这个抽象层屏蔽了底层硬件的具体实现细节，为开发者提供了一套统一的、…...

编程日记 2025/6/3 22:12:44

Harmony面试模版

1. 自我介绍看表达能力、沟通能力面试记录： 2. 进一步挖掘 2.1. 现状目前是在职还是离职，如果离职，从上一家公司离职的原因 2.2. 项目经验如果自我介绍工作项目经验讲的不够清楚，可以根据简历上的信息再进一步了解面试记…...

编程日记 2025/6/1 10:45:58

数据结构知识点

【1】栈（stack） C 标准库提供了 std::stack 模板类，用于实现栈的功能。std::stack 是基于其他容器（如 std::vector、std::deque 或 std::list）实现的适配器类。 std::stack 可以使用不同的底层容器来实现&#xff0c…...

编程日记 2025/6/3 10:36:31

RPC 简介

RPC（Remote Procedure Call，远程过程调用）是一种通过网络请求执行远程服务器上的代码的技术，使得开发者可以调用远程系统中的函数，就像调用本地函数一样。它隐藏了底层网络通信的细节，简化了分布式系统的开…...

编程日记 2025/5/31 17:58:24

qBittorent访问webui时提示unauthorized解决方法

现象描述 QNAP使用Container Station运行容器，使用Docker封装qBittorrent时，访问IP:PORT的方式后无法访问到webui，而是提示unauthorized，如图： 原因分析此时通常是由于设备IP与qBittorrent的ip地址不在同一个网段导致…...

编程日记 2025/5/29 17:19:20

Windows部署NVM并下载多版本Node.js的方法（含删除原有Node的方法）

本文介绍在Windows电脑中，下载、部署NVM（node.js version management）环境，并基于其安装不同版本的Node.js的方法。在之前的文章Windows系统下载、部署Node.js与npm环境的方法（https://blog.csdn.net/zhebushibiaoshi…...

编程日记 2025/5/30 19:58:20

【大数据】机器学习 -----关于data.csv数据集分析案例

打开表 import pandas as pd df2 pd.read_csv("data.csv",encoding"gbk") df2.head()查看数据属性（列标题，表形状，类型，行标题，值） print("列标题:",df2.columns)Data…...

编程日记 2025/5/29 7:06:23

使用Newtonsoft.Json插件，打包至Windows平台显示不支持

在unity中使用Newtonsoft.Json插件，打包至Windows遇到的问题 string json JsonConvert.SerializeObject(msg); 打包windows平台，显示该平台不支持出现问题的原因 JsonConvert.SerializeObject 使用了反射来动态遍历对象的属性和字段。这可能在某些平台…...

编程日记 2025/6/2 18:29:17

树莓派5--系统问题汇总

前言： 该文章是我在使用树莓派5时所遇到的问题以及解决方案，希望对遇到相同问题的能够有所帮助。我的树莓派系统版本为：Pi-OS-ROS_2024_09_29 注意：如果没有什么需求千万不要更新树莓派中任何软件或者系统，除非你真的…...

编程日记 2025/6/3 16:32:16

Level2逐笔成交逐笔委托毫秒记录：今日分享优质股票数据20250116

逐笔成交逐笔委托下载链接: https://pan.baidu.com/s/11nYhOf5TL9haZdXcYTxmHQ?pwdfwg8 提取码: fwg8 -------------------- Level2逐笔成交逐笔委托数据分享下载利用Level2的逐笔交易和委托数据，这种以毫秒为单位的详细信息能揭露众多关键信息，如庄…...

编程日记 2025/5/30 2:25:11

小白：react antd 搭建框架关于 RangePicker DatePicker 时间组件使用记录 2

文章目录一、关于 RangePicker 组件返回的moment 方法示例一、关于 RangePicker 组件返回的moment 方法示例 moment方法中日后开发有用的方法如下： form.getFieldsValue().date[0].weeksInWeekYear(),form.getFieldsValue().date[0].zoneName(), form.getFiel…...

编程日记 2025/6/4 6:43:52

windows远程桌面连接限定ip

1，Windows防火墙->高级设置->远程桌面 - 用户模式(TCP-In)->作用域->远程IP地址 2，启用规则...

编程日记 2025/6/1 1:22:56

强化学习-蒙特卡洛方法

强化学习-数学理论强化学习-基本概念强化学习-贝尔曼公式强化学习-贝尔曼最优公式强化学习-值迭代与策略迭代强化学习-蒙特卡洛方法文章目录强化学习-数学理论一、蒙特卡洛方法理论(Monte Carlo, MC)二、MC Basic2.1 算法拆解2.2 MC Basic算法三、MC Exploring Starts3.1 …...

编程日记 2025/6/2 13:27:43

Java并发编程——线程池(基础，使用，拒绝策略，命名，提交方式，状态)

我是一个计算机专业研0的学生卡蒙Camel🐫🐫🐫（刚保研） 记录每天学习过程（主要学习Java、python、人工智能），总结知识点（内容来自：自我总结网上借鉴&#xff0…...

编程日记 2025/6/2 6:10:04

浅谈云计算08 | 基本云架构

浅谈基本云架构一、负载分布架构二、资源池架构三、动态可扩展架构四、弹性资源容量架构五、服务负载均衡架构六、云爆发架构七、弹性磁盘供给架构八、冗余存储架构在当今数字化时代，云计算已成为企业发展的核心驱动力，而其背后的一系列关键架构则是支…...

编程日记 2025/6/3 5:06:09

element select 绑定一个对象{}

背景： select组件的使用，适用广泛的基础单选 v-model 的值为当前被选中的 el-option 的 value 属性值。但是我们这里想绑定一个对象，一个el-option对应的对象。 <el-select v-model"state.form.modelA" …...

编程日记 2025/5/31 10:51:29

MySQL SQL优化技巧与原理

前言随着业务数据量的不断增加，MySQL查询语句的执行效率对程序的运行效率影响逐渐增大。因此，进行SQL优化变得至关重要。本文将结合SQL的执行语句顺序和各种SQL场景，介绍一些常见的MySQL SQL优化技巧及其背后的原理。一、MySQL SQL执行语…...

编程日记 2025/5/31 15:18:37

SSL：WRONG_VERSION_NUMBER 或者 net::ERR_SSL_PROTOCAL_ERROR

记录一次SSL部署成功后，接口请求依然报SSL错误的问题。首先排除SSL证据链不足，系统时间不正确，TLS配置不正确等问题。浏览器直接访问可以打开网站，但是postman等接口访问就一直报SSL异常： 类似参考资料中的这种异…...

编程日记 2025/6/4 1:49:59

51单片机——DS18B20温度传感器

由于DS18B20数字温度传感器是单总线接口，所以需要使用51单片机的一个IO口模拟单总线时序与DS18B20通信，将检测的环境温度读取出来 1、DS18B20模块电路传感器接口的单总线管脚接至单片机P3.7IO口上 2、DS18B20介绍 2.1 DS18B20外观实物图管脚1为GN…...

编程日记 2025/6/3 14:03:17

单细胞组学大模型（8）--- scGenePT，scGPT和GenePT的结合，实验数据和文本数据的交融模型

–https://doi.org/10.1101/2024.10.23.619972 研究团队和单位 Theofanis Karaletsos–Head Of AI - Science at Chan Zuckerberg Initiative （Chan Zuckerberg Initiative是扎克伯格和他妻子Chan成立的科研&教育机构） 研究简介研究背景&…...

编程日记 2025/6/2 6:57:14

关于 GitHub Pages

创建 GitHub Pages 站点仓库

配置 GitHub Pages

Vue 项目的打包部署流程

注意

相关文章：