本文转载自Hexo博客搭建教程，感谢原作者的无私分享。

阅读本篇前，请先阅读前面的文章
blog搭建基础教程（一）

一.前言

快过年啦！祝大家2026年新年快乐！马年大吉！

小崔也是最近才开始搭建属于自己的博客，感觉挺有意思的哈哈哈哈。到现在嘞已经搭建的差不多啦，就想着闲着也是闲着，不如总结一下自己搭建从0到1的全过程，也算是巩固巩固嘿嘿嘿~
本教程几乎为转载内容，原文链接在前言中。由于原作者的教程可能比较久远了，在这里可能部分地方做了一些改进与补充，供大家参考。
最后，让我们一起搭建一款独属于自己的博客网站吧！
文章可能有的地方会出现错字，属于正常现象，不影响阅读。

二.Vercel部署与自定义域名

1.Vercel部署

cloudflare简介：cloudflare是一个免费的代码托管平台，它能够托管并保护你的静态html界面，甚至能够托管你的node.js与Python服务端脚本，是不想买服务器的懒人的福音！

使用cloudflare部署Hexo项目步骤：

首先需要一个cloudflare账号，这里推荐用GitHub账户关联，这样你就可以在cloudflare中直接托管你的GitHub库中的项目了，实现开发部署一步到位（网络不流畅可以考虑挂梯子）。

当你用你的Github账户关联并绑定手机号登录之后，点击计算和AI，选择Works和Pages,再点击右上角的创建应用程序，选择最下面的
想要部署 Pages开始使用,然后导入现有 Git 存储库，选择你刚刚部署成功的存储静态博客的仓库并开始设置。这里直接点击保存并部署,成功导入仓库后，
进入配置页面，首先为你的项目命名（这将影响你的 Pages 子域名），然后确认生产分支是否正确。接下来是最关键的构建设置：如果你使用了
VuePress、Hugo 等静态站点生成器，请在 “框架预设” 下拉列表中选择对应选项，系统通常会自动填充好构建命令（如 npm run build）和输出
目录（如 dist 或 public）。如果你的仓库里已经是编译好的纯 HTML 文件，则保持框架预设为
“无”，并将构建命令留空，输出目录填写为 / 或留空。最后，点击 “保存并部署” 按钮，Cloudflare Pages就会开始自动构建和发布你的网站了。

2.绑定自定义域名

绑定自定义域名需要在你购买域名的服务商那里进行设置，下面以阿里云为例进行说明：
one.登录阿里云域名控制台，找到你要绑定的域名，点击解析。
two.点击添加记录，选择记录类型为CNAME，主机记录填写你想要的子域名（如www），记录值填写你的Cloudflare Pages提供的默认域名（如yourproject.pages.dev），TTL保持默认即可。
three.保存记录后，等待DNS解析生效（通常需要几分钟到24小时不等），你就可以通过你设置的子域名访问你的博客了。

注意：如果你想要绑定根域名（如example.com），可能需要使用A记录并指向Cloudflare Pages的IP地址，具体操作可以参考Cloudflare的官方文档。
另外，如果你使用了Cloudflare的CDN服务，建议在Cloudflare控制台中将你的域名设置为DNS Only，以确保请求能够正确地被转发到
Cloudflare Pages。

推荐B站参考视频：
【在阿里云上购买域名】
【完整教程】如何将阿里云域名迁移到Cloudflare DNS管理 | 10分钟轻松搞定

三.安装主题

本教程用的 🦋 hexo-theme-butterfly 主题 v4.5.0最新版，请放心食用。
本教程用的是npm方式安装的 hexo-theme-butterfly，后续魔改时更改的文件都是【D:/blog/blog/node_modules/hexo-theme-butterfly】
文件夹中的文件。如果你是git clone克隆方式安装的主题，请在【D:/blog/blog/themes/butterfly】文件夹下修改对应的文件。

1.npm安装(推荐)

注意：此方法只支持 Hexo 5.0.0以上版本!

在你的博客根目录（我这里路径为【D:/blog/blog】）打开Git BASH命令窗口执行npm i hexo-theme-butterfly

1
npm i hexo-theme-butterfly

安装成功后可在【D:/blog/blog/node_modules】文件夹下找到hexo-theme-butterfly文件夹

2.Github安装

在你的博客根目录里（我这里路径为【D:/blog/blog】），打开Git BASH工具，执行命令即可。

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

安装成功后可在【D:/blog/blog/themes】文件夹下找到butterfly文件夹，可以将landscape文件夹删掉。

3.Gitee安装

