GitHub Pages + Jekyll 博客搭建指南(静态网站)
目录
- 🚀 静态网站及其生成工具指南
- 🌍 什么是静态网站?
- 📌 静态网站的优势
- ⚖️ 静态网站 VS 动态网站
- 🚀 常见的静态网站生成器对比
- 🛠️ 使用 GitHub Pages + Jekyll 搭建个人博客
- 📌 1. 创建 GitHub 仓库
- 📌 2. 安装 Jekyll(本地环境搭建)
- 📌 安装 Ruby 和 Bundler
- 📌 3. 创建 Jekyll 博客
- 📌 4. 上传博客到 GitHub
- 📌 5. 启用 GitHub Pages
- 🎯 总结
🚀 静态网站及其生成工具指南
🌍 什么是静态网站?
静态网站(Static Website)指 所有网页内容(HTML、CSS、JavaScript、图片等)在服务器上是固定的,不需要服务器动态处理或数据库支持,用户访问时,服务器直接返回这些文件给浏览器进行展示。
📌 静态网站的优势
- 加载速度快:服务器直接返回静态文件,无需动态渲染。
- 安全性高:无数据库或后台逻辑,减少攻击风险。
- 部署简便:可托管在 GitHub Pages、Vercel、Netlify 等平台。
- 低维护成本:不需要服务器管理,适合长期运行。
⚖️ 静态网站 VS 动态网站
特点 | 静态网站 | 动态网站 |
---|---|---|
内容更新 | 需手动修改代码 | 由数据库或后端代码动态生成 |
交互能力 | 仅支持前端交互 | 支持后端处理和数据库交互 |
访问速度 | 快(直接返回页面) | 慢(服务器计算请求) |
安全性 | 高(无服务器端漏洞) | 低(可能有 SQL 注入、XSS 攻击) |
适用场景 | 博客、文档、企业官网 | 论坛、电商、社交平台 |
🚀 常见的静态网站生成器对比
生成器 | 语言 | 适用场景 | 特点 |
---|---|---|---|
Jekyll | Ruby | 博客、GitHub Pages | GitHub Pages 官方支持,适合个人博客 |
Hugo | Go | 文档、博客、官网 | 速度极快,单个二进制文件,无需安装依赖 |
Hexo | Node.js | 技术博客 | 适合程序员,支持丰富插件和主题 |
Gatsby | React | 现代网站、数据驱动 | 基于 React,支持 GraphQL,适用于动态内容 |
VuePress | Vue.js | 文档网站 | Vue 驱动,可作为技术文档平台 |
🛠️ 使用 GitHub Pages + Jekyll 搭建个人博客
📌 1. 创建 GitHub 仓库
-
访问 GitHub 并 登录。
-
创建一个新的仓库,命名格式:
yourusername.github.io
(替换
yourusername
为你的 GitHub 用户名) -
选择 Public(公开),点击 Create repository 创建仓库。
📌 2. 安装 Jekyll(本地环境搭建)
Jekyll 需要 Ruby 运行环境,建议使用最新版本的 Ruby。
📌 安装 Ruby 和 Bundler
-
Windows:
-
安装 RubyInstaller
-
Windows + R 输入 cmd ,运行以下命令检查安装:
ruby -v gem -v
若看到 Ruby 和 Gem 的版本号,则说明安装成功。
-
-
macOS:
# 1. 在 Mac 上,推荐使用 Homebrew 安装 Ruby: brew install ruby# 2. 安装后,更新环境变量: echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc source ~/.zshrc# 3. 验证安装: ruby -v gem -v
-
Linux:
-
Ubuntu/Debian 系统
sudo apt update sudo apt install ruby-full build-essential zlib1g-dev ruby -v gem -v
-
CentOS 系统
sudo yum install ruby ruby -v gem -v
-
-
安装 Bundler(Ruby 依赖管理器)
# 安装命令 gem install bundler# 安装验证 bundler -v
[!NOTE]
注:
gem install jekyll bundler
这条命令用于全局安装 Jekyll 和 Bundler,它不依赖于当前所在的目录。这意味着你可以在任何目录下打开 命令提示符(cmd) 后执行该命令,只需满足以下条件:-
Ruby 已安装:确保你已经在 Windows 系统上正确安装了 Ruby(推荐使用 RubyInstaller)
-
PATH 环境变量已配置:安装 Ruby 后,请确认 Ruby 的
bin
目录已添加到系统的 PATH 环境变量中,这样你就可以在任意目录下使用gem
命令。
-
📌 3. 创建 Jekyll 博客
在cmd
终端运行:
# 1.安装 Jekyll 和必要依赖:
gem install jekyll bundler# 2.初始化一个新的 Jekyll 项目:
jekyll new my-blog# 3.进入博客目录并安装依赖:
cd my-blog
bundle install# 4.启动本地服务器
bundle exec jekyll serve# 5.打开浏览器访问 http://127.0.0.1:4000 预览博客
📌 4. 上传博客到 GitHub
-
进入博客目录:
cd my-blog
-
初始化 Git 仓库: 在终端中,确保进入你的博客目录并执行以下命令:
# 在当前目录下初始化一个本地 Git 仓库 git init# 将 “当前目录及其子目录中的所有文件” 添加到 Git 的暂存区(Staging Area) git add .# 将暂存区中的文件提交到本地的 Git 仓库,并附加一条提交说明(commit message) git commit -m "Initial commit"
-
关联 GitHub 远程仓库并推送:
git remote add origin https://github.com/yourusername/yourusername.github.io.git git branch -M main
-
将代码推送到 GitHub:
git push -u origin main
📌 5. 启用 GitHub Pages
-
进入 GitHub 仓库 Settings → Pages。
-
在 Branch 选择
main
分支→ Folder:/ (root)
,点击 Save。 -
访问:
https://yourusername.github.io
你的博客已上线!🎉
🎯 总结
- Jekyll:适合 GitHub Pages,简洁稳定。
- Hugo:最快,适合大规模博客/文档。
- Hexo:Node.js + 主题丰富,适合技术博客。
- Gatsby:React + GraphQL,适合现代网站。
- VuePress:Vue.js + 文档站点最佳。
相关文章:
GitHub Pages + Jekyll 博客搭建指南(静态网站)
目录 🚀 静态网站及其生成工具指南🌍 什么是静态网站?📌 静态网站的优势⚖️ 静态网站 VS 动态网站 🚀 常见的静态网站生成器对比🛠️ 使用 GitHub Pages Jekyll 搭建个人博客📌 1. 创建 GitHu…...
idea项目列表不出现,展示loading
2025年02月08 11:23:36 星期六 发生在webstorm中,跟其他idea类似 原因是将 ignore 插件升级到 4.5.5 版本 https://github.com/JetBrains/idea-gitignore/pull/933 解决方案:将ignore版本将为 4.5.4 我是将 4.5.5 降低为 4.5.4 正常显示文件夹了。...
多智能体协作架构模式:驱动传统公司向AI智能公司转型
前言 在数字化浪潮的席卷下,传统公司的运营模式正面临着前所未有的挑战。随着市场竞争的日益激烈,客户需求的快速变化以及业务复杂度的不断攀升,传统公司在缺乏 AI 技术支撑的情况下,暴露出诸多痛点。在决策层面,由于…...
新增md、html压缩文档上传,开放接口访问密钥改为多个,zyplayer-doc 2.4.7 发布啦!
zyplayer-doc是一款适合企业和个人使用的WIKI知识库管理工具,支持在线编辑富文本、Markdown、表格、Office文档、API接口、思维导图、Drawio以及任意的文本文件,专为私有化部署而设计,最大程度上保证企业或个人的数据安全,支持以内…...
w~Transformer~合集5
我自己的原文哦~ https://blog.51cto.com/whaosoft/12406495 #transformer~x1 太可怕了都到6了 太强~~ DeepMind 表示,他们提出的算法蒸馏(AD)是首个通过对具有模仿损失的离线数据进行顺序建模以展示上下文强化学习的方法。同时基于观察…...
Dubbo 3.x源码(29)—Dubbo Consumer服务调用源码(1)服务调用入口
基于Dubbo 3.1,详细介绍了Dubbo Consumer服务调用源码。 此前我们学习了Dubbo服务的导出和引入的源码,现在我们来学习Dubbo服务调用的源码。 此前的文章中我们讲过了最上层代理的调用逻辑(服务引用bean的获取以及懒加载原理):业务引入的接口…...
Linux内核同步机制:确保系统稳定与高效
在复杂而庞大的 Linux 系统世界中,内核就如同一位有条不紊的指挥官,协调着各种任务和资源的分配。而其中,内核同步机制则是确保整个系统稳定与高效运行的关键要素。想象一下,众多的进程和线程在 Linux 内核的舞台上同时登场&#…...
firebase简介
Firebase 是一个由 Google 提供的移动应用开发平台,旨在帮助开发者快速构建和管理应用程序。它提供了一系列强大的工具和服务,特别适合用于开发和管理 Web 和移动应用。以下是 Firebase 的一些核心功能: 实时数据库:Firebase 提供…...
利用Termux在安卓手机中安装 PostgreSQL
利用Termux在安卓手机中安装 PostgreSQL ⬇️Termux下载 点击下载 在 Termux 中安装 PostgreSQL 可以按照以下步骤进行: 1. 更新 Termux 包管理器 先更新软件包列表和已安装的软件包: pkg update && pkg upgrade -y2. 安装 PostgreSQL 使…...
windows安装WSL完整指南
本文首先介绍WSL,然后一步一步安装WSL及Ubuntu系统,最后讲解如何在两个系统之间访问和共享文件信息。通过学习该完整指南,能帮助你快速安装WSL,解决安装和使用过程中的常见问题。 理解WSL(Windows Subsystem for Linux…...
Windows Docker笔记-安装docker
安装环境 操作系统:Windows 11 家庭中文版 docker版本:Docker Desktop version: 4.36.0 (175267) 注意: Docker Desktop 支持以下Windows操作系统: 支持的版本:Windows 10(家庭版、专业版、企业版、教育…...
ReactNative进阶(五十九):存量 react-native 项目适配 HarmonyOS NEXT
文章目录 一、前言二、ohos_react_native2.1 Fabric2.2 TurboModule2.2.1 ArkTSTurboModule2.2.2 cxxTurboModule: 三、拓展阅读 一、前言 2024年10月22日19:00,华为在深圳举办“原生鸿蒙之夜暨华为全场景新品发布会”,主题为“星河璀璨&…...
[x86 ubuntu22.04]进入S4失败
目录 1 问题描述 2 解决过程 2.1 查看内核日志 2.2 新建一个交换分区 2.3 指定交换分区的位置 1 问题描述 CPU:G6900E OS:ubuntu22.04 Kernel:6.8.0-49-generic 使用“echo disk > /sys/power/state”命令进入 S4,但是无法…...
Java面试题-MySQL数据库
文章目录 1.事务1.事务的特性 ACID2.并发事务问题3.undo log 和redo log的区别?4.事务的隔离性是如何保证的呢?解释一下MVCC? 2.索引1.如何定位慢查询?2.explain3.了解过索引吗?索引的底层数据结构B树和B树对比4.什么是…...
为什么Vue的data属性是函数而不是对象
Vue中data属性设计为函数而非对象的原因是解决组件复用时的数据隔离问题。确保每个实例维护独立的数据副本,避免数据共享导致的状态污染。 而根实例因为只会被创建一次(不会被复用),所以可以直接用对象,不会有这个问题。 组件一般都会被多个实…...
网络工程师 (26)TCP/IP体系结构
一、层次 四层: 网络接口层:TCP/IP协议的最底层,负责网络层与硬件设备间的联系。该层协议非常多,包括逻辑链路和媒体访问控制,负责与物理传输的连接媒介打交道,主要功能是接收数据报,并把接收到…...
MySQL部署基于二进制日志文件位置的主从复制集群
MySQL主从复制介绍 MySQL 主从复制(Master-Slave Replication) 作为一种经典的数据库复制方案,被广泛应用于企业生产环境,尤其是在提升数据库性能、实现数据备份和分布式扩展方面具有重要作用。 官方文档:https://de…...
【系统设计】Spring、SpringMVC 与 Spring Boot 技术选型指南:人群、场景与实战建议
在 Java 开发领域,Spring 生态的技术选型直接影响项目的开发效率、维护成本和长期扩展性。然而,面对 Spring、SpringMVC 和 Spring Boot 这三个紧密关联的框架,开发者常常陷入纠结:该从何入手?如何根据团队能力和业务需…...
【CAPL实战】LIN调度表操作
文章目录 前言1、linChangeSchedTable切换调度表2、linStartScheduler开启调度表3、linStopScheduler停止调度表 前言 在LIN调度表Schedule Table文章中,详细介绍了LIN调度表的信息,那么如何在CAPL脚本测试中进行LIN调度表的操作呢? 1、linC…...
「vue3-element-admin」告别 vite-plugin-svg-icons!用 @unocss/preset-icons 加载本地 SVG 图标
🚀 作者主页: 有来技术 🔥 开源项目: youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template 🌺 仓库主页: GitCode︱ Gitee ︱ Github 💖 欢迎点赞 👍 收藏 ⭐评论 …...
[图文]课程讲解片段-Fowler分析模式的剖析和实现01
解说: GJJ-004-1,分析模式高阶Fowler分析模式的剖析和实现,这个课是针对Martin Fowler的《分析模式》那本书里面的模式来讲解,对里面的模式来剖析,然后用代码来实现。 做到这一步的,我们这个是世界上独…...
element-plus el-tree-select 修改 value 字段
element-plus el-tree-select 修改 value 字段 ,不显示label 需要注意两个地方: <el-tree-select v-model"value" :data"data" multiple :render-after-expand"false" show-checkbox style"width: 240px" …...
软件测评实验室CNAS认证能力验证什么时机做?如何查询能力验证相关信息?
能力验证是软件测评实验室申请CNAS认证前必须要做的一类质量活动。CNAS软件测评实验室初次认可和扩大认可范围时,申请认可的每个子领域应至少参加过一次相关领域的能力验证且获得满意结果。通过认定认可后,只要存在可获得的能力验证,不同类目…...
Spring Boot 3.4 中 MockMvcTester 的新特性解析
引言 在 Spring Boot 3.4 版本中,引入了一个全新的 MockMvcTester 类,使 MockMvc 测试可以直接支持 AssertJ 断言。本文将深入探讨这一新特性,分析它如何优化 MockMvc 测试并提升测试的可读性。 Spring MVC 示例 为了演示 MockMvcTester 的…...
网安加·百家讲坛 | 刘志诚:以业务为中心的网络安全挑战与机遇
作者简介:刘志诚,乐信集团信息安全中心总监、OWASP广东区域负责人、网安加社区特聘专家。专注于企业数字化过程中网络空间安全风险治理,对大数据、人工智能、区块链等新技术在金融风险治理领域的应用,以及新技术带来的技术风险治理…...
配置 VS Code 调试 ROS Python 脚本:完整步骤
在 Ubuntu 系统上使用 ROS 和 VS Code 进行 Python 开发时,可能会遇到一些环境配置的问题,特别是当需要加载 ROS 环境变量以及确保正确使用 Python 3 环境时。以下是如何配置 launch.json 和 tasks.json 来确保 VS Code 调试环境能够正确加载 ROS 和 Pyt…...
HTTP4种方法(GET、POST、 PUT和DELETE)
一、GET 和 POST 1. GET方法 特点: 用途:用于从服务器获取数据。 参数传递方式:参数会附加在URL后面,以 keyvalue的形式,通过查询字符串传递,例如: http://example.com/page?nameJohn&…...
AnythingLLM开发者接口API测试
《Win10OllamaAnythingLLMDeepSeek构建本地多人访问知识库》见上一篇文章,本文在上篇基础上进行。 1.生成本地API 密钥 2.打开API测试页面(http://localhost:3001/api/docs/) 就可以在页面测试API了 2.测试获取用户接口(/v1/admin/users) 3…...
CSS定位简介
目录 一、静态定位(Static Positioning) 二、相对定位(Relative Positioning) 三、绝对定位(Absolute Positioning) 四、固定定位(Fixed Positioning) 五、黏性定位(…...
CentOS服务器部署Docker+Jenkins持续集成环境
一、准备工作 一台运行 CentOS 的服务器,确保有足够的磁盘空间、内存资源,并且网络连接稳定。建议使用 CentOS 7 或更高版本,本文以 CentOS 7 为例进行讲解。 拥有服务器的 root 权限,因为后续安装软件包、配置环境等操作需要较…...
React受控组件的核心原理与实战精要
在 React 中,受控组件(Controlled Component) 是一种重要的模式,用于通过组件的状态来管理表单元素的值。这种模式不仅确保了数据的一致性和可预测性,还便于与其他功能(如验证和格式化)集成。本…...
基于python多线程多进程爬虫的maa作业站技能使用分析
基于python多线程多进程爬虫的maa作业站技能使用分析 技能使用分析 多线程(8核) import json import multiprocessing import requests from multiprocessing.dummy import Pooldef maa(st):url "https://prts.maa.plus/copilot/get/"m …...
Android studio怎么创建assets目录
在Android Studio中创建assets文件夹是一个简单的步骤,通常用于存储不需要编译的资源文件,如文本文件、图片、音频等 main文件夹,邮件new->folder-assets folder...
解锁 DeepSeek 模型高效部署密码:蓝耘平台全解析
💖亲爱的朋友们,热烈欢迎来到 青云交的博客!能与诸位在此相逢,我倍感荣幸。在这飞速更迭的时代,我们都渴望一方心灵净土,而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识,也…...
【Spring相关知识】Spring应用如何优雅使用消息队列
文章目录 概述**核心概念****使用场景****快速入门**1. 添加依赖2. 配置 Binder3. 定义消息通道4. 发送和接收消息5. 运行应用 **高级特性****优点****适用场景** 概述 Spring Cloud Stream 是一个用于构建消息驱动微服务的框架,它基于 Spring Boot 和 Spring Inte…...
2025牛客寒假算法基础集训营4(补题)
C Tokitsukaze and Balance String (hard) 一道规律题。赛时以为是难的算法题,就没去碰了,实际上把几种情况列出来后可能就会发现,只有首尾相同的字符串才是平衡的。 首先我们容易发现,连续的1或者0是多余的,因为他们…...
.net一些知识点5
1.dot Net带out的参数如何使用 string name;//假设这个参数带out TestMethod(1,out name);//一定要有out 方法体中,一定要有out参数的赋值,并且能输出 2.参数的传递方式有哪些 a.值传递 b.引用传递 ref c.输出传递 out 3.设计模式知道哪些 3.us…...
基于Servlet简易学生信息管理系统
本次设计的学生信息管理系统,能提供以下功能: (1) 输入入学生信息并保存 (2) 显示所有学生信息 (3) 查询学生信息 (4) 修改学生信息并保存 (…...
IDEA编写SpringBoot项目时使用Lombok报错“找不到符号”的原因和解决
目录 概述|背景 报错解析 解决方法 IDEA配置解决 Pom配置插件解决 概述|背景 报错发生背景:在SpringBoot项目中引入Lombok依赖并使用后出现"找不到符号"的问题。 本文讨论在上述背景下发生的报错原因和解决办法,如果仅为了解决BUG不论原…...
JVM图文入门
往期推荐 【已解决】redisCache注解失效,没写cacheConfig_com.howbuy.cachemanagement.client.redisclient#incr-CSDN博客 【已解决】OSS配置问题_keyuewenhua.oss-cn-beijing.aliyuncs-CSDN博客 【排坑】云服务器docker部署前后端分离项目域名解析OSS-CSDN博客 微服…...
【算法】动态规划专题⑨ —— 二维费用背包问题 python
目录 前置知识进入正题实战演练 前置知识 【算法】动态规划专题⑤ —— 0-1背包问题 滚动数组优化 python 进入正题 二维费用背包问题 方法思路 二维费用背包问题在传统背包问题的基础上增加了第二个维度的限制(如重量)。 每个物品具有两种费用&#x…...
链表专题-02
链表专题 /*** 链表的节点* param <E>*/ public class ListNode<E> {public E element;public ListNode<E> next;public ListNode() {}public ListNode(E element) {this.element element;}public ListNode(E element, ListNode<E> next) {this.eleme…...
亚远景-精通ASPICE:专业咨询助力汽车软件开发高效合规
在竞争日益激烈的汽车行业,软件开发已成为决定成败的关键因素。ASPICE(汽车软件过程改进和能力确定) 作为行业公认的软件开发框架,为汽车制造商和供应商提供了实现高效、合规开发的路线图。 然而,ASPICE 的实施并非易…...
HALCON 数据结构
目录 1. HALCON基本数据分类 1.1 图像相关数据 1.1.1 Image(图片) 1.1.2 Region(区域) 1.1.3 XLD(轮廓) 1.2 控制类数据 1.2.1 基本控制数据类型 1.2.2 handle(句柄) 2. 数组与字典 2.1 数组类型及特点 2.1.1 Iconic数组(Objects) 2.1.2 Control数组(Tu…...
动手写ORM框架 - GeeORM第一天 database/sql 基础
文章目录 1 初识 SQLite2 database/sql 标准库3 实现一个简单的 log 库4 核心结构 Session本文是7天用Go从零实现ORM框架GeeORM的第一篇。介绍了 SQLite 的基础操作(连接数据库,创建表、增删记录等)。使用 Go 语言标准库 database/sql 连接并操作 SQLite 数据库,并简单封装…...
ubuntu conda运行kivy时报“No matching FB config found”
错误描述:本人使用ubuntu自带的python环境运行kivy是没有问题的,就是在使用conda时发生了错误,去网上寻找报错原因,却一直没有头绪(这个问题有诸多问题导致的,不敢说用我的这个方法100%能好) 1…...
SSM开发(十一) mybatis关联关系多表查询(嵌套查询,举例说明)
目录 一、背景介绍 二、一对一查询(嵌套查询) 三、一对多查询(嵌套查询) 四、嵌套查询效率评估 注:关联查询则是指在一个查询中涉及到多个表的联合查询 一、背景介绍 当对数据库的操作涉及到多张表,这在面向对象语言如Java中就涉及到了对象与对象之间的关联关系。针对多…...
【AIGC】冷启动数据与多阶段训练在 DeepSeek 中的作用
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AIGC | ChatGPT 文章目录 💯前言💯冷启动数据的作用冷启动数据设计 💯多阶段训练的作用阶段 1:冷启动微调阶段 2:推理导向强化学习(RL࿰…...
Spring(26) spring-security-oauth2 官方表结构解析
目录 一、什么是 spring-security-oauth2?二、spring-security-oauth2 的表结构2.1 oauth_client_details 客户端详细信息表2.2 oauth_access_token 认证授权Token记录表2.3 oauth_refresh_token 刷新授权Token记录表2.4 oauth_code 授权Code记录表 一、什么是 spri…...
WPS如何接入DeepSeek(通过JS宏调用)
WPS如何接入DeepSeek 一、文本扩写二、校对三、翻译 本文介绍如何通过 WPS JS宏调用 DeepSeek 大模型,实现自动化文本扩写、校对和翻译等功能。 一、文本扩写 1、随便打开一个word文档,点击工具栏“工具”。 2、点击“开发工具”。 3、点击“查看代码”…...