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

【项目实战】使用Github pages、Hexo如何10分钟内快速生成个人博客网站

news 文章来源：https://blog.csdn.net/qq877728715/article/details/138580045 2025/4/20 14:29:58

文章目录

一.准备工作
- 1.安装git
- 2.安装node
- - 安装 cnpm
- 3.使用 GitHub 创建仓库，并配置 GitHub Pages
- - 0.Github Pages是什么
  - 1. 在 GitHub 上创建一个新仓库
  - 2. 创建您的静态网站
  - 3. 启用 GitHub Pages
  - 4. 等待构建完成
  - 5. 访问您的网站
二. Hexo
- 1.什么是Hexo
- 2.安装Hexo
- - - 1. 安装前提
    - 2.使用npm安装hexo-cli
    - 3.新建存储博客的文件夹，初始化hexo
    - 4.进入hexo项目文件夹，安装npm**
    - 5. 本地启动hexo项目
    - 6.将hexo博客站点部署到github上
    - 7. 推送hexo项目到github
    - - hexo clean && hexo deploy 推送报错解决
- 3.Hexo常用命令
- 4.更换theme主题
- - - 1. 找到喜欢的主题
    - 2.clone主题，或者将主题下载到本地解压
    - 3. 将主题解压后放到Hexo项目的`themes文件夹`下面
    - 4. 打开`_config.yml`配置文件，找到`theme:xxx`替换成你克隆下来的文件名
    - 5. 重新编译，并本地启动hexoo该hero项目
    - 6. 本地ok后上传到github等待审核通过
三.配置指南
- 1._config.yml中设置网站信息
- 2.配置分类、标签
- - 2.1.创建分类选项
  - 2.2. 创建标签选项
  - 2.3.打开你要部署的md文件
- 3.hexo报错解决方案

一.准备工作

1.安装git

git下载地址：https://git-scm.com/downloads

git安装完成后命令行执行 git -v 有返回表示安装完成

在这里插入图片描述

2.安装node

Hexo 基于 NodeJS 运行，因此在开始前，需要安装NodeJS 和npm工具

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
- 新版的Node都是内置安装了 npm 模块
git安装完成后命令行执行 node -v npm -v 有返回表示安装完成
如果执行 node -v 报错的话，手动将 Node.js 的安装路径添加到环境变量中。

安装 cnpm

如果npm很慢，可以配置taobao的镜像：

	npm install -g cnpm --registry=https://registry.npm.taobao.org

配置后，使用 cnpm 代替 npm 命令即可。

3.使用 GitHub 创建仓库，并配置 GitHub Pages

0.Github Pages是什么

Github Pages 是一个免费的静态网页托管服务，可以托管博客、项目官网等静态网页。目前 Gitee Pages 支持 Jekyll、Hugo、Hexo编译静态资源。
- 编译 Hexo 依据：仓库编译目录下存在 package.json、_config.yml文件和 scaffolds 目录时，会使用hexo generate生成静态文件。由于每次部署需要重新克隆代码、执行 npm install 以及编译，部署时间相对于 Hugo 和 Jekyll 会长一些。
- 编译 Hugo 依据：仓库编译目录下存在config.toml|json|yaml文件和 content 目录时，会使用hugo生成静态文件。
- 当不符合上述 1 和 2 条件的时候，就使用 Jekyll 编译。

2.使用前须知

1. 仓库必须有 index.html 才可以正常访问
1. 静态网页的样式可以自己写，也可以拿一些静态模版来修改，Pages服务本身不提供任何形式的模版

3.Pages 进阶，使用 Jekyll、Hugo、Hexo 生成自己的静态网页

Jekyll、Hugo、Hexo 究竟是什么？
- Jekyll 使用文档：https://www.jekyll.com.cn/docs/home/
- Hugo 使用文档：https://gohugo.io/documentation/
- Hexo 使用文档：https://hexo.io/docs/

1. 在 GitHub 上创建一个新仓库

登录到您的 GitHub 账户（没有就注册一个吧，开始你的GitHub之旅）

