前言
在上一篇系列文章中，我们对主流博客框架进行了全面对比。本文将深入讲解 Hexo 博客框架，从目录结构、配置优化，到主题开发、插件使用和 SEO 优化，帮助你全面掌握 Hexo。
Hexo 目录结构详解
一个标准的 Hexo 项目目录结构如下：
my-blog/
├── .github/ # GitHub 相关配置（Actions 等）
├── node_modules/ # npm 依赖（不要手动修改）
├── public/ # 生成的静态文件目录
├── scaffolds/ # 文章/页面模板
│ ├── draft.md # 草稿模板
│ ├── page.md # 页面模板
│ └── post.md # 文章模板
├── scripts/ # 自定义脚本目录
├── source/ # 源文件目录（重要！）
│ ├── _data/ # 数据文件（yml/json 格式）
│ ├── _posts/ # 博客文章目录
│ ├── about/ # 关于页面
│ ├── categories/ # 分类页（自动生成）
│ └── tags/ # 标签页（自动生成）
├── themes/ # 主题目录
│ └── next/ # 使用的主题
├── _config.yml # 站点配置文件（重要！）
├── _config.next.yml # 主题配置文件（主题提供）
├── package.json # 项目依赖信息
└── .gitignore # Git 忽略文件关键目录说明
| 目录/文件 | 作用 |
|---|---|
source/_posts/ |
所有博客文章存放处，支持子目录分类 |
source/ 下其他目录 |
会被复制到 public/，作为独立页面 |
themes/ |
存放所有主题，当前使用的主题在 _config.yml 中指定 |
scaffolds/ |
新建文章时的模板，可自定义默认 front matter |
public/ |
hexo generate 后生成的静态 HTML 文件 |
配置文件详解
Hexo 有两层配置：站点配置（_config.yml）和主题配置（各主题自带）。
站点配置 _config.yml 核心选项
# ==================== 基本设置 ====================
title: 我的博客 # 站点标题
subtitle: 副标题 # 副标题
description: 站点描述 # 用于 SEO
keywords: Hexo, 博客, 编程 # 站点关键词
author: 作者名 # 作者
language: zh-CN # 语言
timezone: Asia/Shanghai # 时区
# ==================== URL 设置 ====================
url: https://yourdomain.com # 站点 URL
root: / # 站点根目录
permalink: :year/:month/:day/:title/ # 文章链接格式
permalink_defaults: # 永久链接默认值
# ==================== 目录设置 ====================
source_dir: source # 源文件目录
public_dir: public # 生成文件目录
tag_dir: tags # 标签目录
archive_dir: archives # 归档目录
category_dir: categories # 分类目录
# ==================== 写作设置 ====================
new_post_name: :title.md # 新文章文件名格式
default_layout: post # 默认布局
titlecase: false # 标题自动转为首字母大写
external_link: # 外链设置
enable: true
field: site
exclude: ''
# ==================== 分类 & 标签 ====================
default_category: uncategorized # 默认分类
category_map: # 分类别名
tag_map: # 标签别名
# ==================== 日期格式 ====================
date_format: YYYY-MM-DD
time_format: HH:mm:ss
# ==================== 分页 ====================
per_page: 10 # 每页文章数
pagination_dir: page # 分页目录
# ==================== 主题 ====================
theme: next # 使用的主题名称
# ==================== 部署 ====================
deploy:
type: git
repo: https://github.com/user/repo.git
branch: main永久链接（Permalink）格式
Hexo 支持多种永久链接格式：
| 变量 | 说明 | 示例 |
|---|---|---|
:year |
年份 | 2021 |
:month |
月份 | 10 |
:day |
日期 | 01 |
:title |
文章标题（slug） | my-post |
:id |
文章 ID | 1 |
:category |
分类 | tech |
推荐配置：
# SEO 友好，包含分类
permalink: :category/:title/
# 或按日期组织
permalink: :year/:month/:day/:title/配置优化技巧
1. 使用独立的主题配置文件
从 Hexo 5.0 开始，支持独立的主题配置文件，避免修改主题文件：
# 将主题默认配置复制到站点根目录
cp themes/next/_config.yml _config.next.yml然后在 _config.yml 中：
theme: next
# 无需在 theme_config 中写配置，会自动读取 _config.next.yml2. 文章资源文件夹
启用文章资源文件夹，每篇文章可以有独立的资源目录：
post_asset_folder: true启用后，创建文章时会同时创建同名文件夹：
source/_posts/
├── my-post.md
└── my-post/ # 文章资源文件夹
├── image1.png
└── code.zip在文章中使用资源：
3. 草稿功能
Hexo 支持草稿，草稿不会发布到正式站点：
# 创建草稿
hexo new draft "草稿文章"
# 预览草稿（本地服务器）
hexo server --drafts
# 发布草稿（移到 _posts 目录）
hexo publish "草稿文章"主题开发基础
主题目录结构
themes/my-theme/
├── _config.yml # 主题配置
├── layout/ # 布局模板
│ ├── layout.ejs # 主布局
│ ├── index.ejs # 首页
│ ├── post.ejs # 文章页
│ ├── archive.ejs # 归档页
│ ├── category.ejs # 分类页
│ ├── tag.ejs # 标签页
│ └── page.ejs # 独立页面
├── source/ # 静态资源
│ ├── css/
│ ├── js/
│ └── images/
└── scripts/ # 主题脚本模板语法（EJS 示例）
Hexo 主题通常使用 EJS 或 Swig 模板引擎：
<!-- layout.ejs -->
<!DOCTYPE html>
<html>
<head>
<title><%- config.title %></title>
<link rel="stylesheet" href="<%- url_for('css/style.css') %>">
</head>
<body>
<%- body %>
</body>
</html>常用 Hexo 变量
| 变量 | 说明 |
|---|---|
config |
站点配置对象 |
page |
当前页面对象 |
site |
全站数据（文章、页面、分类、标签） |
url_for() |
生成 URL |
theme |
主题配置对象 |
插件生态
Hexo 有丰富的插件生态，分为两类：
1. 核心插件（官方维护）
| 插件 | 功能 |
|---|---|
hexo-generator-archive |
生成归档页 |
hexo-generator-category |
生成分类页 |
hexo-generator-tag |
生成标签页 |
hexo-generator-feed |
生成 RSS 订阅 |
hexo-generator-sitemap |
生成站点地图 |
hexo-deployer-git |
Git 部署 |
2. 实用第三方插件
# 搜索功能（Algolia）
npm install hexo-algolia --save
# 阅读时间统计
npm install hexo-reading-time --save
# 文章字数统计
npm install hexo-wordcount --save
# 本地搜索
npm install hexo-generator-search --save
# 图片懒加载
npm install hexo-lazyload-image --save
# 压缩 HTML/CSS/JS
npm install hexo-all-minifier --saveSEO 优化
1. 添加站点地图
npm install hexo-generator-sitemap --save配置 _config.yml：
sitemap:
path: sitemap.xml2. 添加 RSS 订阅
npm install hexo-generator-feed --save配置：
feed:
type: atom
path: atom.xml
limit: 203. 自定义页面头部
在文章的 front matter 中添加 SEO 相关字段：
---
title: 文章标题
date: 2021-10-01
tags: [Hexo, SEO]
description: 这是文章的详细描述，会显示在搜索结果中
keywords: Hexo, SEO优化, 博客
---4. 添加 Google Analytics
在主题配置中添加跟踪 ID：
# Next 主题示例
google_analytics:
tracking_id: UA-XXXXXXXXX-X5. 添加自定义域名和 HTTPS
参考基础版教程中的自定义域名配置。
Next 主题进阶配置
添加评论系统
Next 主题内置多种评论系统支持：
# _config.next.yml
comments:
active: gitalk
gitalk:
clientID: your-client-id
clientSecret: your-client-secret
repo: your-repo
owner: your-username
admin: [your-username]支持的评论系统：Gitalk、Valine、Disqus、Utterances 等。
添加文章打赏
reward:
enable: true
comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechatpay.png
alipay: /images/alipay.png添加社交分享
social_share:
enable: true
sites: wechat, weibo, qq, qzone, twitter, facebook常见问题解决
问题1：生成速度慢
解决：
# 使用 hexo 的缓存功能
hexo clean # 清理缓存
hexo generate --force # 强制重新生成
# 或安装增量生成插件
npm install hexo-browsersync --save问题2：部署后样式丢失
原因：root 配置不正确
解决：确认 _config.yml 中的 root 设置：
# 如果站点在子目录，如 https://domain.com/blog/
root: /blog/
# 如果在根目录
root: /问题3：图片路径错误
解决：使用 post_asset_folder: true 并配合标签插件：
{% asset_img image.png 图片描述 %}总结
通过本文，你应该已经掌握了 Hexo 的核心知识：
- 目录结构：理解各目录的作用
- 配置优化：使用独立主题配置、资源文件夹、草稿功能
- 主题开发：了解主题的基本结构和模板语法
- 插件使用：安装和配置常用插件
- SEO 优化：站点地图、RSS、Google Analytics
在下一篇文章中，我们将介绍 Hugo 博客框架详解，看看这个"速度之王"有何过人之处。