基于 Hexo 与 EdgeOne Pages 部署静态博客

前言

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

为什么选择这个方案？

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

Hexo + EdgeOne Pages 自动化持续集成与边缘分发架构

---

安装 Node.js

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

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

node --version
npm --version

安装 Hexo CLI

npm install hexo-cli -g

初始化博客

# 创建博客项目
hexo init my-blog
cd my-blog

# 安装依赖
npm install

安装 Butterfly 主题

方式一：Git Clone（推荐）

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

方式二：npm 安装

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

安装必要依赖

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

启用主题

修改根目录下的 _config.yml：

theme: butterfly

基本配置

站点配置（_config.yml）

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

Butterfly 主题配置

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

如何发布文章

创建新文章

hexo new post "我的文章标题"

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

文章 Front-matter 格式

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

---
title: 文章标题
date: 2025-03-22 13:50:15
tags:
  - 标签1
  - 标签2
categories:
  - 分类名
description: 文章描述
---

编写文章内容

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

## 二级标题

### 三级标题

**加粗文字**

*斜体文字*

- 无序列表
- 无序列表

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

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

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

> 引用文字

`行内代码`

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

本地预览

hexo server
# 或者简写
hexo s

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

生成静态文件

hexo generate
# 或者简写
hexo g

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

清除缓存

hexo clean

如何删除文章

方法一：直接删除文件

# 删除文章文件
rm source/_posts/文章文件名.md

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

方法二：转为草稿

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

# 将文章转为草稿
hexo publish --draft 文章文件名

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

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

如何删除页面

# 删除页面文件夹
rm -rf source/页面名称/

# 重新生成
hexo clean && hexo g

如何创建独立页面

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 "文件名"	发布草稿

组合命令

# 清除 → 生成 → 本地预览
hexo clean && hexo g && hexo s

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

部署到 EdgeOne Pages

1. 推送代码到 Git 仓库

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

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），腾讯云会自动申请并配置 Let’s Encrypt 免费泛域名 HTTPS 证书，并实现全球 CDN Anycast 边缘加速。

---

高效运维：一键自动化部署脚本（Windows / Linux / macOS）

为了不用每次写完文章都手动敲四五条命令，我们在博客根目录封装了跨平台的一键发布脚本：

1. Windows 环境 (deploy.bat)

在 Windows 环境下，直接双击运行或在命令行中执行：

# 默认提交信息自动部署
deploy.bat

# 携带自定义提交信息发布
deploy.bat "发布新文章: AI Agent 架构实战"

脚本自动化执行四个阶段：

1. call npx hexo clean：清除旧缓存与已生成的 public 目录；
2. call npx hexo generate：重新全量编译 Markdown 并生成静态 HTML/CSS/JS；
3. git add -A && git commit -m "%MSG%"：智能检测变更并自动提交；
4. git push origin master：推送到远端仓库，自动触发 EdgeOne Pages 边缘流水线构建。

2. Linux / macOS 环境 (deploy.sh)

在 Bash 环境下，赋予可执行权限后即可一键运行：

chmod +x deploy.sh
./deploy.sh "更新文章与样式修复"

一键脚本彻底消除了手工部署的繁琐，让精力完全聚焦在高质量写作上。

---

文章管理技巧

草稿管理

# 创建草稿
hexo new draft "草稿标题"

# 预览草稿
hexo server --draft

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

置顶文章

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

标签和分类

• 标签（tags）：可以设置多个，用列表形式
• 分类（categories）：通常只有一个，体现文章归属

tags:
  - Hexo
  - 教程
categories:
  - 博客

结语

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

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

---

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