从零开始搭建 Hexo 博客简明教程（2026实战版）
什么是Hexo博客？
Hexo 是一个基于 Node.js 的静态博客框架，它会把你用 Markdown 写的文章，生成一整套纯静态页面（HTML、CSS、JS），然后直接部署到任意静态空间（比如 GitHub Pages、Vercel、Netlify、自己的服务器 Nginx 等），访客访问的是已经生成好的静态文件，不依赖后台程序和数据库。
Hexo 官方网站： https://hexo.io/zh-cn/
一、准备工作：环境与工具
二、本地搭建 Hexo 博客
- 全局安装 hexo 框架: 打开 cmd 运行
1 | npm install -g hexo-cli |
- 新建一个文件夹（例如
MyBlog），进入该文件夹内，右击运行 git ，输入：
1 | hexo init |
- 生成完 hexo 模板，安装npm：
1 | npm install |
博客的主体部分到此已经完成了，在本地预览博客来看看效果吧。运行
1 | hexo server |
然后在浏览器访问：http://localhost:4000
你会看到一个默认主题的博客。按下终端里的 Ctrl + C 可以关闭本地预览。
三、认识 Hexo 项目结构（快速概览）
常见关键目录说明：
_config.yml：站点配置文件。站点标题、作者名、语言、部署配置等。source/：内容目录。source/_posts/：所有博客文章的 Markdown 文件都在这里。- 其他子目录（如
source/about）是独立页面。
themes/：主题目录。- 例如等会会安装的 NexT 主题：
themes/next/
- 例如等会会安装的 NexT 主题：
scaffolds/：新文章 / 新页面的模版。package.json：项目依赖以及常用 npm 脚本配置。node_modules/：依赖安装后的目录（可以随时删掉，重新npm install即可恢复）。public/：hexo generate生成的静态网页文件（可删，会重新生成）。
四、基础个性化：主题与站点信息
Hexo主题官网：https://hexo.io/themes/
推荐几个常用的 Hexo 主题：
4.1 更换主题（以 NexT主题 为例）
你可以访问 Hexo 主题官网 挑选更多主题。
- 在博客根目录执行：
1 | git clone https://github.com/theme-next/hexo-theme-next themes/next |
- 打开站点配置文件
_config.yml，找到（或新增）：
1 | theme: next |
- 保存后，生成并预览查看效果：
1 | hexo clean |
在浏览器中访问 http://localhost:4000，你会看到 NexT 主题的默认样式。
4.2 设置站点基本信息
编辑博客根目录下的 _config.yml，找到 # Site 部分，注意冒号后面要有空格：
1 | # Site |
4.3 设置侧边栏头像
- 在
source/下新建uploads文件夹，并把头像图片（例如avatar.jpg）放进去：
1 | source/ |
- 编辑
themes/next/_config.yml，找到avatar配置：
1 | avatar: |
保存后重新生成并预览，即可看到侧边栏头像。
4.4 设置顶部菜单与常用页面
4.4.1 菜单栏配置
打开 /themes/next/_config.yml ，将字段 menu 中需要添加的菜单前面的注释去掉即可。如需要添加其他菜单可按需添加（注意字段的缩进）：
1 | menu: |
- 想隐藏某个菜单：在该行前面加
#即可。 - 想新增菜单：参照格式添加一行，例如：
1 | projects: /projects/ || fa fa-code |
4.4.2 分类页 / 标签页 / 「关于我」页
- 创建分类页面
新建一个页面，命名为 categories ，命令如下：
1 | hexo new page categories |
编辑刚新建的页面 /source/categories/index.md ，将页面的类型设置为 categories ，主题将自动为这个页面显示所有分类（注意保留冒号后的空格）。
1 |
|
- 创建标签云界面：
新建一个页面，命名为 tags ，命令如下:
1 | hexo new page tags |
编辑刚新建的页面，将页面的类型设置为 tags ，主题将自动为这个页面显示标签云。
1 |
|
- 创建”关于我”页面：
新建一个 about 页面：
1 | hexo new page about |
编辑 source/about/index.md，在头部写好标题、时间，正文用 Markdown 写你的个人介绍即可。
1 |
|
4.5 设置侧边栏社交链接
编辑站点的 _config.yml，找到字段 social ，然后添加社交站点名称与地址即可。键值格式为 显示名称：链接地址 ，例如：
1 | social: |
打开 /themes/next/_config.yml, 在 social_icons 字段下添加社交站点名称（注意大小写）与 图标。 enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。例如：
1 | social_icons: |
保存后重新生成并预览，侧边栏就会显示相应的社交图标与链接。
五、部署到 GitHub Pages（最基础上线方案）
注册 GitHub 账号：如果还没有 GitHub 账号的，需要先注册一个
在 Github 上创建名字为 XXX.github.io 的项目，XXX为自己的 GitHub 用户名。（项目名必须为XXX.github.io，XXX必须为你的Github用户名）
打开本地的 MyBlog 文件夹项目内的 _config.yml 配置文件，将其中的 type 设置为 git :
1 | deploy: |
注意：
- 把
your-name替换为你的 GitHub 用户名； branch一般为main或master，以你仓库的默认分支为准。
运行：
1 | npm install hexo-deployer-git --save |
本地生成静态文件，并将静态文件推送至GitHub，在博客根目录执行：
1 | hexo clean # 可选，清理缓存和旧的静态文件 |
稍等片刻后，在浏览器里访问：
1 | http://your-name.github.io |
就可以看到已经上线的博客了。
六、写文章与日常发布流程
6.1 新建文章
在博客根目录执行：
1 | hexo new "我的第一篇文章" |
会在 source/_posts 目录下生成一个 .md 文件，例如 我的第一篇文章.md。
编辑该文件，在开头你会看到 YAML 头信息，例如：
1 |
|
6.2 发布文章到线上：
1 | hexo clean # 可选，有时候遇到样式或路径异常时很有用 |
推荐文章：
博客之图床
微信
支付宝