互联网 约 8 分钟

重构个人网站并启用新域名

全面拥抱 Node.js 生态
#Astro
#Cloudflare Pages

我在 2021 年底决定开始写博客，那时的首要目标是低成本地完成站点搭建并尽快开始发布文章。于是我直接使用了 Jekyll 框架并部署在GitHub Pages。这个方案的优点是 Jekyll 非常容易上手且对博客类型网站支持很好，结合 GitHub Action 部署简单且完全免费。另外由于我对我的设计能力完全没有信心，于是使用了 mvp.css 这个只需写页面结构，无需编写 CSS 即可获得美观样式的方案。

现在回过头来看，这个方案很成功，让我快速的把博客搭建起来并持续写了 20 多篇博客。

当前方案的不足

不过这两年多使用下来，这个方案也有一些不足之处：

  • 纯静态站点，无法实现动态功能。Jekyll 只支持生成静态站点 (SSG)，且 GitHub Pages 也仅支持静态网站的部署。如果我想要增加评论等需要后端服务才能支持的功能时，这个方案就无法实现了。

  • (我) 难以扩展。Jekyll 其实提供了很好的插件机制，但由于其采用 ruby 语言编写，我 (不会 ruby 也不想学) 无法通过内置的插件机制来实现各种自定义需求，只能转而采用其他方式间接实现。比如我的部署前自动压缩图片的功能，是通过 shell 脚本配合 npm 命令实现的。这就导致在开发和部署时十分别扭，我需要先执行 Node.js 命令，然后在再通过 Jekyll build 完成站点的构建。也就是说，站点构建过程被割裂开了。

  • Jekyll 的版本更新已不再活跃。最近两年 Jekyll 仅有 4 次小版本发布，且几乎没有增加新功能，仅仅是问题修复和依赖升级。而同期的 React 和 Node.js 领域，各种创新层出不穷，从 Server Action 到 Edge Function，从 Nextjs 一家独大到各种框架百花齐放。让我数次产生想要迁移的冲动。

重构的契机

不过我一直说服自己博客最重要的是持续输出内容，而不是折腾各种酷炫的技术和好看的主题。因此我给自己设定了需要同时满足三个条件才能考虑博客的重构。它们分别是：

  • 至少发布 20 篇博客文章。
  • 注册一个合适的域名。
  • 再发现一个现有方案的痛点。

今年，压死骆驼的最后一根稻草终于出现了🤣。那就是 squoosh cli 不再维护了。这导致其只支持 Node.js v16。而 v16 版本的生命周期在 2023 年 9 月就结束了。于是我在站点构建时又多了个步骤：切换 Node.js 版本到 v16。在这样切换了几次后，我终于下定决心要进行重构了。

新的方案

近几年流行的前端框架之多，既有 Nextjs 这种最流行的大众之选，也有我个人最喜欢的 Remix，甚至还有很多小众但各具特色的框架，简直让我犯了选择困难症。不过考虑到博客是典型的重内容、轻交互的网站类型，我最终选择了 Astro 这个后起之秀。毕竟其官网的介绍就是 “The web framework for content-driven websites”。

Astro 的功能很全面，但有两个特性对静态站点 (SSG) 特别有用。一个是 Content Collections 特性：提供了以类型安全 (type-safety) 的方式定义和验证任意文档类型。另一个是 astro:assets 特性：可以在站点构建时自动压缩和裁剪图片。

关于博客的样式，我本来想简单选个主题完事，但后来觉得自己的博客还是应该有自己的风格，用了主题后反而不便于调整修改。于是用 tailwindcss 完成了初版的样式设计。

还有一个重要改变是网站托管从 GitHub Pages 迁移到了 Cloudflare Pages。这个改变主要是考虑到未来有些功能会需要后端服务的支持，必须选择一个支持服务端渲染的托管环境。而这样的托管环境，开发体验最好的是 Vercel 和 Cloudflare Pages。我最终选择了 Cloudflare Pages。原因是 Vercel 虽然也提供了很慷慨的免费额度，但一不小心也可能出现刷爆信用卡的情况。

改版收益

经过这次改版，在技术和内容这两方面都获得了很多益处。

技术方面

  • 简化了站点构建流程。无需再额外处理图片压缩等问题，写完博客，提交到仓库后就会自动完成构建并更新网站。
  • 具备了服务端渲染（SSR）的能力。虽然当前新版博客仍然是纯静态站点，但已经具备服务端渲染的能力。未来可以将整站或任意页面改为服务端渲染以支持评论等功能。
  • （对我）更好的扩展机制。相对于 Jekyll 而言，开发 Astro 的插件对我来说要容易的多。
  • MDX 格式更方便在博客文章中插入一些小组件。Jekyll 只支持 markdown 格式，所以之前要在文章中加入非 markdown 语法的内容，只能通过内嵌 html fragment 的方式实现。而使用 MDX，可以直接导入组件，这实在是方便了太多。

内容方面

除了技术方面的改进。这次重构在内容方面也做了一些调整优化。主要集中在以下方面：

  • 调整了博客分类。之前的分类有些随意。随着内容的增加，分类和标签的区别越来越模糊不清。新版中分类固定分成了「生活方式」、「个人成长」、「投资理财」、「产品心得」、「观点看法」、「经验技巧」等六个类别。更具体的细分则由标签来承载。
  • 调整了「投资备忘录」系列的内容。「投资备忘录」系列的本意是记录投资中的判断和决策的依据和思考过程，以供未来复盘使用。因此这个系列的文章，最重要的是要有明确观点或结论可被后续验证。但之前我将一些方法论类型的文章也放到了这个系列里，而这些内容是无法被验证的，也就失去了备忘录系列的意义。这次趁机将这这些文章移出了此系列。

过渡方案

由于有人已经收藏了或是通过 RSS 订阅了当前站点，因此直接将当前站点下线或重定向到新域名并不是一个好的选择。在未来很长一段时间内，当前网站仍将继续存在，但新文章则只有摘要信息和对应的新网站的链接，以引导用户至新网站。

快来看看

写了这么多，终于可以放上新网站的链接了。 https://bojie.site，快来看看吧。

© 本文版权使用创意共享 3.0 许可证(自由转载 - 非商用 - 非衍生 - 保持署名)
「互联网」分类下的其他文章