在页面右上角，点击页面顶部的 “+”（加号）按钮，然后选择 “New repository”（新建仓库）
github仓库用于存放个人博客页面，仓库名必须使用<GitHub用户名>.github.io格式。
填写一个简短的描述，选择是否要将仓库设置为公共或私有
勾选 “Initialize this repository with a README” 选项，这将创建一个初始的README文件

2. 创建您的静态网站

创建仓库完成后，必须在仓库根路径下创建一个名为index.html的来验证个人博客搭建是否成功。

在这里插入图片描述

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>怎么回事</title></head><body><h1>您好</h1>

3. 启用 GitHub Pages

进入仓库的 Settings（设置）选项卡
在左侧导航栏中，选择 “Pages”
在 “Source” 部分，选择您希望用于 GitHub Pages 的分支（通常是 main 或 gh-pages）
点击 “Save”

4. 等待构建完成

构建完成后，在<GitHub用户名>.github.io仓库对应的 GitHub Pages 设置页面 (访问路径为Settings -> Pages) 可以找到个人博客的主页访问地址：https://<GitHub-username>.github.io/<repository-name>

其中 GitHub-username 是您的 GitHub 用户名，repository-name是您的仓库名称。
- 由于我的仓库名叫ouyangll.github.io ，自带.github.io 所以生成的个人博客访问地址为https://ouyangll.github.io/

5. 访问您的网站

等待几分钟后，若能在浏览器中正常访问该地址，即代表个人 GitHub Pages 搭建成功。

在这里插入图片描述

二. Hexo

1.什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

官方教程:https://hexo.io/zh-cn/docs/

2.安装Hexo

1. 安装前提

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
Git

2.使用npm安装hexo-cli

npm install -g hexo-cli 或者
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g hexo-cli

安装完成可输入hexo -v查看版本

3.新建存储博客的文件夹，初始化hexo

mkdir github_blog
hexo init github_blog

4.进入hexo项目文件夹，安装npm**

cd github_blognpm install

在这里插入图片描述

5. 本地启动hexo项目

hexo server

访问http://localhost:4000/ 至此hero就搭建好了。可以在本地访问了

6.将hexo博客站点部署到github上

npm安装hexo的上传插件deploy-git

npm install hexo-deployer-git --save

修改hexo配置文件_config.yml指定仓库路径

		deploy:type: gitrepo: https://<github_token>@github.com/ouyangll/ouyangll.github.io.gitbranch: main

7. 推送hexo项目到github

hexo clean && hexo deploy

推送中会要求输入github的用户名和密码，GitHub 从 2021 年 8 月 13 日起不再支持通过密码进行认证。因此，使用电子邮件和密码的方式克隆或推送代码到 GitHub 仓库将会失败。

hexo clean && hexo deploy 推送报错解决

在这里插入图片描述

GitHub 从 2021 年 8 月 13 日起不再支持通过密码进行认证。因此，使用电子邮件和密码的方式克隆或推送代码到 GitHub 仓库将会失败。
推荐使用个人访问令牌（Personal Access Token, PAT）或 SSH 密钥进行认证。你可以前往 GitHub 的设置页面，生成一个 PAT，并在 Git 命令中使用它来代替密码
- 请查看 https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls 以获取当前推荐的认证模式信息。
致命错误：出现问题。也许您可以在这里找到解决方案：https://hexo.io/docs/troubleshooting.html

在github页面的右上角，单击您的个人资料照片，然后单击 Settings（设置）
在左侧边栏中，单击 Developer settings
在左侧边栏中，单击 Personal access tokens（个人访问Tokens） 然后点击 Generate new token（生成新Tokens）
设置token名称，过期日期，以及权限。
点击生成
记得将生成的token复制并且存储下来，因为安全原因当您离开该页面之后，token将不再显示。

你在github上的原始url： https://github.com/<github-username>/<repo-name>.git而你现在需要clone的则是：https://<your_token>@github.com/<github-username>/<repo-name>.giy

也可以在密码登录时使用token作为密码进行登录认证

上传成功
在这里插入图片描述

3.Hexo常用命令

