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

博客搭建 — GitHub Pages 部署

关于 GitHub Pages

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

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

创建 GitHub Pages 站点仓库

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

配置 GitHub Pages

  1. 在仓库下找到设置 Settings,在边栏部分找到 Pages
  2. 选择仓库分支;选择 index.html 文件所在路径,一般是 root
  3. 点击保存,过几分钟刷新下页面 Github Pages
  4. 点击 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 是一项静态站点托管服务&#xff0c;它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件&#xff0c;通过构建过程运行文件&#xff0c;然后发布网站。 本文最终效果是搭建出一个域名为 https://<user>.github.io 的网站 创建…...

翻译:How do I reset my FPGA?

文章目录 背景翻译&#xff1a;How do I reset my FPGA?1、Understanding the flip-flop reset behavior2、Reset methodology3、Use appropriate resets to maximize utilization4、Many options5、About the author 背景 在写博客《复位信号的同步与释放&#xff08;同步复…...

Linux 进程环境变量:深入理解与实践指南

&#x1f31f; 快来参与讨论&#x1f4ac;&#xff0c;点赞&#x1f44d;、收藏⭐、分享&#x1f4e4;&#xff0c;共创活力社区。&#x1f31f; &#x1f6a9;用通俗易懂且不失专业性的文字&#xff0c;讲解计算机领域那些看似枯燥的知识点&#x1f6a9; 在 Linux 系统里…...

Linux探秘坊-------5.git

1.git介绍 1.版本控制器 为了能够更⽅便我们管理这些不同版本的⽂件&#xff0c;便有了版本控制器。所谓的版本控制器&#xff0c;就是能让你了解到⼀个⽂件的历史&#xff0c;以及它的发展过程的系统。通俗的讲就是⼀个可以记录⼯程的每⼀次改动和版本迭代的⼀个管理系统&am…...

Linux中的几个基本指令(二)

文章目录 1、cp指令例一&#xff1a;例二&#xff1a;例三&#xff1a;例四&#xff1a;例五&#xff1a; 2、mv 指令例一&#xff1a;例二&#xff1a; 3、cat指令例一&#xff1a; 4、tac指令5、which指令6、date指令时间戳&#xff1a;7、zip指令 今天我们继续学习Linux下的…...

Java入门笔记(1)

引言 在计算机编程的广袤宇宙中&#xff0c;Java无疑是一颗格外耀眼的恒星。那么&#xff0c;Java究竟是什么呢&#xff1f; Java是美国Sun公司&#xff08;Stanford University Network&#xff09;在1995年推出的一门计算机高级编程语言。曾经辉煌的Sun公司在2009年被Oracle&…...

设计模式的艺术-开闭原则

原则使用频率图&#xff08;仅供参考&#xff09; 1.如何理解开闭原则 简单来说&#xff0c;开闭原则指的是 “对扩展开放&#xff0c;对修改关闭”。 当软件系统需要增加新的功能时&#xff0c;应该通过扩展现有代码的方式来实现&#xff0c;而不是去修改已有的代码。 例如我…...

【C语言系列】深入理解指针(3)

深入理解指针&#xff08;3&#xff09; 一、字符指针变量二、数组指针变量2.1数组指针变量是什么&#xff1f;2.2数组指针变量怎么初始化&#xff1f; 三、二维数组传参的本质四、函数指针变量4.1函数指针变量的创建4.2函数指针变量的使用4.3两段有趣的代码4.4 typedef关键字 …...

three.js+WebGL踩坑经验合集:写在前面的话

笔者从2023年初开始参与一个基于three.js引擎的web项目的开发工作。本打算2024年春节就把期间踩过的坑写到博客上分享给大家&#xff0c;然而哪怕本专栏的各种构思和内容已经在笔者的脑海里翻滚了一年&#xff0c;得了严重拖延症患者的我还是一直拖到了现在&#xff0c;实在惭愧…...

利用Linux的工作队列(Workqueue)实现中断下半部的处理

本文代码在哪个基础上修改而成&#xff1f; 本文是在博文 https://blog.csdn.net/wenhao_ir/article/details/145228617 的代码基础上修改而成。 关于工作队列(Workqueue)的概念 工作队列(Workqueue)可以用于实现Linux的中断下半部的&#xff0c;之前在博文 https://blog.cs…...

