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

使用 GitHub Pages 部署单页面应用教程

news 来源：原创 2025/7/12 20:27:50

## 简介

GitHub Pages 是 GitHub 提供的一个静态网站托管服务，可以免费托管个人、项目或组织页面。本教程将指导您如何部署一个单页面应用到 GitHub Pages。

## 前提条件

- 拥有 GitHub 账号

- 已安装 Git

- 已安装 Node.js（如果使用前端框架）

## 部署步骤

### 1. 创建仓库

1. 登录 GitHub 账号

2. 点击右上角的 "+" 按钮，选择 "New repository"

3. 仓库名称格式为：`username.github.io`（username 替换为您的 GitHub 用户名）

4. 选择 "Public" 可见性

5. 点击 "Create repository"

### 2. 准备项目

#### 如果是普通 HTML 项目：

1. 在本地创建项目文件夹

2. 创建 `index.html` 文件

3. 添加您的网页内容

#### 如果是使用前端框架（如 React、Vue 等）：

1. 创建项目（以 React 为例）：

```bash

npx create-react-app my-app

cd my-app

```

2. 在 `package.json` 中添加 homepage 字段：

```json

{

"homepage": "https://username.github.io"

}

```

3. 安装 gh-pages 包：

```bash

npm install --save-dev gh-pages

```

4. 在 `package.json` 的 scripts 中添加部署命令：

```json

{

"scripts": {

"predeploy": "npm run build",

"deploy": "gh-pages -d build"

}

```

### 3. 部署项目

#### 普通 HTML 项目：

1. 初始化 Git 仓库：

```bash

git init

git add .

git commit -m "Initial commit"

```

2. 添加远程仓库：

```bash

git remote add origin https://github.com/username/username.github.io.git

```

3. 推送代码：

```bash

git push -u origin main

```

#### 前端框架项目：

1. 构建项目：

```bash

npm run build

```

2. 部署到 GitHub Pages：

```bash

npm run deploy

```

### 4. 访问网站

- 部署完成后，等待几分钟

- 访问 `https://username.github.io` 查看您的网站

## 注意事项

1. 确保仓库名称为 `username.github.io` 格式

2. 确保仓库设置为 Public

3. 如果使用自定义域名，需要在仓库设置中配置

4. 部署后可能需要等待几分钟才能访问

## 常见问题解决

1. 页面显示 404

- 检查仓库名称是否正确

- 确认文件是否在正确的分支

- 检查 index.html 是否在根目录

2. 样式或资源加载失败

- 检查资源路径是否正确

- 确保使用相对路径或完整的 GitHub Pages URL

3. 部署后更新未生效

- 清除浏览器缓存

- 确认部署命令执行成功

- 检查 GitHub Actions 状态（如果使用）

## 进阶配置

1. 自定义域名

- 在仓库设置中找到 "Pages" 选项

- 在 "Custom domain" 中输入您的域名

- 配置 DNS 记录

2. 使用 GitHub Actions 自动部署

- 创建 `.github/workflows` 目录

- 添加部署配置文件

## 总结

GitHub Pages 是一个简单且强大的静态网站托管服务。通过本教程，您应该能够成功部署您的单页面应用。如果遇到问题，可以查看 GitHub Pages 的官方文档或社区支持。

使用 GitHub Pages 部署单页面应用教程

## 简介 GitHub Pages 是 GitHub 提供的一个静态网站托管服务，可以免费托管个人、项目或组织页面。本教程将指导您如何部署一个单页面应用到 GitHub Pages。 ## 前提条件 - 拥有 GitHub 账号 - 已安装 Git - 已安装 Node.js（如果使用前端框架&#x…...

编程日记 2025/7/12 20:27:50

day16-17-磁盘管理

