1. 为什么选择Hexo-Fluid搭建个人博客
三年前我第一次尝试搭建个人博客时，面对WordPress的臃肿和Hugo的学习曲线，最终选择了Hexo。这个基于Node.js的静态博客生成器，配合Fluid主题，完美平衡了简洁性和可定制性。最让我惊喜的是，整个搭建过程只需要掌握基本命令行操作，配合GitHub Pages的免费托管，零成本就能拥有一个专业级的个人网站。
Fluid主题的响应式设计在手机端表现尤为出色，内置的标签页、分类页和归档功能开箱即用。我特别喜欢它的夜间模式切换功能，这在技术博客中越来越成为标配。通过简单的配置就能实现文章加密、数学公式渲染等高级功能，对于技术创作者来说再合适不过。
2. 环境准备与基础安装
2.1 Node.js环境配置
Hexo运行需要Node.js环境，建议安装LTS版本（当前是18.x）。安装完成后，在终端执行以下命令验证：
node -v npm -v如果遇到权限问题，推荐使用nvm（Node Version Manager）来管理多版本Node.js。我在Mac上安装nvm后，切换版本变得非常方便：
nvm install 18 nvm use 182.2 Git安装与配置
Git是版本控制和GitHub部署的必备工具。安装后需要配置全局用户信息：
git config --global user.name "你的用户名" git config --global user.email "你的邮箱"建议同时设置Git凭证存储，避免频繁输入密码：
git config --global credential.helper store3. Hexo项目初始化
3.1 脚手架安装
首先全局安装Hexo命令行工具：
npm install -g hexo-cli然后创建项目文件夹并初始化：
hexo init myblog cd myblog npm install初始化完成后，目录结构如下：
. ├── _config.yml # 全局配置文件 ├── package.json ├── scaffolds # 模板文件夹 ├── source # 资源文件夹 │ └── _posts # 文章目录 └── themes # 主题目录3.2 基础配置调整
修改_config.yml中的基础信息：
title: 你的博客名称 subtitle: 副标题 description: 博客描述 keywords: 关键词1,关键词2 author: 你的名字 language: zh-CN timezone: Asia/Shanghai4. Fluid主题安装与配置
4.1 主题安装
在博客根目录执行：
git clone https://github.com/fluid-dev/hexo-theme-fluid.git themes/fluid然后修改_config.yml启用主题：
theme: fluid4.2 主题配置详解
Fluid主题的配置文件位于themes/fluid/_config.yml，建议复制一份到根目录并重命名为_config.fluid.yml，这样更新主题时不会覆盖配置。
几个关键配置项：
# 导航栏配置 navbar: blog_title: "我的技术博客" menu: - { key: "archive", link: "/archives/", icon: "iconfont icon-archive" } - { key: "tags", link: "/tags/", icon: "iconfont icon-tags" } # 首页配置 index: banner_img: /img/default.png banner_img_height: 70vh # 文章页配置 post: math: true # 启用数学公式 toc: true # 启用目录5. 本地运行与调试
安装hexo-server插件：
npm install hexo-server --save启动本地服务器：
hexo server访问http://localhost:4000即可预览效果。我习惯加上-d参数在生成静态文件后启动服务器：
hexo server -d调试时常用的几个命令：
hexo clean：清除缓存hexo generate：重新生成静态文件hexo deploy：部署到GitHub
6. 文章创作与管理
6.1 新建文章
使用脚手架命令创建新文章：
hexo new "我的第一篇文章"文章Markdown文件会创建在source/_posts目录下，Front-matter部分支持多种配置：
--- title: 我的第一篇文章 date: 2023-07-20 14:00:00 tags: [Hexo, 教程] categories: 技术 cover: /img/cover.jpg toc: true mathjax: true ---6.2 文章写作技巧
- 使用
<!-- more -->标记摘要分隔线 - 插入图片建议使用图床，我常用PicGo+GitHub做图床
- 代码块记得标注语言类型以获得正确高亮
- 善用Fluid提供的shortcodes，如
{% note info %}提示框
7. GitHub Pages部署
7.1 创建GitHub仓库
仓库名必须为用户名.github.io，这是GitHub Pages的特殊命名规则。
7.2 配置部署信息
修改_config.yml的deploy部分：
deploy: type: git repo: https://github.com/用户名/用户名.github.io.git branch: main安装hexo-deployer-git：
npm install hexo-deployer-git --save7.3 自动化部署脚本
我习惯创建一个deploy.sh脚本：
#!/bin/bash hexo clean hexo generate hexo deploy git add . git commit -m "update" git push origin main给脚本执行权限后，每次只需运行./deploy.sh即可完成全流程。
8. 高级配置与优化
8.1 自定义域名配置
- 在域名服务商处添加CNAME记录指向
用户名.github.io - 在仓库Settings > Pages中填写自定义域名
- 在博客source目录创建CNAME文件，内容为你的域名
8.2 CDN加速
GitHub Pages在国内访问较慢，可以通过CDN加速：
- 注册Cloudflare账户
- 添加站点并修改DNS服务器
- 开启CDN和HTTP/2
8.3 搜索引擎优化
- 安装sitemap插件：
npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save- 提交sitemap到Google Search Console和百度站长平台
9. 常见问题解决
9.1 部署后样式丢失
通常是配置文件路径问题，检查：
- 主题名称拼写是否正确
- 资源文件路径是否以/开头
- 是否执行了hexo clean
9.2 数学公式不渲染
确保：
- 文章Front-matter中设置了mathjax: true
- 主题配置中启用了数学公式支持
- 使用了正确的LaTeX语法
9.3 图片加载失败
建议：
- 使用绝对路径而非相对路径
- 考虑使用图床服务
- 检查文件名大小写（GitHub Pages区分大小写）
10. 我的实用技巧分享
多端同步：将整个博客目录放在GitHub私有仓库，换设备时clone下来npm install即可继续写作
备份策略：除了代码仓库，我还会定期导出数据库（如果有）和重要图片
写作流程：
- 本地VSCode写作
- Typora实时预览
- 本地hexo server调试
- 确认无误后部署
效率工具：
- PicGo：图床管理
- Alfred Workflow：快速创建新文章
- Markdown All in One：写作增强
这套方案我已经稳定使用了两年多，经历了三次主题大版本更新。Fluid主题的维护非常活跃，社区支持也很好。对于想要专注内容创作的技术博主来说，Hexo+Fluid+GitHub Pages的组合提供了近乎完美的平衡点。