在你的博客根目录里（我这里路径为【D:/blog/blog】），打开Git BASH工具，执行命令即可。

1
git clone -b 4.5.0 https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly

升级方法：在主题目录下，运行git pull即可升级到最新版本。

四.应用主题

1.修改站点配置文件**_config.yml**，把主题改为butterfly

1
theme: butterfly

2.如果你没有pug以及stylus的渲染器，请下载安装，这两个渲染器是Butterfly生成基础页面所需的依赖包：

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

3.为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做，高度魔改的一般都不会升级主题了，不然魔改的会被覆盖掉）把主题文件夹中的_config.yml
复制到 Hexo 根目录里，同时重新命名为 _config.butterfly.yml。以后只需要在
_config.butterfly.yml进行配置即可生效。Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使_config.butterfly.yml的配置，其优先度较高。

五. 基础用法说明

Front-matter 是 markdown 文件最上方以—分隔的区域，用于指定个别档案的变数。

  • Page Front-matter 用于页面配置
  • Post Front-matter 用于文章页配置

如果标注可选的参数，可根据自己需要添加，不用全部都写。

1.标签页

1.1 前往你的Hexo博客根目录，打开Git Bash执行如下命令

1
hexo new page tags

1.2 在[BlogRoot]\source\会生成一个含有index.md文件的tags文件夹

1.3 修改[BlogRoot]\source\tags\index.md，添加type: “tags”

1
2
3
4
5
---
title: tags
date: 2026-02-10 12:00:00
type: "tags"
---

2.友情链接

2.1 前往你的Hexo博客根目录，打开cmd命令窗口执行如下命令

1
hexo new page link

2.2 在[BlogRoot]\source\会生成一个含有index.md文件的link文件夹

1
2
3
4
5
---
title: link
date: 2026-02-10 12:00:00
type: "link"
---
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- class_name: 1.技术支持
  class_desc: 本网站的搭建由以下开源作者提供技术支持
  link_list: 
    - name: Hexo 
      link: https://hexo.io/zh-cn/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架
      siteshot: https://source.fomal.cc/siteshot/hexo.io.jpg
      
- class_name: 2.友情链接
  class_desc: 一些好朋友~~
  link_list:
    - name: Fomalhaut🥝
      link: https://fomal.cc/
      avatar: /assets/head.jpg
      descr: Future is now 🍭🍭🍭
      siteshot: https://source.fomal.cc/siteshot/www.fomal.cn.jpg

class_name和class_desc支持 html 格式，如不需要，也可以留空。

4.图库

图库页面只是普通的页面，你只需要hexo new page xxx创建你的页面就行。
然后使用外挂标签galleryGroup，具体用法请查看对应的内容。

1
2
3
4
5
6
<div class="gallery-group-main">
{% galleryGroup '封面专区' '本站用作文章封面的图片，不保证分辨率' '/box/Gallery/photo' 
https://source.fomal.cc/img/default_cover_61.webp %}
{% galleryGroup '背景专区' '收藏的一些的背景与壁纸，分辨率很高' '/box/Gallery/wallpaper' 
https://source.fomal.cc/img/dm11.webp %}
</div>

5.子页面

子页面也是普通的页面，你只需要hexo new page xxx创建你的页面就行。
然后使用标签外挂gallery，具体用法请查看对应的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% gallery %} 
![p1]( https://source.fomal.cc/img/default_cover_1.webp ) 
![p2]( https://source.fomal.cc/img/default_cover_2.webp ) 
![p3]( https://source.fomal.cc/img/default_cover_3.webp ) 
![p4]( https://source.fomal.cc/img/default_cover_4.webp ) 
![p5]( https://source.fomal.cc/img/default_cover_5.webp ) 
![p6]( https://source.fomal.cc/img/default_cover_6.webp ) 
![p7]( https://source.fomal.cc/img/default_cover_7.webp ) 
![p8]( https://source.fomal.cc/img/default_cover_8.webp ) 
![p9]( https://source.fomal.cc/img/default_cover_9.webp ) 
![p10]( https://source.fomal.cc/img/default_cover_10.webp ) 
![p11]( https://source.fomal.cc/img/default_cover_11.webp ) 
![p12]( https://source.fomal.cc/img/default_cover_12.webp ) 
{% endgallery %}

6.404页面

主題內置了一个简单的404页面，可在设置中开放。
如需本地预览，请访问 http://localhost:4000/404.html

1
2
3
4
5
# A simple 404 page
error_404:
  enable: true
  subtitle: "页面没有找到"
  background:

本文转载自Hexo博客搭建教程，感谢原作者的无私分享。