前言

本博客使用 Hexo 静态博客框架 + Butterfly 主题搭建，并部署在腾讯云 EdgeOne Pages（免费托管服务）。本文记录完整的搭建过程和使用指南。

为什么选择这个方案？

组件 说明
Hexo 快速、简洁的静态博客框架，基于 Node.js
Butterfly 美观、功能丰富的 Hexo 主题，卡片式设计
EdgeOne Pages 腾讯云免费静态网站托管，全球 CDN 加速

环境准备

安装 Node.js

Hexo 基于 Node.js，首先需要安装 Node.js（版本 >= 14）。

  1. 访问 Node.js 官网 下载 LTS 版本
  2. 安装完成后验证：
1
2
node --version
npm --version

安装 Hexo CLI

1
npm install hexo-cli -g

初始化博客

1
2
3
4
5
6
# 创建博客项目
hexo init my-blog
cd my-blog

# 安装依赖
npm install

安装 Butterfly 主题

方式一：Git Clone（推荐）

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

方式二：npm 安装

1
2
npm install hexo-theme-butterfly --save
cp -r node_modules/hexo-theme-butterfly themes/butterfly

安装必要依赖

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

启用主题

修改根目录下的 _config.yml：

1
theme: butterfly

基本配置

站点配置（_config.yml）

1
2
3
4
5
6
7
title: 我的博客
subtitle: '使用 Hexo + Butterfly 搭建'
description: '个人技术博客'
author: 你的名字
language: zh-CN
timezone: 'Asia/Shanghai'
url: https://blog.iot2045.cn

Butterfly 主题配置

编辑 themes/butterfly/_config.yml，配置菜单、头像、社交链接等。

如何发布文章

创建新文章

1
hexo new post "我的文章标题"

这会自动在 source/_posts/ 目录下生成一个 Markdown 文件。

文章 Front-matter 格式

每篇文章顶部的 --- 之间是文章的元数据：

1
2
3
4
5
6
7
8
9
10
---
title: 文章标题
date: 2025-03-22 13:50:15
tags:
  - 标签1
  - 标签2
categories:
  - 分类名
description: 文章描述
---

编写文章内容

文章使用 Markdown 格式编写。以下是一些常用语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
## 二级标题

### 三级标题

**加粗文字**

*斜体文字*

- 无序列表
- 无序列表

1. 有序列表
2. 有序列表

[链接文字](https://blog.iot2045.cn)

![图片描述](图片地址)

> 引用文字

`行内代码`

​```语言
代码块
​```

本地预览

1
2
3
hexo server
# 或者简写
hexo s

打开浏览器访问 http://localhost:4000 即可预览。

生成静态文件

1
2
3
hexo generate
# 或者简写
hexo g

生成的文件在 public/ 目录下，这就是要部署的网站文件。

清除缓存

1
hexo clean

如何删除文章

方法一：直接删除文件

1
2
3
4
5
# 删除文章文件
rm source/_posts/文章文件名.md

# 清除缓存并重新生成
hexo clean && hexo generate

方法二：转为草稿

如果只是不想发布但想保留内容：

1
2
3
4
5
# 将文章转为草稿
hexo publish --draft 文章文件名

# 或者手动移动到 _drafts 目录
mv source/_posts/文章名.md source/_drafts/文章名.md

注意：_drafts 目录下的草稿默认不会发布。

如何删除页面

1
2
3
4
5
# 删除页面文件夹
rm -rf source/页面名称/

# 重新生成
hexo clean && hexo g

如何创建独立页面

1
hexo new page "关于我"

这会在 source/关于我/ 下创建 index.md。

常用 Hexo 命令汇总

命令 简写 说明
hexo init - 初始化站点
hexo new post "标题" hexo n "标题" 新建文章
hexo new page "名称" - 新建页面
hexo generate hexo g 生成静态文件
hexo server hexo s 启动本地服务器
hexo clean - 清除缓存和生成文件
hexo deploy hexo d 部署网站
hexo publish "文件名" hexo p "文件名" 发布草稿

组合命令

1
2
3
4
5
# 清除 → 生成 → 本地预览
hexo clean && hexo g && hexo s

# 清除 → 生成 → 部署
hexo clean && hexo g && hexo d

部署到 EdgeOne Pages

1. 推送代码到 Git 仓库

EdgeOne Pages 支持从 Git 仓库自动部署，推荐使用 Gitee 或 GitHub。

1
2
3
4
5
git init
git add .
git commit -m "初始化 Hexo 博客"
git remote add origin <你的仓库地址>
git push -u origin master

2. 在 EdgeOne Pages 中配置

  1. 登录 腾讯云 EdgeOne 控制台
  2. 进入 站点 → Pages
  3. 点击 新建项目，关联你的 Git 仓库
  4. 构建配置：
    • 构建命令：npm install && hexo generate
    • 输出目录：public
  5. 点击 保存并部署

3. 绑定自定义域名（可选）

EdgeOne Pages 支持绑定自定义域名（如 blog.iot2045.cn），并自动配置 HTTPS 证书。

文章管理技巧

草稿管理

1
2
3
4
5
6
7
8
# 创建草稿
hexo new draft "草稿标题"

# 预览草稿
hexo server --draft

# 发布草稿
hexo publish draft "草稿标题"

置顶文章

在文章 Front-matter 中添加 top: true 或 sticky: 100（数值越大越靠前）。

标签和分类

  • 标签（tags）：可以设置多个，用列表形式
  • 分类（categories）：通常只有一个，体现文章归属
1
2
3
4
5
tags:
  - Hexo
  - 教程
categories:
  - 博客

结语

至此，你已经完成了 Hexo + Butterfly 博客的搭建，并学会了文章发布、删除、管理的基本操作。

博客搭建只是开始，坚持写作才是最重要的。祝写博愉快！🎉

如果你在搭建过程中遇到问题，欢迎查阅 Hexo 官方文档 和 Butterfly 主题文档。