Hexo 博客搭建并部署到 GitHub Pages(2024最新详细版)_本地 hexo 博客推送到 githubpages

效果演示

我的博客，欢迎添加友链。

前置条件

本机已安装好 Git 和 Node.js ，Node 版本一定不要最新的22版本(会出现各种奇怪的问题)，建议16和18稳定版本。

Git 安装

Node.js 安装

1.安装 Hexo

npm install hexo-cli -g
1

终端执行hexo -version出现 Hexo 版本号，说明安装成功

2.本地建站

2.1 初始化

找到要存放博客的目录，进入终端执行：

 hexo init myblog
 cd myblog
 npm install
1
2
3

初始化成功显示：

vscode 打开 myblog，项目目录如下：

_config.yml 存放的是博客配置信息， source/_posts 是存放文章的地方。

2.2预览

打开终端，进入项目根目录执行：

hexo clean # 清除缓存文件，建议写完文章后执行一次
hexo g		# 生成 public 文件夹，写完文章执行
hexo s		# 启动 hexo 服务
1
2
3

浏览器访问 http://localhost:4000/ 出现下图说明启动成功

3.更换主题

去主题官网，里面有上百种主题，这里选择 Fluid 主题，也是我个人在用的。

执行命令，将主题安装到myblog根目录

npm install --save hexo-theme-fluid
1

然后在博客目录下创建 _config.fluid.yml，将 Fluid 主题的 _config.yml 内容复制进去(打开链接复制)。

后续修改博客的配置，例如标题，头像，评论等等只需要在 _config.fluid.yml文件中配置就行。

3.1指定主题

如下修改myblog博客目录中的 _config.yml：

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改
1
2

3.2创建关于页面

首次使用主题的「关于页」需要手动创建：

hexo new page about
1

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---
title: about
layout: about
---

这是关于页面
1
2
3
4
5
6

3.3启动

终端执行：

hexo clean # 清除缓存文件，建议写完文章后执行一次
hexo g		# 生成 public 文件夹，写完文章执行
hexo s		# 启动 hexo 服务
1
2
3

浏览器访问 http://localhost:4000/ 出现下图说明主题启动成功

至此本地搭建全部完成，下面介绍如何部署到 GitHub Pages 上，让别人看到你的博客。

4.部署到 GitHub Pages

登录 GitHub，新建一个 Repository，Repository name一定要是你的用户名.github.io

来到仓库主页，复制如下链接

打开博客目录下的_config.yml，拉到最后，填写deploy模块：repository 填写刚才复制的链接

一定要安装 Git 插件：

 npm install hexo-deployer-git --save
1

现在可以将博客部署上去了，执行

 hexo c && hexo g && hexo d  # hexo d 表示执行部署
1

执行成功可以通过 你的用户名.github.io 来访问博客了。

至此搭建博客并部署已全部完成。