LabVIEW处理复杂系统和数据处理

LabVIEW 是一个图形化编程平台&#xff0c;广泛应用于自动化控制、数据采集、信号处理、仪器控制等复杂系统的开发。它的图形化界面使得开发人员能够直观地设计系统和算法&#xff0c;尤其适合处理需要实时数据分析、高精度控制和复杂硬件集成的应用场景。LabVIEW 提供丰富的库…...

spring-springboot -springcloud

目录 spring: 动态代理: spring的生命周期(bean的生命周期): SpringMvc的生命周期: SpringBoot: 自动装配: 自动装配流程: Spring中常用的注解&#xff1a; Spring Boot中常用的注解&#xff1a; SpringCloud: 1. 注册中心: 2. gateway(网关): 3. Ribbon(负载均…...

DRG/DIP 2.0时代下基于PostgreSQL的成本管理实践与探索(下)

五、数据处理与 ETL 流程编程实现 5.1 数据抽取与转换(ETL) 在 DRG/DIP 2.0 时代的医院成本管理中,数据抽取与转换(ETL)是将医院各个业务系统中的原始数据转化为可供成本管理分析使用的关键环节。这一过程涉及从医院 HIS 系统中抽取患者诊疗数据,并对其进行格式转换、字…...

打造本地音乐库

文章目录 存储介质硬盘&#xff08;NAS&#xff09;媒体播放器&#xff08;可视MP3、MP4&#xff09;实体介质&#xff08;CD光盘、黑胶片&#xff09;注意事项为什么不使用在线音乐&#xff08;App&#xff09;和网盘打造一套HiFi系统的成本非常高 获取音乐正版音乐途径免费音…...

【2024 - 年终总结】叶子增长,期待花开

写在前面&#xff1a;本博客仅作记录学习之用&#xff0c;部分图片来自网络&#xff0c;如需引用请注明出处&#xff0c;同时如有侵犯您的权益&#xff0c;请联系删除&#xff01; 文章目录 前言论博客创作保持2024的记录清单博客科研开源工作生活 总结与展望互动致谢参考 前言…...

python 统计相同像素值个数

目录 python 统计相同像素值个数 最大值附近的值 python 统计相同像素值个数 import cv2 import numpy as np import time from collections import Counter# 读取图像 image cv2.imread(mask16.jpg)# 将图像转换为灰度图像 gray_image cv2.cvtColor(image, cv2.COLOR_BGR2…...

蓝卓“1+2+N”智慧工厂架构,让工业智能更简单

面对复杂的工业环境、海量的数据以及多样化的业务需求&#xff0c;如何实现智能化转型&#xff0c;让工业智能触手可及&#xff0c;成为了众多企业面临的难题。蓝卓以创新精神为引领&#xff0c;推出了“12N”智慧工厂架构&#xff0c;旨在简化工业智能的实现路径&#xff0c;让…...

12、MySQL锁相关知识

目录 1、全局锁和表锁使用场景 2、行锁的意义 3、为什么说间隙锁解决了快照的幻读? 4、RR隔离级别产生幻读的场景 5、详解元数据锁(MDL)作用以及如何减少元数据锁 6、出现死锁场景 7、查看MySQL锁情况 8、自增锁 1、全局锁和表锁使用场景 全局锁 备份数据库:当需要…...

某大厂一面:HashMap 的put方法具体做了哪些操作

HashMap 的 put 方法是一个常用的操作&#xff0c;它将一个键值对插入到哈希表中。下面是 put 方法执行的详细流程&#xff0c;包括各个步骤的解释&#xff0c;并附上相应的代码片段。 1. 检查键是否为 null 如果传入的键为 null&#xff0c;HashMap 会特别处理这种情况&…...

WPF基础 | 深入 WPF 事件机制:路由事件与自定义事件处理

WPF基础 | 深入 WPF 事件机制&#xff1a;路由事件与自定义事件处理 一、前言二、WPF 事件基础概念2.1 事件的定义与本质2.2 常见的 WPF 事件类型 三、路由事件3.1 路由事件的概念与原理3.2 路由事件的三个阶段3.3 路由事件的标识与注册3.4 常见的路由事件示例 四、自定义事件处…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

虚拟电厂发展三大趋势:市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...