GitHub Pages + Hexo搭建个人博客网站

一、准备工作

安装Git

安装NodeJS

  1. 访问nodejs官网，点击稳定版，并下载node.js
  2. 双击刚下载的文件，按步骤默认安装就行
  3. 验证 npm -v、node -v

    二、创建仓库

    使用个人 GitHub 创建仓库，并配置 GitHub Pages

    注意: 此仓库用于存放个人博客页面，仓库名必须使用 .github.io 格式。

三、安装Hexo

Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。点击进入 官网。

  1. 安装 Hexo npm install -g hexo-cli
  2. 查看版本 hexo -v

  3. 创建一个项目 hexo-blog 并初始化

    1
    2
    3
    sudo hexo init hexo-blog
    sudo cd hexo-blog
    sudo npm install

  4. 本地启动

    1
    2
    sudo hexo generate # 生成页面，此命令可以简写为 `hexo g`
    sudo hexo server # 本地启动，可简写为 `hexo s`

  5. 浏览器访问 http://localhost:4000

    四、更换主题

    Hexo 默认的主题不太好看，不过官方提供了数百种主题供用户选择，可以根据个人喜好更换，官网主题点 这里 查看。这里介绍两个主题的使用方法，Next 和 Fluid，个人比较喜欢Fluid，后面章节的功能也是以 Fluid 为基础进行讲解的。

  6. 安装主题

下载 最新 release 版本 解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

  1. 指定主题

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

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

  1. 创建「关于页」

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

1
hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。
修改后的文件示例如下：
1
2
3
4
5
6
7
---
title: about
date: 2020-02-23 19:20:33
layout: about
---

这里写关于页的正文，支持 Markdown, HTML

本地启动
1
2
sudo hexo g -d  # Generate static files & Deploy to remote sites
sudo hexo s			# Run server

浏览器访问 http://localhost:4000

五、创建文章

如下修改 Hexo 博客目录中的 _config.yml，打开这个配置是为了在生成文章的时候生成一个同名的资源目录用于存放图片文件。

1
post_asset_folder: true

执行如下命令创建一篇新文章，名为《测试文章》
1
hexo new post "My New Post"

1
2
3
4
5
6
7
8
9
---
title: XXX
date: 2023-04-23 15:24:20
tags:
- 原创
categories:
- ChatGPT
math: true
---

本地启动
1
2
sudo hexo g -d  # Generate static files & Deploy to remote sites
sudo hexo s			# Run server

六、个性化页面展示

修改根目录下 _config.yml 以及 themes\fluid 下 _config.yml 文件
略……

hexo 主题解决无法显示数学公式？
基于Hexo搭建的个人博客，默认使用 hexo-renderer-marked 引擎渲染网页，该引擎会把一些特殊的 markdown 符号转换为相应的 html 标签，比如在 markdown 语法中，下划线_代表斜体，会被渲染引擎处理为标签。
因为类 Latex 格式书写的数学公式下划线_表示下标，有特殊的含义，如果被强制转换为标签，那么 MathJax 引擎在渲染数学公式的时候就会出错。
解决方法：
步骤一、更换 Hexo 的 markdown 渲染引擎，卸载 hexo-renderer-marked，安装 hexo-renderer-kramed 引擎（要保证只留其中一个！）

1
2
npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

步骤二、找到node_modules\kramed\lib\rules\inline.js，做如下修改：
1
2
3
4
5
6
7
# 把第11行的 escape 变量的值做·相应的修改：
//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/,

# 同时把第20行的em变量也要做相应的修改。
  //em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

步骤三、在 Fluid 主题中开启 MathJax 开关
进入到主题目录，找到 _config.yml 配置，把 math 默认的 false 修改为true，具体如下：
1
2
3
4
5
# Math Equations Render Support
math:
  enable: true
	pecific: true
	engine: mathjax

之后，在文章的Front-matter里打开mathjax开关，如下：
1
2
3
4
5
6
7
8
9
10
---
title: index.html
date: 2018-07-05 12:01:30
categories:
- 博客搭建
tags:
- 博客搭建
- node
math: true
--

步骤四、重新启动hexo, 问题完美解决
1
2
sudo hexo clean
sudo hexo g -d

hexo+github本地和线上图片不显示问题？

https://blog.csdn.net/z952957407/article/details/111642548

七、添加阅读量统计

八、添加评论功能

九、发布到GitHub Pages

安装hexo-deployer-git

1
npm install hexo-deployer-git --save

修改根目录下的 _config.yml，配置 GitHub 相关信息
1
2
3
4
5
deploy:
  type: git
  repo: https://github.com/xxx/xxx.github.io.git
  branch: main
  token: ghp_3KakcaPHerunNRyMerofcFd9pblU282FSbsY

其中 token 为 GitHub 的 Personal access tokens，获取方式如下图
image.png

部署到GitHub

1
sudo hexo g -d

浏览器访问 https://xxx.github.io/，部署成功

十、发布到自己服务器，Nginx代理

略

#个人博客搭建
GitHub Pages + Hexo搭建个人博客网站
http://example.com/2023/04/23/2023-04-23-GitHub Pages + Hexo搭建个人博客网站/
作者
Ning Shixian
发布于
2023年4月23日
许可协议