Hexo 博客搭建

发表于 更新于 分类于 ，

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

安装应用

Hexo 基于 Node.js 开发，需要以下工具支撑运行。

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

通过 npm 安装 Hexo 应用。

1
npm install -g hexo-cli

创建博客

新建任意目录，作为 Hexo 博客的根目录。

1
mkdir test-blog

初始化 Hexo 博客，新建和下载所需要的文件。

1
2
cd test-blog
hexo init

完成之后，目录的基本结构如下所示。

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

启动 Node.js 内置的服务器，在本地预览博客。

1
2
3
hexo clean      # 清除缓存文件和已生成的静态文件
hexo generate   # 可以缩写成hexo g，生成静态文件。
hexo server     # 可以缩写成hexo d，启动服务器。

默认情况下，通过 http://localhost:4000 访问博客。

预览博客

配置博客

Hexo 博客的一些基础配置。

博客主题

基于 Next 主题进行配置。

在博客根目录下载 Next 主题。

1
git clone https://github.com/next-theme/hexo-theme-next themes/next

将博客主题配置文件复制到博客根目录。

1
cp themes/next/_config.yml ./_config.next.yml

编辑 _config.yml 配置文件。

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

分类页面

在博客根目录执行新建页面命令。

1
hexo new page categories

打开 source/categories/index.md 文件，在顶部的 YAML 代码块中配置以下内容。

1
2
3
title: 分类
date: 2025-10-22 15:30:18
type: "categories"

以 Next 主题为例，编辑 _config.next.yml 文件，启用分类页面显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  #tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  #archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

标签页面

在博客根目录执行新建页面命令。

1
hexo new page tags

打开 source/tags/index.md 文件，在顶部的 YAML 代码块中配置以下内容。

1
2
3
title: 标签
date: 2025-10-22 15:30:23
type: "tags"

以 Next 主题为例，编辑 _config.next.yml 文件，启用标签页面显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  #about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  #categories: /categories/ || fa fa-th
  #archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

内容搜索

使用 npm 安装 hexo-generator-searchdb 模块。

1
npm install hexo-generator-searchdb

以 Next 主题为例，编辑 _config.next.yml 文件，启动本地搜索模块。

1
2
3
4
5
6
7
8
9
10
# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

编辑 _config.yml 文件，新增以下配置。

1
2
3
4
5
6
7
# Search
## Local Search
search:
  path: search.json
  field: post
  content: true
  format: striptags

图片引用

默认情况下，可以直接使用 MarkDown 语法在文章中引用本地或者图床中的图片。

1
2
![This is an example image](/images/example.png)
![This is an example image](https://xxx.xxx.com/images/example.png)

对于本地图片资源，为了便于组织和管理，可以启用资源目录，将图片与文章放置在一起，通过相对路径进行引用。

1
2
# _config.yml
post_asset_folder: true

文章与图片的目录结构如下，每篇文章对应一个同名的资源目录。

1
2
3
4
_post
├── example.md
└── example
	└── example.png

使用 MarkDown 语法或者标签插件提供的语法在文章中引用图片。

1
2
![This is an example image](example/example.png)
{% asset_img example.png This is an example image %}

在 hexo-renderer-marked 3.1.0 中，引入了新的选项，用于简化 MarkDown 引用图片的语句。

1
2
3
4
5
# _config.yml
post_asset_folder: true
marked:
  prependRoot: false
  postAsset: true

使用简化的 MarkDown 语法在文章中引用本地图片。

1
![This is an example image](example.png)

部署博客

Hexo 提供了快速部署功能，可以将博客快速部署到指定服务器。

GitHub

在 GitHub 中新建公共仓库，仓库名必须为 <GitHub用户名>.github.io 格式。

本地配置 Git 用户信息，并生成 SSH 密钥对。

1
2
3
git config --global user.name "<用户名称>"
git config --global user.email "<用户邮箱>"
ssh-keygen -t rsa -C "<用户邮箱>"

复制 ~/.ssh 目录下 id_rsa.pub 文件中的 SSH 公钥信息，将其添加到 GitHub 设置中。

添加密钥

安装 hexo-deployer-git 插件。

1
npm install hexo-deployer-git --save

编辑 _config.yml 配置文件，修改部署配置。

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:<GitHub用户名>/GitHub用户名>.github.io.git
  branch: main

将博客部署到 GitHub 仓库。

1
hexo d

等待一段时间后，可以通过 https://<GitHub用户名>.github.io 访问博客。

参考链接

文档 | Hexo