搭建本博客的心路历程与技术选型

我整理了在启动本博客时最初的一些想法。

【建站目的】

通过撰写博客记录我所学到的技术，旨在帮助自己更准确、更深入地理解技术，同时尝试对其进行变现，以补贴服务器的维护资金。因此，我的优先级如下：

掌握最新的技术。
尽量降低运营成本。如果支出超过收益，将很难持续运行。
尽量减少撰写文章之外的精力投入（如繁琐的运维工作和文章发布流程）。
文章内容计划以技术为主，其次是个人兴趣爱好。

【关于运营环境的考量】

我列出了开始写博客的几种运营方式。

<免费博客网站的缺点>

无法帮助掌握最新的技术。
免费网站会自动显示广告，增加无法转化为自身收益的广告展示。此外，还可能显示非预期的广告。
因为是现成的博客平台，所以配置精力应该是最少的。

<收费博客服务的缺点>

无法帮助掌握最新的技术。
最大的问题是需要花钱。很有可能无法坚持下去而半途而废。
可能需要的管理精力最少。

<自主构建：WordPress + 家用服务器 + Cloudflare Tunnel>

只有使用 Cloudflare Tunnel 这一点比较新颖。
基本免费，因此很容易坚持下去。
WordPress 本身已经变得非常臃肿，容易使文章更新和系统管理等变得复杂，产生一定的学习成本。*在可接受的范围内吗？

<自主构建：JS 框架 + GitHub + Headless CMS + Cloudflare Pages>

使用新型 CMS 形式的 Headless CMS 管理内容，并与 JS 框架配合使用。
基本免费，达到了建站目的。
虽然使用 SaaS 平台很方便，但如果服务终止，就会陷入困境。迁移成本 and 精力会增加。

【开发环境】

因此，基于以上考量以及下文中的框架信息，作为未来开发大型应用的前期调研和学习，我决定尝试使用前端框架 + 无头 CMS + Cloudflare Pages 组合来搭建一个博客网站。

<关于编辑器>

对于代码开发环境，通常需要安装名为 IDE 的集成开发环境，并添加适合开发环境的扩展。VS Code 是最理想的选择，但由于轻量且快速的 Zed 编辑器已经支持了 Astro 扩展，我这次决定使用 Zed。

<开发用的桌面环境>

代码开发需要与 npm (Node Package Manager) 和 GitHub 等其他云服务进行联动。（参考：npx 代表 "Node Package Execute"。与 npm 不同，它是一个命令行工具，可以在不安装的情况下临时执行 Node.js 包，运行它们而不会污染全局环境。）

系统类型	特点
Linux	据说全球约 70% 的 Web 服务器都运行在 Linux 上。它在服务器市场占有率极高，且拥有最多的开发工具。但是，桌面 GUI 的精致程度和应用生态支持明显低于 Mac 或 Windows，不太适合作为开发者的主战机。
macOS	最初作为类 Unix 系统开发，对 Linux 命令支持极佳，大多数 Linux 命令可以直接在终端使用。桌面交互界面非常优秀，是许多开发者的首选开发设备。
Windows	在商务和普通用户中的市场份额占有绝对优势，且适合游戏，因此桌面机份额最高。通过安装 WSL (Windows Subsystem for Linux)，可以在 Windows 上完美运行 Linux 环境。它以虚拟机形式运行 Linux 并共享文件，兼具两者的优点。自 v2.0 发布以来，有大量开发者正在使用它。

博客搭建并不需要非常复杂的开发环境，因此 Mac 或 Windows 都可以。但为了省去安装 WSL 的麻烦，我这次选择使用 macOS 展开工作。

【Dev Container】

在团队协作开发中，使用 DevContainers 统一开发环境是主流做法。然而，坦白说，在像博客这样完全可以由单人开发的项目中引入 DevContainers，其维护成本似乎比带来的便利还要多，因此我这次暂时搁置了这个方案。

【前端框架的特点】

通常，根据某种“设计哲学”封装好的、用于构建网站的便利功能和库 of 集合被称为框架。在编写代码时遵循这种设计哲学，可以使网站开发变得高效。虽然这需要理解其设计哲学并学习代码的特性，但在掌握之后，整个实现代码中就会产生一致性，从而更加易读且不易产生 Bug，是开发大型网站不可或缺的要素。