1. 磁盘分类磁盘接口硬盘大小 sata接口机械硬盘、固态硬盘机械：4tb 10k性能要求不高 sas接口机械硬盘、固态硬盘机械：900G 15k性能好，容量低 pcie-e接口固态硬盘 tb级别 4tb 8tb 性能要求高，数据库&#xff0c…...

编程日记 2025/7/12 20:09:04

【神经网络与深度学习】扩散模型之通俗易懂的解释

引言： 扩散模型（Diffusion Models）是近年来深度学习领域的一项重要突破，尤其在生成式人工智能（Generative AI）中展现了惊人的能力。它的核心思想类似于一个孩子学习搭建乐高城堡的过程——先拆散&#xff0…...

编程日记 2025/7/12 19:32:05

Linux Bash 中 $? 的详细用法

Bash (Bourne Again SHell) 是使用最广泛的 SHell 脚本语言之一，因为它与 Unix 和 Linux 系统兼容。它提供了许多内置函数和变量，使脚本编写更高效，更不容易出错。其中一个变量是 $?， 它是 Bash 脚本错误处理的一个组成部分。这个…...

编程日记 2025/7/4 4:35:01

嵌入式培训之系统编程（一）标准IO、文件操作

目录一、系统编程概述二、标准IO （一）（以计算机为中心）标准IO （二）io的分类 （三）man命令三、文件读写操作 （一）文件操作步骤 （二&#…...

编程日记 2025/6/27 23:25:53

NVIDIA Earth-2 AI 天气模型 DLI 课程：解锁全球风云的未来之匙

电影闲聊引发思索之言： 曾几何时，当我们闲聊起那些描绘美国气候的大电影时（龙卷风-后天等美国大片），仿佛被带入了一个个奇幻而真实的气象世界。从狂风暴雨到烈日炎炎最后到冰天雪地，电影里的场景让我们对气…...

编程日记 2025/7/12 19:18:46

至此（day1-day4）代码详解（ai辅助整理）

至此（day1-day4）代码详解 ipl10.nas ; 第一阶段引导程序 ; 功能：读取磁盘数据并跳转到第二阶段加载程序 ; 编译参数：nask -o ipl10.bin ipl10.nasCYLS EQU 10 ; 预设读取柱面数（实际值由BIOS决定）ORG…...

编程日记 2025/7/12 19:55:49

STM32F103_LL库+寄存器学习笔记12.2 - 串口DMA高效收发实战2：进一步提高串口接收的效率

导言通过优化代码算法，在串口空闲中断回调里不需要暂时关闭DMA接收，达到提高串口接收的效率。在IDLE接收中断里关闭DMA接收会导致接收过程中有数据丢失风险（关DMA的瞬间如果有数据到来，会丢帧！）。回顾一…...

编程日记 2025/7/12 20:00:15

conda 设置env后，环境还是安装在c盘的解决方式：

1|设置 envs 文件夹权限右键【envs】文件夹，选择【属性】选择【安全】，点击【编辑】选中【Users(用户名\Users)】，选中运行所有权限，如图所示点击【确认】，确保修改被保存 2、环境变量path设置选择【高级系统设置…...

编程日记 2025/7/12 19:58:54

