🎉 欢迎阅读本教程！
本文将带你从0到1搭建属于自己的Hexo博客网站，适合完全零基础的新手。

📝 前言

在数字化时代，拥有一个属于自己的博客网站是展示个人技术、分享知识和记录生活的绝佳方式。Hexo作为一款快速、简洁且高效的静态博客生成框架，受到了众多开发者的喜爱。

本文将详细介绍如何从0到1搭建属于自己的Hexo博客网站，包括环境配置、主题安装、个性化设置、文章撰写和部署上线等完整流程。

📋 目录

  1. 环境准备
  2. 安装Hexo
  3. 初始化博客
  4. 配置Hexo
  5. 安装主题
  6. 个性化设置
  7. 撰写第一篇文章
  8. 本地预览
  9. 常见问题解决

🔧 环境准备

在开始搭建Hexo博客之前，我们需要准备好必要的环境。Hexo基于Node.js开发，所以需要安装Node.js和npm（Node.js包管理器）。

🔹 步骤1：安装Node.js

  1. 访问**Node.js官网**
  2. 下载适合你操作系统的LTS版本（推荐长期支持版本，更稳定）
  3. 运行安装程序，按照提示完成安装
  4. 验证安装是否成功
1
2
3
4
5
# 验证Node.js版本
node -v

# 验证npm版本
npm -v
📷 操作截图：

🔹 步骤2：安装Git

Hexo需要Git来管理博客内容和部署到GitHub Pages。

  1. 访问**Git官网**
  2. 下载适合你操作系统的版本
  3. 运行安装程序，按照提示完成安装
  4. 验证安装是否成功
1
2
# 验证Git版本
git --version
📷 操作截图：

📦 安装Hexo

环境准备完成后，我们可以开始安装Hexo了。

🔹 步骤1：使用npm全局安装Hexo

1
2
# 全局安装Hexo CLI
npm install -g hexo-cli

🔹 步骤2：验证Hexo安装是否成功

1
2
# 验证Hexo版本
hexo -v
📷 操作截图：

🚀 初始化博客

现在我们可以初始化一个新的Hexo博客了。

🔹 步骤1：创建博客目录

选择一个合适的位置创建博客目录，例如在桌面创建一个名为my-blog的目录。

1
2
3
4
5
# 创建博客目录
mkdir my-blog

# 进入博客目录
cd my-blog
📷 操作截图：

🔹 步骤2：初始化Hexo博客

1
2
# 初始化Hexo博客
hexo init

🔹 步骤3：安装依赖

1
2
# 安装博客依赖
npm install
📷 操作截图：

⚙️ 配置Hexo

Hexo初始化完成后，我们需要对博客进行基本配置。

🔹 步骤1：编辑配置文件

Hexo的配置文件是_config.yml，位于博客根目录。使用文本编辑器（如VS Code、Sublime Text等）打开这个文件，对以下内容进行配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
# Site - 网站基本信息
title: 你的博客标题          # 博客标题，显示在网站顶部
subtitle: 你的博客副标题    # 博客副标题，显示在标题下方
description: 你的博客描述    # 博客描述，用于SEO和元标签
author: 你的名字             # 博客作者名称
language: zh-CN             # 博客语言，中文使用zh-CN
timezone: Asia/Shanghai      # 时区，亚洲/上海

# URL - 链接配置
url: https://你的用户名.github.io  # 博客的完整URL
root: /                      # 网站根目录
permalink: :year/:month/:day/:title/  # 文章永久链接格式
permalink_defaults:          # 永久链接默认值

🔹 步骤2：保存配置文件

修改完成后，保存配置文件。

📷 操作截图：
💡 配置提示： - 配置文件中的冒号后面需要加空格 - 确保URL配置正确，特别是GitHub Pages的地址 - 语言设置为zh-CN可以确保中文显示正常

🎨 安装主题

Hexo默认使用的是landscape主题，我们可以安装更美观、功能更丰富的主题，例如Butterfly主题。

🔹 步骤1：安装Butterfly主题

1
2
# 克隆Butterfly主题到themes目录
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
📷 操作截图：

🔹 步骤2：启用主题

编辑_config.yml文件，将theme设置为butterfly：

1
2
# 主题设置
theme: butterfly  # 使用Butterfly主题

🔹 步骤3：安装必要的插件

1
2
# 安装Butterfly主题所需的渲染插件
npm install hexo-renderer-pug hexo-renderer-stylus --save
📷 操作截图：
✅ 主题优势： - Butterfly主题美观现代，支持响应式设计 - 内置多种功能：搜索、评论、代码高亮等 - 支持自定义配置，易于个性化 - 活跃的社区支持和持续更新

✨ 个性化设置

现在我们可以对博客进行个性化设置，让它更加符合我们的需求。

🔹 步骤1：创建主题配置文件

在博客根目录创建一个_config.butterfly.yml文件，用于配置Butterfly主题（推荐使用独立配置文件，便于主题更新）。

🔹 步骤2：基本配置