hexo init：命令用于初始化一个本地文件夹为网站的根目录
hexo new <title > 新建一篇文章
hexo clean 命令用于清理缓存文件
hexo generate：该命令用于生成静态文件，可以简写成 hexo g
hexo deploy 命令用于部署网站，上传文件到git/gitee 可以简写成 hexo d
hexo server 命令用于启动本地服务器，可以简写成 hexo s
- -p 选项，指定服务器端口，默认为 4000
- -i 选项，指定服务器 IP 地址，默认为 0.0.0.0
- -s 选项，静态模式，仅提供 public 文件夹中的文件并禁用文件监视
hexo --safe 表示安全模式，用于禁用加载插件和脚本
hexo --debug 表示调试模式，用于将消息详细记录到终端和 debug.log 文件

4.更换theme主题

1. 找到喜欢的主题

hexo主题地址：Themes | Hexo
在这里插入图片描述

2.clone主题，或者将主题下载到本地解压

https://github.com/zhangolve/hexo-theme-olive
在这里插入图片描述

3. 将主题解压后放到Hexo项目的`themes文件夹`下面

在这里插入图片描述

4. 打开`_config.yml`配置文件，找到`theme:xxx`替换成你克隆下来的文件名

在这里插入图片描述

5. 重新编译，并本地启动hexoo该hero项目

cd github_blog 进入hexo项目
hexo generate 生成静态文章
hexo server 本地启动

http://localhost:4000/

6. 本地ok后上传到github等待审核通过

hexo clean && hexo deploy  清理缓存上传github

在这里插入图片描述

三.配置指南

1._config.yml中设置网站信息

在这里插入图片描述

2.配置分类、标签

2.1.创建分类选项

hexo默认是按时间（年月日）分类，如果自定义分类：
```
hexo new page categories
```
生成文件在...\source\categories\index.md
编辑创建分类生成的...\source\categories\index.md文件，加入 categories ：
```
---
title: 分类
date: 2024-05-10 14:37:47
type: "categories"
---
```

2.2. 创建标签选项

默认是没有标签的，生成标签：
```
hexo new page tags
```
生成文件...\source\tags\index.md

打开...\source\tags\index.md文件，加入 tags：

---
title: 标签
date: 2024-05-10 14:37:47
type: "tags"
---

2.3.打开你要部署的md文件

部署到服务器的文章统一在放在source/_posts目录下的
在这里插入图片描述

打开文章，在头部声明分类和标签

---
title: 安装Nodejs、Git、Npm教程
date: 2024-05-10 14:52:57
categories: 
- web前端
- 环境安装
tags:
- Nodejs
- Git
- Npm
---

分类只能有一个，如果有多个默认取第一个；标签可以有多个

在这里插入图片描述

编译并上传

hexo g && hexo d

等待审核查看网站是否生效

在这里插入图片描述

要添加更多的归档或者自定义分类，参考：https://www.jianshu.com/p/ebbbc8edcc24

3.hexo报错解决方案

hexo d命令报错 ERROR Deployer not found: git
解决npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to
搭建Hexo博客中遇到的那些“坑”

Hexo 好看的主题推荐

【项目实战】使用Github pages、Hexo如何10分钟内快速生成个人博客网站

文章目录一.准备工作1.安装git2.安装node安装 cnpm 3.使用 GitHub 创建仓库，并配置 GitHub Pages0.Github Pages是什么1. 在 GitHub 上创建一个新仓库2. 创建您的静态网站3. 启用 GitHub Pages4. 等待构建完成5. 访问您的网站二. Hexo1.什么是Hexo2.安装Hexo1. 安…...

编程日记 2024/5/11 10:18:15

大数据中服役新数据节点和退役旧节点步骤（hive，hadoop）

1- 节点上线操作当要新上线数据节点的时候 ，需要把数据节点的名字追加在 dfs.hosts （1）关闭新增节点的防火墙 （2）在 NameNode 节点的 hosts 文件中加入新增数据节点的 hostname （3）在每个新…...

编程日记 2024/5/11 10:17:13

数论：不定方程的引入

