我的博客网站重构之旅

简介

此前，我的博客基于 Docusaurus 构建。Docusaurus 是由 Facebook 开发的静态网站生成器，主要面向文档类网站。尽管 Docusaurus 功能完善，但在实际使用中，我发现其在个人博客场景下存在以下局限性：

1. 配置复杂度较高：Docusaurus 的配置体系相对复杂，对于个人博客而言，其功能集可能超出实际需求
2. 主题定制门槛：虽然支持主题定制，但需要深入理解 React 和 Docusaurus 的架构设计
3. 资源消耗：作为基于 React 的框架，在构建和运行时需要消耗更多系统资源
4. 博客功能支持有限：Docusaurus 的设计理念更偏向文档网站，博客相关的核心功能需要额外配置和开发

基于以上考虑，我选择迁移至 Hexo + Fluid 主题。Hexo 是一个快速、简洁且功能完善的博客框架，而 Fluid 主题提供了基于 Material Design 的现代化界面和完整的博客功能支持。

为什么选择 Hexo + Fluid？

选择 Hexo + Fluid 主要基于以下考虑：

• 性能优势：基于 Node.js 构建，静态文件生成速度快，构建效率高
• 主题完善：Fluid 主题提供了现代化的用户界面和完整的博客功能集
• 定制便捷：配置结构清晰，主题定制过程相对简单
• 部署灵活：支持多种部署平台GitHub Pages、Vercel、Netlify等，可根据需求选择
• 社区支持：Hexo 和 Fluid 均拥有活跃的社区，问题解决和功能更新及时

如何部署 Hexo + Fluid 博客

环境要求

在开始部署之前，请确保系统已安装以下工具：

• Node.js 11.0 或更高版本
• Git 版本控制系统
• npm 或 yarn 包管理器

步骤一：初始化 Hexo 项目

# 安装 Hexo CLI（可选，也可以使用 npx 直接运行）
npm install -g hexo-cli

# 初始化 Hexo 项目
hexo init my-blog
cd my-blog

# 安装项目依赖
npm install

步骤二：安装 Fluid 主题

# 确保在项目根目录
cd my-blog

# 克隆 Fluid 主题到 themes 目录
git clone https://github.com/fluid-dev/hexo-theme-fluid themes/fluid

# 安装主题所需的渲染器依赖
npm install hexo-renderer-pug hexo-renderer-stylus

步骤三：配置主题

在项目根目录下编辑 _config.yml 文件，进行以下配置：

theme: fluid
language: zh-CN
timezone: Asia/Shanghai

步骤四：创建必要页面

创建关于页面（About 页面）：

hexo new page about

编辑 source/about/index.md 文件，在 Front Matter 中添加 layout 属性：

---
title: about
layout: about
---

步骤五：本地测试

启动本地开发服务器进行预览：

# 方式一：使用 Hexo 命令
hexo server

# 方式二：使用 npm 脚本
npm run server

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

步骤六：部署到 Vercel

1. 创建配置文件

   在项目根目录创建 vercel.json 文件，配置如下：

   {
     "buildCommand": "npm install && hexo generate",
     "outputDirectory": "public",
     "devCommand": "hexo server",
     "installCommand": "npm install"
   }

2. 推送代码到 GitHub

   如果项目尚未初始化 Git 仓库，执行以下命令：

   git init
   git add .
   git commit -m "Initial commit"
   git branch -M main
   git remote add origin https://github.com/your-username/your-repo.git
   git push -u origin main

3. 在 Vercel 平台部署

   • 访问 Vercel 官网
   • 使用 GitHub 账号登录
   • 点击 “New Project” 创建新项目
   • 选择对应的 GitHub 仓库
   • Vercel 会自动识别项目配置，点击 “Deploy” 开始部署

步骤七：配置自定义域名（可选）

如需使用自定义域名，按以下步骤操作：

1. 在 Vercel 项目设置页面，进入 “Domains” 选项
2. 添加你的自定义域名
3. 根据 Vercel 提供的 DNS 配置说明，在域名服务商处添加相应的 DNS 记录
4. 等待 DNS 解析生效，通常需要几分钟到几小时

常用命令

# 创建新文章
hexo new "文章标题"

# 创建新页面
hexo new page "页面名称"

# 清理缓存
hexo clean

# 生成静态文件
hexo generate
# 或
npm run build

# 启动本地服务器
hexo server
# 或
npm run server

# 部署
hexo deploy
# 或
npm run deploy

总结

通过从 Docusaurus 迁移到 Hexo + Fluid，我获得了以下改进：

• 构建性能提升：静态文件生成速度更快，构建效率显著提高
• 界面体验优化：Material Design 风格的现代化界面，用户体验更佳
• 功能适配性：博客相关功能更加完善，更符合个人博客的使用场景
• 配置复杂度降低：配置结构清晰，上手难度降低
• 部署便捷性：通过 Vercel 平台可快速完成部署，操作简单高效

如果你正在考虑搭建个人博客，Hexo + Fluid 是一个值得考虑的技术方案。

---

相关链接：

• Hexo 官方文档
• Fluid 主题文档
• Vercel 部署指南