个人 Blog 托管方案

1. 背景

随着公众号推送、短视频等新业态媒体的兴起，传统内容输出型博客已然日渐式微。不过考虑到文字输出的效率、对内容的自主版权以及搜索引擎的索引等等，博客仍然有其不可替代之处。

笔者仍然相信，基于文字输出的博客相对于视频有更高的信息熵、更好的阅读体验，以及在 “没有记忆” 的互联网中可以将个人的知识和经验积累予以有效保存。这不仅是一种个人备忘的方式，也是所谓 “互联网精神” 的延续。

下面总结一下个人 Blog 的托管方案，以期抛砖引玉。

2. 系统选型

2.1. 静态博客

纯前端实现，一般在本地或部署平台上将源码编译为前端页面并托管，比如成熟的博客框架 hexo、hugo 等。优点是部署灵活成本低廉、部署无需服务器因此不存在网络攻击与数据安全问题；缺点是具有一定上手难度、缺少图形化后台管理、功能丰富性不如动态博客、文章跨设备编辑相对不便等。

2.2. 动态博客

拥有后端支持的博客系统，具有丰富的功能和前后端插件支持，比如著名的 CMS 引擎 WordPress 等。优点是功能强大，易于上手、数据管理和文章写作容易；缺点是部署需要服务器并需要定期维护更新引擎、存在被攻击风险，另外部署维护成本也相对较高。

2.3. 个人选型

个人对博客系统有如下要求：

  • 部署成本低，维护简单，即使长期不维护也不易掉线 / 丢失
  • 支持 Markdown 写作
  • 便于跨设备阅读 / 编辑
  • 最重要的是内容输出，其他辅助功能可有可无

综合考虑，最终选择了静态博客引擎 Hexo 作为博客框架，主要看中其强大的插件生态，以及支持 Serverless 部署的能力。

3. 架构设计

  • 部署：使用 Cloudflare Pages 部署 Hexo 框架，Serverless 部署无需操心服务器和维护问题，极小的网络攻击风险，自动解决 HTTPS，无需操心备案，网站无需维护也可以长期保持在线
  • 数据管理
    • 文章储存于 GitHub 仓库，使用 Git 进行版本管理，拥有完善的历史管理功能
    • GitHub 仓库可以无缝对接 Cloudflare Pages 一键部署，心智负担较小
    • GitHub 仓库数据持久性好，即使发生极端情况也拥有本地 Git 仓库副本，不致于丢失数据
  • 文章写作：写作在本地 Git 仓库中使用 Markdown 编辑器写作，写作完成后推送到远程仓库，Cloudflare Pages 会自动部署最新版本文章上线，全程无需人工干预十分省心
  • 图床：使用 Cloudflare R2 对象储存，在本地使用 PicGo/PicList 上传图片到图床，获取公开链接后插入到 Markdown 中
  • 评论区：使用 Fluid 主题自带的 giscus 插件实现，将 GitHub Discussion 变为博文评论区

3.1. 图床

图床基于 Cloudflare R2 对象储存搭建。详见另一篇文章 《使用 Cloudflare R2 搭建免费个人图床》

3.2. 评论区

本博客评论区使用 giscus​ 实现，将 GitHub 仓库的 Discussion 转化为每篇文章的评论区，这样就不需要托管单独的评论数据服务器了

4. 搭建步骤简述

4.1. 博客初始化

  1. 安装 NodeJS 和 Git，安装最新 LTS 版本即可
  2. 执行 npm install -g hexo-cli，安装 hexo-cli
  3. 创建一个空文件夹来放置你的博客，执行 hexo init . 命令初始化博客环境
  4. 执行 npm install 来安装依赖
  5. 在当前目录创建 git 仓库，并视情况写一下.gitignore

4.2. 配置博客

_config.yml 是博客系统的配置文件，可配置项较多，可以慢慢研究。介绍详见官网 配置 | Hexo

4.3. 写作文章