研究的对象：不定方程文章目录研究的对象：不定方程不定方程引入：裴蜀定理证明：欧几里得算法证明：充分性证明：必要性证明： 战术总结： 不定方程引入： 不定方程&#xff0…...

编程日记 2024/5/11 10:11:05

数据中心法

数据中心法是实现词法分析器的结构化方法。通过设计主表和子表分开存储状态转移信息，实现词法分析器的控制逻辑和数据结构分离。主要解决了状态爆炸、难以维护和复杂性的问题。状态爆炸是指当状态和转移较多时，单一使用一个表来存储所有的信息的话会导…...

编程日记 2024/5/11 10:09:02

pdffactory pro8.0虚拟打印机（附注册码）

PdfFactory pro是一款非常受欢迎的PDF虚拟打印机，可以帮助用户将你的其他文档保存为PDF格式。请为用户提供打印/发送/加密等多种实用功能，以及一套完善的PDF打印方案。使用说明下载pdfFactory Pro压缩包，解压后，双击exe文件&am…...

编程日记 2024/5/11 10:06:59

处理用户输入

目录一、传递参数 1.1 读取参数 1.2 读取脚本名二、跟踪参数三、移动参数四、处理选项 4.1 查找选项 4.1.1 处理简单选项 4.1.2 分离参数和选项 4.1.3 处理含值的选项五、选项标准化 5.1 使用 getopt 命令 5.1.1 命令格式 5.1.2 在脚本中使用getopt 5.2 使用…...

编程日记 2024/5/11 10:05:58

在装有centOS7的虚拟机上进行MySQL的安装部署

1.MySQL数据库介绍 1.开源的，跨平台的，社区版免费 2.支持多种存储引擎 3.支持多种主从复制 MySQL版本：5.6 5.7 8.0 https://www.mysql.com MySQL官网 2.安装MySQL5.7 1.配置MySQL仓库 2.安装MySQL服务端软件 3.启动MySQL服务 s…...

编程日记 2024/5/11 10:04:57

【vivado】debug相关时钟及其约束关系

一、前言在xilinx fpga的degug过程中，经常出现由于时钟不对而导致的观测波形失败，要想能够解决这些问题需要了解其debug的组成环境以及之间的数据流。本文主要介绍debug过程中需要的时钟及各时钟之间的关系。二、debug相关时钟 Vivado 硬件管理器使…...

编程日记 2024/5/11 10:03:55

什么是HTTP/2？

HTTP/2（原名HTTP 2.0）即超文本传输协议第二版，使用于万维网。HTTP/2主要基于SPDY协议，通过对HTTP头字段进行数据压缩、对数据传输采用多路复用和增加服务端推送等举措，来减少网络延迟，提高客户端的页面加载…...

编程日记 2024/5/11 10:02:53

【ChatGPT with Date】使用 ChatGPT 时显示消息时间的插件

文章目录 1. 介绍2. 使用方法2.1 安装 Tampermonkey2.2 安装脚本2.3 使用 3. 详细文档指引4. 反馈5. 未来计划6. 开源协议X. Changelog 1. 介绍有时我们希望看到 ChatGPT 的消息时间，但 ChatGPT 并没有显示消息时间的功能。本项目通过 Tampermonkey 开发&#xf…...

编程日记 2024/5/11 10:00:51

STM：TIM定时器——定时中断

文章目录 1、TIM定时器1.1定时器类型1.2定时中断的基本结构 2 定时器初始化2.2 初始化定时器的步骤2.3 TIM库函数2.4 配置TIM2.4.1 Timer.c2.4.2 Timer.c2.4.3 main.c 1、TIM定时器定时器的功能可以对输入的时钟进行计数，并在计数值达到设定值时触发中断。他包含…...

编程日记 2024/5/11 9:58:47

jetson tx2 nx实现在ros1中yolov5实现

亲测用以下链接实现功能。安装ros。Ubuntu18.04安装ROS Melodic（详细，亲测安装完成，有清晰的截图步骤）_ubuntu 18 ros melodic-CSDN博客文章浏览阅读10w次，点赞835次，收藏3.8k次。这也是我在ubuntu里面安…...