在_config.butterfly.yml文件中进行基本配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 网站图标设置
favicon: /img/favicon.ico  # 网站图标，显示在浏览器标签页

# 导航菜单设置
menu:
  首页: /                   # 首页链接
  归档: /archives/          # 文章归档
  分类: /categories/        # 文章分类
  标签: /tags/              # 文章标签
  关于: /about/             # 关于页面

# 社交链接设置
social:
  GitHub: https://github.com/你的用户名  # GitHub链接
  微博: https://weibo.com/你的用户名     # 微博链接
  知乎: https://www.zhihu.com/people/你的用户名  # 知乎链接

🔹 步骤3：个性化样式

可以在source/css/custom.css文件中添加自定义样式，个性化你的博客：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 示例：自定义博客标题样式 */
.site-title {
  font-size: 2rem;
  font-weight: bold;
  color: #667eea;
}

/* 示例：自定义链接颜色 */
a {
  color: #7c3aed;
  text-decoration: none;
}

a:hover {
  color: #f093fb;
  text-decoration: underline;
}
🎯 个性化建议： - 从简单的配置开始，逐步添加复杂功能 - 参考Butterfly主题的官方文档进行配置 - 定期备份你的配置文件

✍️ 撰写第一篇文章

现在我们可以撰写第一篇博客文章了。

🔹 步骤1：创建新文章

使用Hexo命令创建一篇新文章：

1
2
# 创建一篇新文章，标题为"我的第一篇博客文章"
hexo new "我的第一篇博客文章"
📷 操作截图：

🔹 步骤2：编辑文章

文章会创建在source/_posts目录下，使用Markdown格式编写。编辑文章内容，添加标题、标签、分类等信息。

文章的基本结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
---
title: 我的第一篇博客文章  # 文章标题
date: 2026-01-18 10:00:00  # 文章发布日期
tags: [Hexo, 博客]  # 文章标签
categories: [博客教程]  # 文章分类
description: 这是我的第一篇博客文章  # 文章描述
---

# 欢迎阅读我的第一篇博客

这是我的第一篇Hexo博客文章，使用Markdown格式编写。

## 二级标题

### 三级标题

- 列表项1
- 列表项2
- 列表项3

📷 操作截图：

🔹 步骤3：保存文章

编写完成后，保存文章。

✏️ 写作建议： - 使用Markdown格式编写，简洁高效 - 文章结构清晰，层次分明 - 适当使用图片和代码示例增强可读性 - 定期备份你的文章内容

👀 本地预览

在部署之前，我们可以在本地预览博客效果，检查是否有任何问题。

🔹 步骤1：生成静态文件

1
2
3
4
5
# 生成静态文件
hexo generate

# 或者使用简写形式
hexo g

🔹 步骤2：启动本地服务器

1
2
3
4
5
6
7
8
# 启动本地服务器
hexo server

# 或者使用简写形式
hexo s

# 可选：指定端口
hexo s -p 8080
📷 操作截图：

🔹 步骤3：访问本地博客

在浏览器中访问http://localhost:4000，查看博客效果。

📷 操作截图：
🔍 预览提示： - 本地预览可以实时查看博客效果 - 修改文章或配置后，刷新浏览器即可看到更新 - 按下Ctrl+C可以停止本地服务器

❗ 常见问题解决

在搭建Hexo博客的过程中，可能会遇到一些问题。这里列举几个常见问题及解决方法。

🔹 问题1：Hexo命令无法使用

症状： 执行hexo命令时提示”command not found”或类似错误

解决方法：

  1. 检查Node.js和npm是否安装成功
  2. 尝试重新安装Hexo：npm install -g hexo-cli
  3. 检查系统环境变量是否配置正确

🔹 问题2：本地预览时样式丢失

症状： 本地访问时，博客没有样式或样式显示异常

解决方法：

  1. 检查主题配置是否正确
  2. 确认必要的插件是否已安装
  3. 尝试重新安装主题和依赖
  4. 检查配置文件中的URL设置是否正确

🔹 问题3：文章图片无法显示

症状： 文章中的图片无法正常显示

解决方法：

  1. 确保图片文件存放在与文章同名的文件夹中
  2. 使用Hexo推荐的{% asset_img %}标签引用图片
  3. 检查图片路径是否正确
💡 问题排查建议： - 仔细查看命令行输出的错误信息 - 检查配置文件中的语法错误 - 参考Hexo和主题的官方文档 - 搜索相关问题的解决方案

🎊 结语

恭喜你！现在你已经成功搭建了属于自己的Hexo博客网站。博客搭建只是开始，后续你可以通过以下方式让你的博客更加完美：

  • 撰写优质内容：定期更新博客，分享你的知识和经验
  • 优化博客性能：使用CDN、压缩资源、优化图片等
  • 添加更多功能：评论系统、阅读统计、搜索功能等
  • 美化博客样式：自定义主题、添加动画效果等
  • SEO优化：优化文章标题、描述、标签等

希望本文对你有所帮助。如果你有任何问题或建议，欢迎在评论区留言交流！

📚 相关资源

更新时间： 2026-01-18
作者： Jay