哈喽，大家好！今天我们来聊一聊如何使用 Hexo 框架和超火的 NexT 主题来搭建一个属于自己的技术博客。这篇文章会从零开始，一步步带你完成安装、配置，并解决一些常见的小麻烦，比如配置数学公式和流程图。
这篇教程基于以下版本，如果你的版本差异较大，某些配置项可能会有不同哦：
- Node.js:
22.3.0 - npm:
10.8.1 - Hexo:
7.2.0 - NexT:
8.20.0
第一步：安装 Hexo 脚手架
首先，咱们得把 Hexo 的命令行工具装上。它能帮你快速创建博客项目、生成文章、启动本地服务等。打开你的终端，敲入下面的命令：
# 全局安装 hexo-cli
npm install -g hexo-cli安装完成后，就可以初始化你的博客项目啦。
# 在指定文件夹（比如 my-blog）中创建项目
hexo init my-blog
# 进入项目目录
cd my-blog
# 安装项目依赖的包
npm install现在，你的博客框架就已经搭好了，是不是很简单？
第二步：拥抱 NexT 主题
一个好看的主题能让你的博客瞬间高大上起来，NexT 就是一个非常优秀且流行的选择。我们直接用 npm 来安装它，这样方便后续更新。
在你的博客根目录（my-blog）下执行：
npm install hexo-theme-next@latest装好之后，怎么启用它呢？别急，我们需要在 Hexo 的主配置文件 _config.yml 中，找到 theme 字段，把它改成 next。
# _config.yml
...
theme: next
...强烈推荐的一个好习惯：
为了方便管理和更新，不要直接修改 node_modules/hexo-theme-next/_config.yml 里的主题配置文件。更好的做法是，在你的博客根目录（和 _config.yml 同级）下，新建一个 _config.next.yml 文件。
然后，你可以把主题默认的配置（从 node_modules/hexo-theme-next/_config.yml）复制到这个新文件中。之后，所有的主题相关配置都在这里修改，再也不怕 npm install 更新主题时把自己的配置给覆盖了！
第三步：个性化你的博客
调整文章模板
每次 hexo new "文章标题" 的时候，Hexo 都会根据 scaffolds/post.md 这个模板来生成 Markdown 文件。我们可以修改它，添加一些自己常用的 front-matter 字段。
比如，我把它改成了这样：
---
title: {{ title }}
date: {{ date }}
tags:
categories:
---修复 VSCode 自动格式化问题
很多同学喜欢用 VSCode 写博客，如果开启了保存时自动格式化，可能会遇到一个头疼的问题：模板里的 {{ title }} 会被格式化成 { { title } }（中间多了个空格），导致 Hexo 无法正确识别变量。
解决方法很简单，在 VSCode 的 settings.json 文件里，把 scaffolds 文件夹排除在格式化规则之外就行了。
// .vscode/settings.json
"files.exclude": {
"**/scaffolds": true
}第四步：跑起来，发布出去！
本地预览
在写文章的时候，我们肯定想随时看看效果。执行下面的命令，就可以在本地启动一个服务。
# 清理缓存，生成静态文件
hexo clean && hexo g
# 启动本地服务
hexo s之后，在浏览器打开 http://localhost:4000 就能看到你的博客啦！
一键部署
博客写好了，总要发布到网上去。Hexo 支持一键部署到 GitHub Pages、Vercel 等平台。这里以 Git 为例。
首先，安装一个部署插件：
npm install hexo-deployer-git --save然后，在 _config.yml 文件里配置你的 Git 仓库地址：
# _config.yml
deploy:
type: 'git'
repo: <你的仓库地址，比如 https://github.com/user/repo.git>
branch: [branch] # 比如 gh-pages
message: [message] # 自定义提交信息配置好后，用这个命令就能把你的网站发布出去了：
hexo clean && hexo g -d第五步：让博客更强大（进阶配置）
1. 优雅地展示数学公式
对于技术博客来说，写数学公式是刚需。NexT 主题内置了对 MathJax 和 KaTeX 的支持，配置起来非常方便。
第一步：修改 NexT 主题配置
打开我们之前创建的 _config.next.yml 文件，找到 math 部分，进行如下配置：
# _config.next.yml
math:
# 关闭全局渲染，只在需要时加载数学公式库
# 这样可以提升网站加载速度
every_page: false
mathjax:
# 启用 MathJax
enable: true
# 标签系统，建议使用 ams，否则可能报错
tags: ams
# 如果用 MathJax，就把 KaTeX 关掉
katex:
enable: falseevery_page: false 这个选项特别有用。它意味着只有当你在文章的 front-matter 中显式声明 mathjax: true 时，这个页面才会加载数学公式的渲染库。
---
title: 这是一个包含公式的示例文章
date: 2025-09-08 14:55:00
mathjax: true
---
这里可以写你的公式，比如 $E=mc^2$。第二步：更换 Markdown 渲染器
Hexo 默认的渲染器对 LaTeX 公式的支持不够好，我们需要换成 pandoc。
首先，确保你的电脑上已经安装了 Pandoc。
然后，在你的博客根目录执行以下命令：
# 卸载默认的渲染器
npm un hexo-renderer-marked
# 安装 pandoc 渲染器
npm i hexo-renderer-pandoc最后，重新生成一下博客就大功告成啦！
hexo clean && hexo g公式编辑神器推荐：
- MyScript: 支持手写识别，直接画出公式就能转成 LaTeX。
- Simpletex: 支持截图识别和手写，无次数限制，非常强大。
2. 用 Mermaid 绘制流程图
除了公式，流程图、时序图也是写技术文章的好帮手。NexT 同样集成了 Mermaid。
第一步：开启 Mermaid
在 _config.next.yml 中找到 mermaid 配置项：
# _config.next.yml
mermaid:
enable: true
# 可以为亮色和暗色模式指定不同的主题
theme:
light: default
dark: dark第二步：避免语法冲突
为了防止 Hexo 的代码高亮把 Mermaid 的语法给错误解析了，需要在 Hexo 的主配置 _config.yml 里排除掉它。
# _config.yml
highlight:
exclude_languages:
- mermaid第三步：开始使用
在你的 Markdown 文章中，使用 mermaid 标签包裹图表代码即可。
{% mermaid graph TD %}
A[准备工作] -->|安装依赖| B(配置主题)
B --> C{遇到问题?}
C -->|是| D[查看文档]
C -->|否| E[发布博客]
{% endmermaid %}效果如下：
graph TD
A[准备工作] -->|安装依赖| B(配置主题)
B --> C{遇到问题?}
C -->|是| D[查看文档]
C -->|否| E[发布博客]结语
好啦，到这里，一个功能齐全、外观漂亮的 Hexo + NexT 博客就搭建完成了。从安装、配置到发布，再到数学公式和流程图的进阶玩法，我们都过了一遍。希望这篇文章能帮你顺利开启你的博客之旅！如果遇到任何问题，别忘了查阅官方文档，它们是最好的老师。
