在本教程中将详细介绍如何使用 Hexo 搭建一个静态博客，启用功能强大的 Butterfly 主题，并将博客同时部署到 Cloudflare Pages 和 GitHub Pages，实现快速、稳定的全球访问。

安装 Hexo 环境

准备工作

确保本地环境已安装以下工具：

验证是否安装成功：

1
2
node -v
git --version

安装 Hexo

全局安装 Hexo：

1
npm install -g hexo-cli

初始化博客项目：

1
2
3
4
mkdir my-hexo-blog
cd my-hexo-blog
hexo init
npm install

运行本地服务器查看效果：

1
hexo server

访问 http://localhost:4000 检查默认主题是否加载成功。

安装 Butterfly 主题

下载 Butterfly 主题

进入博客目录，克隆 Butterfly 仓库：

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

安装依赖

进入主题目录并安装依赖：

1
2
cd themes/butterfly
npm install

修改配置文件

在博客根目录的 _config.yml 文件中设置主题：

1
theme: butterfly

启动 Hexo 本地服务查看效果：

1
hexo server

如需更多主题配置，请参考 Butterfly 官方文档。

配置 GitHub Pages 部署

创建 GitHub 仓库

  • 登录 GitHub，创建一个新仓库，命名为 your-username.github.io。

安装部署插件

在 Hexo 项目目录下安装部署插件：

1
npm install hexo-deployer-git --save

配置 _config.yml 文件

编辑博客根目录的 _config.yml 文件，添加部署配置：

1
2
3
4
deploy:
  type: git
  repo: [email protected]:your-username/your-username.github.io.git
  branch: main

部署到 GitHub Pages

运行以下命令生成静态文件并部署：

1
2
3
hexo clean
hexo generate
hexo deploy

访问 https://your-username.github.io 查看博客效果。

配置 Cloudflare Pages 部署

创建 Cloudflare Pages 项目

  1. 登录 Cloudflare。
  2. 进入 Pages 控制台，点击 Create a project。
  3. 选择 GitHub 作为代码源，关联刚才的仓库。
  4. 设置分支为 main，并填写构建命令和输出目录：
    • Build command: hexo generate
    • Output directory: public

部署并查看效果

完成配置后，Cloudflare Pages 会自动构建并部署。部署完成后，访问 Cloudflare 提供的域名即可查看博客。

配置自定义域名（可选）

在 Cloudflare Pages 控制台绑定你的自定义域名，添加 DNS 解析记录即可完成绑定。

优化与进阶

开启 Butterfly 主题的功能

根据需求自定义以下功能：

  • SEO 优化：配置 keywords 和 description。
  • 评论系统：如 Valine、Giscus。
  • 文章封面图：为每篇文章添加吸引人的封面。

添加自动部署

  • 使用 GitHub Actions 配置自动部署脚本，实现每次提交代码后自动更新博客。

置 HTTPS 加速

  • 确保 Cloudflare Pages 自动启用 HTTPS。
  • 可通过 Cloudflare 的 CDN 提供额外加速。

通过以上步骤，你已经成功搭建了一个功能强大、主题美观的 Hexo 博客，并完成了 GitHub Pages 和 Cloudflare Pages 的双重部署。赶快试试吧！如果有任何问题，欢迎评论交流！