框架名称	创造者	特点
React（用户群庞大）	Meta (Facebook)	UI 采用组件化管理，通过虚拟 DOM 仅渲染差异部分，因此渲染速度极快。比起框架， it 更接近一个 UI 库。 *我个人不太喜欢它
Next.js	Vercel	基于 React 的全栈框架。React 仅限于客户端，而 Next.js 包含了服务端，可以实现更优的渲染方式和更快的首屏加载。 *目前已不再推荐！（因为对该公司的 CEO 感到反感）
Vue.js（很多用户）	Evan You	对个人开发者来说简单易学，上手门槛低。通过不同的组合可以实现非常丰富的功能。采用组件化设计。由于其简单性，可以与各种库组合使用。中文及日文资源非常丰富。我个人很喜欢它。
Nuxt.js	Alexandre Chopin 等	基于 Vue.js 的全栈框架。特别擅长使用 SPA（单页面应用）模式构建网站。
Astro	Astro 科技公司	Astro 将整个页面渲染为静态 HTML，并通过移除不必要的 JavaScript 来实现极高的性能。它的设计允许同时使用不同的 UI 框架（如 React 或 Vue）。它比 SPA 更适合 MPA（多页面应用），首屏展示速度极快，是搭建博客最理想的框架。

<参考>

从 Next.js 迁移到 Astro 的实践分享
React 拥有 React Native 等衍生技术，可用于开发原生手机 App。如果需要跨平台提供服务，相对的学习成本会有所降低。
然而，对于 iOS 和 Android 的跨平台开发，谷歌的 Flutter 目前势头比 React Native 更猛。由于 UI 共享，即使机型不同，操作体验也不会发生变化，这对于企业级应用尤为便利。因此，我认为没有理由强行采用 React。

【开源（免费）无头 CMS】

适用于自建服务器的开源无头 CMS 种类并不多。像 microCMS 一样，许多公司将其作为 SaaS 云服务提供。然而，开源具有显著的优势，例如希望在内网完全掌握数据，或者在规模扩大时担心产生高额授权费。不过，这需要有一台自建服务器。

名称	特点
strapi	大概是目前最著名的开源无头 CMS。MIT 许可协议。无论是个人还是商业用途均可免费使用，同时也提供收费的高级版本。核心系统似乎是基于 React 的。示例：npx create-strapi-app@latest my-strapi-project --quickstart 使用 quickstart 选项时，数据库将默认为 SQLite。
Sanity	其强项在于灵活的数据模式（Schema）设计和实时协同编辑。非常适合动态 content 管理。属于云端托管型 (SaaS)，提供免费额度。
Ghost	使用 JavaScript 编写，运行在 Node.js 上。在 MIT 许可协议下发布。Docker Hub 上有官方镜像。这是一款专为博客类网站设计的无头 CMS，结构与 WordPress 非常接近。
Decap CMS	前身是 Netlify CMS。遵循 MIT 许可协议。相关文章较少。这是一款基于 Git 的开源 CMS，直接与 Git 仓库进行联动。示例：npm install decap-cms-app --save
Directus	在大型企业中有许多应用案例。使用 JavaScript 实现，运行在 Node.js 上。它可以将现有的 SQL 数据库直接转变为高性能的 API，自动将数据库结构转换为 API 结构。
Wagtail CMS	基于 Python 编写。被美国航天局 (NASA) 和谷歌等机构采用。示例：pip install wagtail
Payload CMS	数据库似乎绑定为 MongoDB。基于 JavaScript 开发。示例：npx create-payload-app
Tina	Unity 等公司在使用它。遵循 Apache 2.0 许可协议。示例：npx create-tina-app@latest
Keystone.js	由商业公司进行维护和开发。示例：npm create keystone-app@latest
Publii	遵循 GPL 3.0 许可协议。直接保存为 JSON 文件等，无需使用数据库。

* 20 种现代 CMS 概览

<无头 CMS 的选择>

基本上，既然是个人博客，那就必须保证免费才能维持下去，因此范围缩小到了遵循 MIT 协议开源的 Strapi、Ghost 和 Directus。在这些系统中，Strapi 看起来对未来的功能扩展和构建电商网站最有帮助，所以我这次选择了它。

【结语】

因此，我决定采用 Astro + Strapi + AlloyDB (PostgreSQL) + TailwindCSS + Cloudflare Pages + MacBook Pro + Zed 编辑器作为本博客的技术基础。这里的关键在于构建流程：

在 Mac 上启动 Strapi 容器，撰写文章。
在博客构建时，从 Strapi 中拉取静态页面和图片，生产环境中不需要运行 Strapi（无需购买云服务器！）。
将构建生成的全套静态生产数据部署到 Cloudflare Pages 上。网站完全由静态数据构成，JavaScript 极少，加载速度简直飞起。

最精妙的一点是，生产环境全都是静态数据。就好像只有在写文章的时候才需要用到 Strapi 一样。

作者: 黒兎