编程日记 2024/5/11 9:57:46

【SpringBoot笔记43】SpringBoot应用程序集成spring-boot-admin监控工具

这篇文章，主要介绍SpringBoot应用程序如何集成spring-boot-admin监控工具。目录一、spring-boot-admin监控工具 1.1、创建admin-client客户端（1）引入依赖...

编程日记 2024/5/11 9:56:45

与队列和栈相关的【OJ题】

✨✨✨专栏：数据结构 🧑‍🎓个人主页：SWsunlight 目录一、用队列实现栈： 1、2个队列的关联起来怎么由先进先出转变为先进后出：（核心） 2、认识各个函数干嘛用的： …...

编程日记 2024/5/11 9:54:43

Unity编辑器扩展

Unity编辑器扩展是指为Unity引擎开发者提供的一种扩展功能，可以增强Unity编辑器的功能和效能。这些扩展可以帮助开发者提高工作效率，简化工作流程，并提供更好的用户体验。本文将介绍Unity编辑器扩展的基本概念、开发流程以及一些常见的应用示…...

编程日记 2024/5/11 9:52:40

【kettle】kettle访问数据库系列文章及视频地址（更新中）

1.一直以来想写下基于kettle的系列文章，作为较火的数据ETL工具，也是日常项目开发中常用的一款工具，最近刚好挤时间梳理、总结下这块儿的知识体系。 2.这里整理了kettle访问数据库系列文章及视频地址整体链接，并及时补充、更新相关…...

编程日记 2024/5/11 9:51:39

共赴科技盛会“2024南京智博会”11月在南京国际博览中心召开

2024年，南京这座历史悠久的文化名城迎来了一场科技与智慧交织的盛会——南京智博会|南京国际智慧城市、物联网、大数据。本次博览会以智慧城市、人工智能、消费电子、物联网、大数据为主题，汇聚了全球各地的智能科技精英，共同探讨智慧城市建设…...

编程日记 2024/5/11 9:47:34