source/_posts 目录下就是写作博文的地方，每篇文章一个 markdown 文件。你可以使用任意 Markdown 编辑器进行写作。

  • 你可以在其中创建自定义的文件夹层次。如果安装了 hexo-directory-category 插件，他会根据你博文所在的文件夹，自动为文章打上分类

  • 在文章顶部，可以写一块由两段 “—” 符号包起来的元数据记录区，称为 Front-Matter。在其中可以写上本篇文章相关的元数据，供博客系统解析使用。具体详见介绍：Front-matter | Hexo

    • 一个 Front-Matter 的例子：

      ---
title: 个人Blog托管方案
tags: [hexo, Cloudflare]
index_img: XXXXXXXX.png
---

  • 文章中的图片建议使用图床。关于图床的配置与使用，详见另一篇文章 《使用 Cloudflare R2 搭建免费个人图床》

4.4. 安装主题

在 Themes | Hexo 寻找你感兴趣的主题，按其 README 说明安装。遇到一个好看的主题，对博客的阅读者来说也是一种享受。

Hexo 框架拥有众多美观且好用的主题，作一些推荐：

4.5. 安装插件

在 Plugins | Hexo 寻找你需要的插件，按其 README 说明安装即可。

在此推荐一些好用的插件，可以有效提高生活质量：

4.6. 本地测试运行

在博客目录下，终端执行 npm run server，hexo-cli 会在完成博客编译，并拉起一个本地测试服务端。打开链接，你就能在浏览器中预览博客实际效果了。

4.7. 发布博客到 Cloudflare Pages

又是大善人 Cloudflare，为个人开发者提供了免费的在线静态网站托管服务 Cloudflare Pages，支持对接 GitHub 仓库实现一键发布部署，网站全球加速，实乃善哉。

简述一下发布流程：

4.7.1. 上传博客到 GitHub 仓库

  • 将你的博客上传到 GitHub（安全起见，建议使用 private 仓库，以防止博客配置中的密钥等信息发生泄漏）
  • 如果对 Git 不是很熟悉，推荐使用 GitHub Desktop。这个 APP 可以让你将 GitHub 仓库当成手动同步网盘来使用，点点点即可完成提交、推送、拉取等操作。

4.7.2. 购买域名

  • 你需要注册一个域名，用于博客访问。便宜低价的域名还是很好找的，几十块乃至几块就能拿下一年的使用权。
  • 购买完成后，将域名从购买的平台迁出，迁移到 CloudFlare 下，这样就可以简单方便地使用 CF 的加速服务和 DNS 设置了

4.7.3. 配置 Cloudflare Pages

  1. 登录 Cloudflare 管理面板，点击左侧栏 计算和 AI → Workers 和 Pages，然后点击右边的 创建应用程序

  2. 选择使用 GitHub 部署，然后在下一页选择你博客所在的 GitHub 仓库名称

  3. 填写名称等配置

  4. 创建完实例后，在设置选项卡中修改实例的构建配置：

    • 框架预设：无
    • 构建命令：npx hexo generate
    • 输出目录：public

  5. 为实例添加必要的环境变量，比如

    • NODE_VERSION：填写你使用的 NodeJs 主版本号，比如 24
    • TZ：填写你所在的时区，比如 Asia/Shanghai

这样就配置完毕了。你可以尝试向 GitHub 仓库推送一篇新的博文，随后 Cloudflare 将自动拉取 GitHub 仓库进行编译部署，并发布在一个 xxxx.pages.dev 的域名，供你临时访问

以后每次向 GitHub 仓库推送文章或者博客系统配置修改，Pages 都会自动进行编译部署和发布工作。

4.7.4. 使用自己的域名访问博客

最后，将域名绑定到 CF Pages 服务上。

  1. 在你的 Cloudflare Pages 实例管理中，进入 自定义域 页面，添加一个自定义域名
  2. 根据你注册的域名，加一个前缀用于访问博客。比如本博客是：blog.openyq.top
  3. 按下一步的指示设置 DNS 解析
  4. 大功告成！

稍微等待几分钟（等待 DNS 修改生效），你就可以使用你设置的域名来访问博客了。

5. Tips

  • 你也可以使用 GitHub Pages 部署博客，并使用 Cloudflare 配置全球加速。流程是大同小异的
self-hosting
#hexo #Cloudflare
个人 Blog 托管方案
https://blog.openyq.top/posts/65274/
作者
yqs112358
许可协议