免费个人博客搭建教程：Cloudflare + GitHub + Hexo + Fluid

免费个人博客搭建教程：Cloudflare + GitHub + Hexo + Fluid

Hexo 是一款基于Node.js 的快速、简洁且高效的静态博客框架。 Hexo 使用Markdown（或其他渲染引擎）解析文章，安装十分方便，配置简单，自定义功能强大，在几秒内，即可利用靓丽的主题生成静态网页。

免费个人博客搭建教程：Cloudflare + GitHub + Hexo + Fluid

如何通过 Cloudflare R2 和 PicGo 搭建免费的图床。今天，我们将进一步搭建一个完全免费的个人博客网站。目标是实现以下几点：

  • 完全免费，无需购买云服务器
  • 配置简单，专注于写作和内容发布
  • 国内外访问流畅，体验良好

基于以上需求，我们选择使用 Hexo 静态博客框架，配合 GitHub Pages 进行托管，并使用 Cloudflare Pages 实现加速，最终配合 Fluid主题 打造一个美观实用的个人博客。

一、搭建 Hexo 本地环境

1. 安装 Node.js 和 npm

Hexo 依赖于 Node.js。请访问 Node.js官网 下载并安装最新版 Node.js。安装完成后，验证是否成功：

1
2
node -v
npm -v

2. 安装 Hexo CLI

为了提升安装速度，先切换 npm 源为国内镜像：

1
npm config set registry https://registry.npmmirror.com

然后全局安装 Hexo：

1
npm install -g hexo-cli

初始化 Hexo 项目：

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

这样，Hexo 环境就配置完成了。

二、使用 Hexo 撰写博客文章

使用 VSCode 打开 my-blog 文件夹，重点了解以下目录结构：

  • _config.yml：全局配置文件
  • source/_posts：存放文章的目录
  • themes：主题目录

创建新文章：

1
hexo new post "我的第一篇博客"

启动本地预览：

1
hexo s

然后访问 http://localhost:4000 进行本地查看。

三、部署到 GitHub Pages

1. 创建 GitHub 仓库

登录 GitHub 并创建一个新仓库，命名为：你的GitHub用户名.github.io，这是 GitHub Pages 的默认格式。

初始化仓库后，将本地博客代码推送上去：

1
2
3
4
5
git init
git remote add origin https://github.com/你的用户名/你的用户名.github.io.git
git add .
git commit -m "initial commit"
git push -u origin main

2. 配置 Hexo 部署插件

安装部署插件：

1
npm install hexo-deployer-git --save

编辑 _config.yml 文件，添加部署信息：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/你的用户名/你的用户名.github.io.git
  branch: main

然后执行部署命令：

1
hexo clean && hexo g && hexo d

现在，你的博客已经可以通过 https://你的用户名.github.io/ 访问了！

四、使用 Cloudflare 加速博客访问

GitHub Pages 在国内访问速度不稳定，因此我们借助 Cloudflare Pages 来提升全球访问速度。

设置 Cloudflare Pages

  1. 进入 Cloudflare
  2. 左侧导航栏点击 Pages，然后点击 Create a Project
  3. 选择连接 GitHub 仓库，授权并选中你的博客仓库
  4. 默认配置下点击 Deploy 即可

部署完成后，Cloudflare 会分配一个子域名供你访问。

五、配置自定义域名（可选）

如果你拥有自己的域名（例如通过阿里云购买），可以将域名托管到 Cloudflare 并绑定博客：

  1. 在 Cloudflare Pages 项目中点击 自定义域名
  2. 输入你的域名，点击添加
  3. 按提示修改 DNS 设置，激活后即可通过自己的域名访问博客

六、更换 Hexo 主题为 Fluid

默认主题较为简陋，我们推荐使用美观、功能完善的 Fluid 主题。

安装主题

  1. 下载 Fluid 的 Release 包
  2. 解压到 themes/fluid 目录
  3. 修改 _config.yml：
1
theme: fluid
  1. 可参考 Fluid 官方文档进一步配置首页、关于页等内容

重新生成并部署：

1
hexo clean && hexo g && hexo d

七、添加评论功能（Utterances）

Utterances 是一个基于 GitHub Issues 的评论系统，简单易用。

开启 GitHub Discussion

进入你的博客仓库，打开 Settings > Features > Discussions，勾选开启。

配置 Utterances 插件

编辑 themes/fluid/_config.yml，添加以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
post:
  comments:
    enable: true
    type: utterances

utterances:
  repo: 你的用户名/你的用户名.github.io
  issue_term: title
  label: utterances
  theme: github-light
  theme_dark: github-dark
  crossorigin: anonymous

重新部署后，即可在文章底部看到评论功能。

结语

到此为止，我们使用 Hexo + GitHub Pages + Cloudflare + Fluid 成功搭建了一个免费、稳定、美观的个人博客。后续你还可以添加：

  • 网站访问统计（如百度统计或 Cloudflare Analytics）
  • 文章目录、标签、分类功能
  • 深色模式、自定义样式

这一套方案非常适合技术博主、学生和开发者自建博客，零成本却不打折体验，值得一试！