题干： 代码： class Solution { public:TreeNode* traversal(TreeNode* root, int low, int high){if(root NULL)return NULL;if(root->val < low)return traversal(root->right, low, high);if(root->val > high)return traversal(ro…...

编程日记 2024/5/11 9:45:32

AVL树的旋转

目录 1.平衡因子 2.旋转 a.节点定义 b.插入插入平衡因子更新旋转左单旋右单旋右左双旋左右双旋 3.AVL树的验证 1.平衡因子我们知道搜索二叉树有缺陷，就是不平衡，比如下面的树什么是搜索树的平衡？就是每个节点的左右子树的…...

编程日记 2024/5/11 9:43:29

C++(动态规划之拆分整数)

其实我交上去都有点似懂非懂题目：（343. 整数拆分 - 力扣（LeetCode）） 给定一个正整数 n ，将其拆分为 k 个正整数的和（ k > 2 ），并使这些整数的乘积最大化。返回 …...

编程日记 2024/5/11 9:42:28

unix C之环境变量

什么是环境变量每个进程都有自己的一张环境变量表，表中的每个条目都是形如 keyvalue 的键值对形式的环境变量。进程可以通过环境变量访问计算机资源。在终端下输入env命令，可以查看环境变量列表。通过echo $name 可以查看某个环境变量的值。环…...

编程日记 2024/5/11 9:40:26

Flutter实战记录-协作开发遇到的问题

一.前言 Android项目使用了混合架构，部分模块使用Flutter进行开发。在电脑A上开发的项目提交到git仓库，电脑B拉取后进行操作，遇到两个问题，特此做一下记录； 二.问题A Settings file ‘D:\xxx\settings.gradle’ line…...

编程日记 2024/5/11 9:39:24

Linux 安装JDK和Idea

安装JDK 下载安装包下载地址： Java Downloads | Oracle (1) 使用xshell 上传JDK到虚拟机 (2) 移动JDK 包到/opt/environment cd ~ cd /opt sudo mkdir environment # 在 /opt下创建一个environment文件夹 ls# 复制JDK包dao /opt/environment下 cd 下载 ls jd…...

编程日记 2024/5/11 9:31:15

c#绘制渐变色的Led

项目场景： c#绘制渐变色的button using System; using System.ComponentModel; using System.Drawing; using System.Drawing.Drawing2D; using System.Windows.Forms; using static System.Windows.Forms.AxHost;namespace WindowsFormsApp2 {public class Gradie…...

编程日记 2024/5/11 9:30:14

LifeCycle之ProcessLifeCycleOwner

问题：想要知道应用程序当前处在前台、后台、或从后台回到前台，想要知道应用的状态， LifeCycle提供了ProcessLifeCycleOwner的类，方便我们知道整个应用程序的生命周期情况 ProcessLifeCycleOwner 使用方法 1.首先添加依赖 imple…...

编程日记 2024/5/11 9:29:13

C++ | Leetcode C++题解之第79题单词搜索

题目： 题解： class Solution { public:bool exist(vector<vector<char>>& board, string word) {rows board.size();cols board[0].size();for(int i 0; i < rows; i) {for(int j 0; j < cols; j) {if (dfs(board, word, i, …...

编程日记 2024/5/11 9:27:09

如何通过PHP语言实现远程控制空调

如何通过PHP语言实现远程控制空调呢？ 本文描述了使用PHP语言调用HTTP接口，实现控制空调，通过不同规格的通断器，来控制不同功率的空调的电源。可选用产品：可根据实际场景需求，选择对应的规格序号设备名称…...

编程日记 2024/5/11 9:23:04

【AI+换脸换装】从OpenAI 探索色情露骨内容领域浅聊AI换脸换装

5月9日消息，据外电报道，OpenAI 周三发布了文档草案，阐述了它希望 ChatGPT 及其其他人工智能技术如何运作。冗长的Model Spec 文件的一部分透露，该公司正在探索进军色情和其他露骨内容领域。看完这个，心里有点惊讶&am…...

编程日记 2024/5/11 9:21:01

Flutter笔记：Widgets Easier组件库（13）- 使用底部弹窗

Flutter笔记 Widgets Easier组件库（13）使用底部弹窗 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite：http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this …...

编程日记 2024/5/11 9:18:58

RobbitMQ基本消息队列的消息发送过程

RabbitMQ: One broker to queue them all | RabbitMQ RabbitMQ官网 SpringAmqp的官方地址：Spring AMQP 代码示例:对着代码看应该能看明白 publisher:消息发送者的代码示例 package cn.itcast.mq.helloworld;import com.rabbitmq.client.Channel; import com.rabb…...

编程日记 2024/5/11 9:15:56

文章目录

一.准备工作

1.安装git

2.安装node

安装 cnpm

3.使用 GitHub 创建仓库，并配置 GitHub Pages

0.Github Pages是什么

1. 在 GitHub 上创建一个新仓库

2. 创建您的静态网站

3. 启用 GitHub Pages

4. 等待构建完成

5. 访问您的网站

二. Hexo

1.什么是Hexo

2.安装Hexo

1. 安装前提

2.使用npm安装hexo-cli

3.新建存储博客的文件夹，初始化hexo

4.进入hexo项目文件夹，安装npm**

5. 本地启动hexo项目

6.将hexo博客站点部署到github上

7. 推送hexo项目到github

hexo clean && hexo deploy 推送报错解决

3.Hexo常用命令

4.更换theme主题

1. 找到喜欢的主题

2.clone主题，或者将主题下载到本地解压

3. 将主题解压后放到Hexo项目的themes文件夹下面

4. 打开_config.yml配置文件，找到theme:xxx替换成你克隆下来的文件名

5. 重新编译，并本地启动hexoo该hero项目

6. 本地ok后上传到github等待审核通过

三.配置指南

1._config.yml中设置网站信息

2.配置分类、标签

2.1.创建分类选项

2.2. 创建标签选项

2.3.打开你要部署的md文件

3.hexo报错解决方案

相关文章：

3. 将主题解压后放到Hexo项目的`themes文件夹`下面

4. 打开`_config.yml`配置文件，找到`theme:xxx`替换成你克隆下来的文件名