简单工厂模式 public class CoffeeFactory {public Coffee get(string coffeeType) {Coffee coffee null;if ("American".equals(coffeeType)) {coffee new AmericanCoffee();} else if ("Latte".equals(coffeeType)) {coffee new LatteCoffee();}retur…...

编程日记 2025/7/12 20:07:22

动态规划-LCR 090.打家劫舍II-力扣(LeetCode)

一、题目解析本题与打家劫舍的最大区别在于房子不是线性分布的了，而是首尾相连的环形分布，即如果偷了第一间房子，那么最后一间房子就不能偷了，因为它们是相连的。二、算法原理在分析之前我们可以先讨论上面提到的第一间房子偷…...

编程日记 2025/6/27 23:11:43

2025 年暑假 LBE 大空间市场火爆程度预测：技术驱动与消费升级下的增长引擎

一、市场爆发的底层逻辑根据 DeepSeek 行业报告显示，2025 年 LBE 大空间市场将呈现结构性爆发，核心驱动力来自三大技术突破： 空间计算能力跃迁：上海移动已开通全球最大规模商用 5G-A 3CC 网络，主城区及十大重点场景…...

编程日记 2025/6/27 23:05:35

【AI 大模型】盘古大模型简介 ( 创建空间 | 体验模型 | 部署模型 )

文章目录一、盘古大模型简介1、创建空间2、体验模型3、部署模型总结 : 盘古大模型是开发部署盘古基础模型 , 或在盘古模型基础上进行微调训练的大模型的平台 , 是开发训练大模型的平台 ; 不适合中小企业和个人开发者开发大模型应用 ; 一、盘古大模型简介 1、…...

编程日记 2025/6/27 23:04:09

2025年护网行动蓝队防御全解析：构建智能动态防御体系

2025年，随着网络攻击手段的智能化、混合化升级，护网行动中的蓝队防御已从传统的被动防护转向“动态感知、智能研判、主动反制”的立体化模式。如何在攻防不对称的对抗中实现“看得见、防得住、溯得清”？本文将结合前沿技术与实战经验&#xf…...

编程日记 2025/6/27 23:03:03

【Java高阶面经：微服务篇】3.熔断机制深度优化：从抖动治理到微服务高可用架构实战

一、熔断抖动的本质剖析与核心成因 1.1 熔断机制的核心价值与抖动危害熔断机制作为微服务弹性架构的核心组件，通过模拟电路断路器逻辑，在服务出现异常时自动阻断请求链，防止故障扩散引发雪崩。但频繁的“熔断-恢复-熔断”抖动会导致：用户体验恶化：请求成功率波动大，响…...

编程日记 2025/6/27 23:33:57

HTML回顾

html全称：HyperText Markup Language（超文本标记语言）注重标签语义，而不是默认效果规则块级元素包括: marquee、div等行内元素包括: span、input等规则1：块级元素中能写：行内元素、块级元素（几乎什么都能写）规则2：行级元素中能写：行内元素，但不能写：块…...

编程日记 2025/6/27 23:11:05

Leetcode百题斩-字典树

208. Implement Trie (Prefix Tree)[medium] 做完了哈希，来看看数据结构，做做字典树。字典树在搜索方面的作用还是蛮大的，主要是能实现前缀联想以及正确性匹配相关的功能。字典树又名前缀树，顾名思义就是维护字符串的前缀。这个…...

编程日记 2025/6/27 23:12:41

大数据Spark（五十九）：Standalone集群部署

文章目录 Standalone集群部署一、节点划分二、搭建Standalone集群 1、将下载好的Spark安装包上传解压 2、配饰spark-env.sh 3、配置workers 4、将配置好的安装包发送到node2、node3节点上 5、启动Standalone集群三、提交任务测试 Standalone集群部署 Standalone 模…...

编程日记 2025/6/27 23:00:09

Vue 3 ～ 3.5 版本useTemplateRef使用

注意，useTemplateRef版本要在 3.5 以后才可使用，版本低的 ref 替代问题也不大～ 2024 年 9 月 1 日发布的组合式 API：辅助 | Vue.js，引入一个小小的新 API useTemplateRef()，它用于访问实际的 DOM 节点。 …...

编程日记 2025/6/27 23:32:35

使用F5-tts复刻音色

最近第一人称视角的视频很火，想试试看复刻一下电视剧中某个角色的音色。看了下字节的API，嗯。。。138元一个音色，还不包括合成语音的费用，算了还是看看开源项目吧。随便搜了搜，发现了两个项目一个是openvoice&#x…...

编程日记 2025/7/10 20:14:12

使用亮数据代理IP+Python爬虫批量爬取招聘信息训练面试类AI智能体（附完整源码）

文章目录一、为什么要用代理IP？(重要！)二、环境准备（5分钟搞定）三、爬虫核心代码解析（含反反爬技巧）四、数据清洗的3个关键步骤五、训练AI智能体的实战技巧六、法律风险防范（必须看&#xff01…...

编程日记 2025/7/9 23:54:04

[软件工程]第二章题目汇总

1 [单选题] 原型化模型是（ ）。 A、适用于客户需求被明确定义的情况 B、很难产生有意义产品的一种冒险模型 C、提供一个精确表述的形式化规格说明 D、适用于客户需求难以清楚定义的情况 2 [单选题] 下列关于增量模型的说法正确的是（ &…...

编程日记 2025/6/27 23:40:43

Java EE进阶1：导读

1.发展历程 2.学习内容前⾯的课程中,学习的是Java基础,JavaEE主要学习Java的应用,也就是学习Java在企业中是如何应用的 Java更多场景是业务开发,更狭义点可以理解为web开发.所以咱们的学习也是围绕着如何使用Java来做web开发 2.1 什么是Web开发？ web&#xff08…...

编程日记 2025/6/27 23:34:48

Unity自定义shader打包SpriteAtlas图集问题

Unity打包图集还是有一些坑的，至于图集SpriteAtlas是什么请参考我之前写的文章：【Sprite Atlas】Unity新图集系统SpriteAtlas超详细使用教程_spriteatlas 使用-CSDN博客问题： 今天碰到的问题是，shader绘制的时候，因…...

编程日记 2025/6/27 23:13:19

系统集成项目管理工程师学习笔记之启动过程组

第十章启动过程组制定项目章程定义制定项目章程是编写一份正式批准项目并授权项目经理在项目活动中使用组织资源的文件的过程。正式批准的项目文件作用 1、明确项目与组织战略目标之间的直接联系 2、确立项目的正式地位 3、展示组织对项目的承诺本过程仅开展一…...

编程日记 2025/7/11 10:06:12

vscode 常用调试

一、文件执行 python script.py {"name": "Python 调试程序: 当前文件","type": "debugpy","request": "launch","program": "${file}","console": "integratedTerminal"…...

编程日记 2025/6/30 17:27:20

Java 07异常

异常指的是程序在编译和执行的过程中，出现的非正常的情况； 当然语法错误并不属于错误异常体系最大的Throwable; 分为两个：Error ExceptionError 严重级别问题常见的堆内存溢出栈内存溢出Exception 分为两个子类 RuntimeException 运…...

编程日记 2025/6/27 23:31:15

2025年PMP 学习二十三 16章高级项目管理

2025年PMP 学习二十三 16章高级项目管理文章目录 2025年PMP 学习二十三 16章高级项目管理高级项目管理战略管理战略管理的组成要素：企业战略转化为战略行动的阶段： 组织战略类型战略组织类型组织级项目管理OPM（公司项目管理） 组…...

编程日记 2025/6/27 23:09:02

【Java高阶面经：微服务篇】1.微服务架构核心：服务注册与发现之AP vs CP选型全攻略

一、CAP理论在服务注册与发现中的落地实践 1.1 CAP三要素的技术权衡要素AP模型实现CP模型实现一致性最终一致性（Eureka通过异步复制实现）强一致性（ZooKeeper通过ZAB协议保证）可用性服务节点可独立响应（支持分区存活）分区期间无法保证写操作（需多数节点可用）分区容错性…...

编程日记 2025/6/27 23:01:56

ISCC 2025决赛 wp

PWN Dilemma 64位程序没有开启PIE，并且过滤了execve，不能使用system这些的了，所以要考虑ORW来做进入main函数分析，这里有两个函数一个func_1一个func_2。这两个函数都有漏洞，以下是详细分析： 对于func…...

编程日记 2025/7/12 15:04:50

C++（5）switch语句循环while

这是一个电影评分的程序 default 就是如果上述的都没有执行就统一的执行default的内容。然后记得break ___________________________________ 循环 （while） while的使用方式输出 0-9的while循环...

编程日记 2025/6/27 0:26:37

操作系统----软考中级软件工程师（自用学习笔记）

目录 1、计算机系统层次结构 2、程序顺序执行的特征 3、程序并发执行的特征 4、三态模型 5、同步与互斥 6、信号量机制 7、PV操作 8、死锁 9、进程资源图 10、死锁避免 11、线程 12、程序局部性原理 13、分页存储管理 14、单缓冲器 15、双缓冲区 16、磁盘调度算…...

编程日记 2025/6/27 23:27:04

利用Spring Boot和Redis构建高性能缓存系统

利用Spring Boot和Redis构建高性能缓存系统引言在现代Web应用中，缓存是提升系统性能的关键技术之一。Redis作为一种高性能的内存数据库，广泛应用于缓存场景。本文将介绍如何利用Spring Boot和Redis构建一个高性能的缓存系统，涵盖Redis的基…...

编程日记 2025/6/27 23:07:05

每日一题：1、虚拟IPv4地址转换为32位整数（JS）

题目背景我们需要处理一种特殊的虚拟IPv4地址，这种地址由4个小节组成，每节之间用#分隔。与标准IPv4地址不同，虚拟IPv4地址的第一节范围是1~128，后三节的范围是0~255。我们需要将这种虚拟IPv4地址转换为一个唯一的32位整数。如果…...

编程日记 2025/6/27 23:24:25

[Vue]组件介绍和父子组件间传值

组件介绍 Vue3的 .vue文件中的主要部分分别分为三个：<template>、<script>、<style> <template>： 结构，相当于原html中的<head><body><footer>部分。原本的index.html现在只做一个容器&#xff0…...

编程日记 2025/6/27 23:24:12

Vue3 中使用 provide/inject 实现跨层级组件传值失败的原因及解决方案

1、基础用法父组件： <script setup> import { ref, provide } from vue; import ChildComponent from ./ChildComponent.vue; const parentData ref(初始数据); // 提供数据 provide(parentData, parentData); </script>子组件： <sc…...

编程日记 2025/7/9 10:30:41

Git Hooks 和自动生成 Commit Message

前言： 企业编程必须始终依赖流程，而不是个人。个人能力很重要，应该鼓励，但不能指望它，否则软件质量将不一致，没有可持续性。一旦顶级程序员跳槽，公司就会陷入困境。企业应该努力改进工作流程&am…...

编程日记 2025/6/27 23:02:10

【小明剑魔视频Viggle AI模仿的核心算法组成】

Viggle AI 作为一款先进的生成式视频AI工具，其核心技术栈融合了多项前沿算法。以下是深度解析其核心算法架构及实现原理： 一、核心算法组成 1. 运动控制生成（Motion Control Generation） 算法框架：基于扩散模型&…...

编程日记 2025/6/27 23:19:59

Linux学习心得问题整理（二）

day05 Linux基础入门 Linux语法解析如何理解ssh远程连接?如何使用ssh使用远程连接服务？ ssh进也称远程服务终端，常见连接方式可以包括windows和Linux两种方式首先咱们使用windows窗口进行连接，这里就采用xshell连接工具来给大家做演示吧…...

编程日记 2025/7/3 8:30:11

百度网盘加速补丁v7.14.1.6使用指南｜PC不限速下载实操教程

软件介绍本加速补丁可突破百度网盘限速限制，无需会员、无次数限制，实测下载速度可达带宽峰值。三步极速配置教程 1. 环境准备 → 卸载电脑原有百度网盘客户端（避免冲突） → 关闭杀毒软件/安全卫士（防止误删补丁&am…...

编程日记 2025/6/27 23:17:21

RocketMQ消息拉取模式详解

RocketMQ提供了两种消息拉取模式，Pull模式（主动拉取）和 Push模式（长轮询）。一、消息拉取模式分类 1. Pull模式（主动拉取） 特点：消费者主动向Broker发送请求拉取消息实现类&#…...

编程日记 2025/6/27 23:00:06

C++23 容器从其他兼容范围的可构造性与可赋值性 (P1206R7)

文章目录背景与动机提案内容与实现细节提案 P1206R7实现细节编译器支持对开发者的影响提高灵活性简化代码向后兼容性总结 C23标准引入了对容器构造和赋值的新特性，这些特性使得容器能够更灵活地从其他兼容范围初始化，并支持从范围赋值。这些改进由提案…...

编程日记 2025/6/30 11:51:40

深入解析 HTTP 中的 GET 请求与 POST 请求

在互联网的世界里，数据的传输与交互无时无刻不在发生。HTTP（超文本传输协议）作为 Web 应用的基石，承载着浏览器与服务器之间的通信重任。而 GET 请求和 POST 请求，作为 HTTP 协议中最为常用的两种请求方法，…...

编程日记 2025/6/27 23:17:52

华三（H3C）IRF堆叠心跳的LACP MAD、BFD MAD和ARP MAD差异

华三（H3C）IRF堆叠心跳的三种MAD（多主检测）机制——LACP MAD、BFD MAD和ARP MAD在实现原理、组网要求及适用场景上存在显著差异。以下是三者的对比分析： 一、核心区别对比特性LACP MADBFD MADARP MAD检测原理扩展LAC…...

编程日记 2025/6/30 8:26:58

thread 的mutex优化

std::mutex mtx; int shared_data 0;void increment() {std::lock_guard<std::mutex> lock(mtx); // 自动加锁shared_data; // 临界区 } // 离开作用域时自动解锁std::lock_guard 在离开作用域时自动解锁的行为是基于 C 的 RAII (Resource Acquisition Is Initializa…...

编程日记 2025/7/8 11:40:41

深入解析前端 JSBridge：现代混合开发的通信基石与架构艺术

引言：被低估的通信革命在移动互联网爆发式增长的十年间，Hybrid App（混合应用）始终占据着不可替代的地位。作为连接 Web 与 Native 的神经中枢，JSBridge 的设计质量直接决定了应用的性能上限与开发效率。本文将突破传…...

编程日记 2025/6/29 8:35:47

打破次元壁，VR 气象站开启气象学习新姿势

在教育领域，VR 气象站同样发挥着巨大的作用，为气象教学带来了全新的模式，打破了传统教学的次元壁，让学生们以全新的姿势学习气象知识。在传统的气象教学中，学生们主要通过课本、图片和老师的讲解来学习气象知识。这…...

编程日记 2025/6/28 21:57:09

python八股文汇总（持续更新版）

python装饰器一、装饰器是什么？ 装饰器是Python中一种"化妆师"，它能在不修改原函数代码的前提下，给函数动态添加新功能。本质：一个接收函数作为参数，并返回新函数的工具。作用：像给手机贴膜…...

编程日记 2025/6/29 8:29:11

C#入门系列【基础类型大冒险】从0到1，解锁编程世界的“元素周期表”

C#入门系列【基础类型大冒险】从0到1，解锁编程世界的“元素周期表” 嘿，欢迎来到C#的奇妙世界！如果把编程比作建造一座大厦，那么基础类型就是我们手中的“砖块”和“水泥”。它们看似普通，却构成了所有复杂程序的基石…...

编程日记 2025/6/29 8:36:31

物流项目第四期（运费模板列表实现）

前三期： 物流项目第一期（登录业务）-CSDN博客物流项目第二期（用户端登录与双token三验证）-CSDN博客物流项目第三期（统一网关、工厂模式运用）-CSDN博客模板列表在后台系统中&#xff0c…...

编程日记 2025/7/10 14:57:52

相关文章：