Hexo 新手配置清单

Hexo 博客搭建 静态博客
工具教程
发布日期:   2025-11-02
更新日期:   2025-11-06
文章字数:   1.3k
阅读次数:  

Hexo 新手配置清单：从搭建到上线的全流程指南

作为 Hexo 新手，刚初始化博客后可能会被各种配置项困扰。这份清单整理了从主题安装、功能插件到部署上线的核心步骤，附带具体代码和操作提示，跟着做就能快速搭建起可用的博客。

一、主题安装：让博客告别默认样式

Hexo 默认主题（landscape）过于简单，推荐两款主流主题，按步骤操作即可切换：

1. Next 主题（极简风，适合技术博客）

安装步骤：

  1. 进入博客根目录，执行命令拉取主题：
    1
    git clone https://github.com/next-theme/hexo-theme-next themes/next
  2. 打开根目录 _config.yml，修改主题配置： 
    1
    theme: next # 替换默认主题 landspace
  3. 基础配置（进入 themes/next/_config.yml）：
    • 开启暗黑模式：darkmode: true
    • 添加导航菜单（如 “分类”“标签”）：
    1
    2
    3
    4
    5
    menu:
    home: / || home
    categories: /categories/ || th
    tags: /tags/ || tags
    about: /about/ || user

2. Butterfly 主题（清新风，适合个人博客）

安装步骤：

  1. 拉取主题： 
    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  2. 根目录 _config.yml 启用主题： 
    1
    theme: butterfly
  3. 初始化主题配置（推荐复制主题配置到根目录，方便维护）： 
    1
    cp themes/butterfly/_config.yml _config.butterfly.yml
  4. 基础设置（编辑 _config.butterfly.yml）：
    • 设置网站图标：favicon: /img/favicon.ico（需提前将图标放入 source/img 目录）
    • 开启侧边栏：sidebar: right（右侧显示文章目录和作者信息）

二、必备插件：提升博客功能与体验

1. 部署插件（必装，用于发布到 GitHub/Gitee）

1
npm install hexo-deployer-git --save


在根目录 _config.yml 配置仓库地址：

1
2
3
4
deploy:
    type: git
    repository: https://github.com/yourname/yourname.github.io
    branch: main # 分支名（GitHub 新仓库默认 main，旧仓库可能是 master）

2. 代码高亮（让代码块更美观）

1
npm install hexo-prism-plugin --save

在根目录 _config.yml 启用：

1
2
3
4
prismjs:
    mode: 'preprocess'  # 实时高亮
    theme: 'dracula'    # 主题（可选 monokai、solarized-light 等）
    line_number: true   # 显示行号

3. 自动生成文章摘要（首页显示）

1
npm install hexo-generator-feed --save

在根目录 _config.yml 中开启：

1
2
3
auto_excerpt:
    enable: true
    length: 120 # 摘要长度，默认全文

4. SEO 优化（帮助搜索引擎收录）

1
2
3
# 生成站点地图
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

根目录 _config.yml 添加：

1
2
3
4
5
# 生成 sitemap 文件，帮助搜索引擎收录
sitemap:
    path: sitemap.xml
baidusitemap:
    path: baidusitemap.xml

生成后可在 public 目录找到这两个文件，提交给 Google 或百度搜索资源平台。

5. 图片优化（自动添加标题 + 懒加载）

1
2
3
4
# 图片添加标题
npm install hexo-image-caption --save
# 图片懒加载
npm install hexo-img-lazyload --save

根目录 _config.yml 配置懒加载：

1
2
3
4
lazyload:
    enable: true
    onlypost: false  # 所有页面都启用
    loadingImg: /img/loading.gif  # 加载占位图（需自行准备）

三、常见问题解决：新手踩坑指南

1. 执行 hexo d 报错 “Deployer not found: git”

**原因**：未安装部署插件。`hexo-deployer-git` 
**解决**：重新执行 `npm install hexo-deployer-git --save`, 确保根目录 _config.yml 中 deploy 配置正确。

2. 本地预览正常，部署后样式丢失

**原因**：URL 配置错误，导致静态资源路径不正确。
**解决**：检查 _config.yml 和主题/插件目录下的配置文件，确保路径和设置正确。

1
2
url: https://yourname.github.io  # 确保域名正确
root: /  # 根目录路径。若部署在子目录（如 username.github.io/blog），则设为 /blog/

3. 主题配置修改后不生效

**原因**：缓存未清理，Hexo 会读取旧配置。
**解决**：执行 `hexo clean` 清理缓存，再重新生成 `hexo g` 和预览 `hexo s`。
    
1
2
3
hexo clean
hexo generate
hexo server

4. 新建 “分类”“标签” 页面无法访问

**原因**：需要手动创建对应页面文件。
**解决**：在根目录执行：

1
2
3
4
# 创建分类页面
hexo new page "categories"
# 创建标签页面
hexo new page "tags"

然后编辑 source/categories/index.md 和 source/tags/index.md，在 Front-matter 中添加：

1
2
3
4
---
title: 分类
type: "categories"  # 标签页面对应 type: "tags"
---

四、发布文章：从写作到上线的最后一步

1. 新建文章：

1
hexo new [layout] "title"

编辑生成的 source/_posts/目录下的 md 文件，用编辑器（如 Typora、VS Code）编写内容。

2. 文章头部配置（Front-matter）：

在每篇文章开头添加 Front-matter，如：

1
2
3
4
5
6
7
---
title: Hexo 博客搭建全流程指南
date: 2025-11-02 10:00:00  # 日期格式 YYYY-MM-DD HH:mm:ss
categories: 分类名称  # 分类（可多个，用逗号分隔）
tags: [标签1, 标签2]  # 标签
cover: /img/cover.jpg  # 封面图（可选）（需放入 source/img 目录）
---

3. 图片处理：

将本地图片上传到图床，替换文中相对路径为绝对 URL。

4. 预览与修改：

1
2
3
hexo clean # 清理缓存，避免读取旧配置文件
hexo generate # 生成静态文件（HTML、CSS 等）
hexo server # 本地预览效果

每次改动后执行 `hexo s` 查看效果，满意后提交至仓库。

5. 提交与部署：

1
2
3
hexo clean
hexo generate
hexo deploy # 部署到远程仓库

等待几分钟后，访问你的博客域名(如 https://yourname.github.io/) 即可查看最新内容。

以上就是 Hexo 新手从搭建到上线的全流程指南。跟随步骤操作，就能快速拥有一个美观实用的个人博客！如果遇到其他问题，欢迎在评论区交流～

文章作者: yuhuo
文章链接: https://www.yuhuo863.top/2025/11/02/hexo-beginner-guide/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 yuhuo !
Hexo 博客搭建 静态博客
赏
  目录