🛠️ 框架选型
-
VuePress → 适合文档，博客生态较弱 📄
-
文档友好但博客功能有限
-
主题选择偏向技术文档风格
-
-
Hugo → 配置复杂（extended 需要 GCC）、破坏性更新 ⚠️
-
需要GCC工具链编译
-
版本更新经常不向后兼容
-
主题依赖特定版本导致运行失败
-
-
Hexo → Node.js 生态友好，但主题选择有限 🌀
-
基于Node.js开发环境简单
-
但主题同质化严重，缺乏让人眼前一样的风格
-
-
Astro → 最终选择！✨
-
配置方便、UI灵活
-
缺点是还需要学习其独特的混合渲染模式
-
💡 Astro的渲染模式解析： Astro采用独特的"静态生成+按需激活"模式。默认情况下所有组件都是服务端渲染(SSR)，生成静态HTML。当需要交互性时，可以选择性激活部分组件进行客户端渲染(CSR)，这种"组件岛屿"模式既保证了首屏速度，又提供了必要的交互体验。
叽里呱啦了一堆，实际开发其实就是 TypeScript 和 Markdown 混合编写。需要样式的时候写代码自己加，写完样式后再往这个样式上应用 Markdown。
那么代价是什么？原本只需用简单编写 Markdown 就能完成的博客，因为灵活性需要上手编写 Astro 文件控制 UI 样式实现这种灵活性。不过，为了实现自定义样式，对于非代码小白来说这一切目前看起来是值得的。我甚至还试着给搭建博客封装的函数用 vitest 编写了单元测试 ：）。
🎢 开发历程
前前后后花了2天时间可算是搭建出了自己稍微满意的博客了。
一开始想着用之前的常用的 Vuepress 框架搭建，但是找了一圈主题，发现相较于博客，他更适合文档。就像拿着螺丝刀拧螺母，能用但不顺手。
接着，翻到了 Hugo 但是发现配置起来麻烦，找到的主题需要 extended 版本，且安装他居然还要 gcc 工具链。
又倒腾了一伙把环境配置好后才知道，Hugo的更新大部分都是破坏性的，每次更新都不会兼容之前的版本，导致选中的模板无法顺利运行，遂止。
接着，把目光投向了 Hexo，相较于 Hugo。采用NodeJS作为开发语言的Hexo算是比较友好的，但是翻了半天，还是没翻到满意的模板。
在询问了 AI 后得知了 Astro 框架的存在。在浏览了大量免费的 Blog 分类模板后，终于找到了还算是满意的模板。
一开始还是比较激动的，但是后面编写过程一言难尽。我一开始以为 --- 语法和 <script> 一样别无二致，只是一个语法糖。后来才发现这是Astro区分服务端代码和客户端代码的关键标记。服务端代码在构建时执行，客户端代码在浏览器中运行。
然后就是多语言部分，官方的demo目录结构感觉很不符合逻辑，不是 en_us / zh_cn 目录下面一把梭哈所有内容，而是在不同的内容目录下面拆分语言。经过不断的妥协，勉强弄了个自己还算看的过去的博客。
🚀 部署经历
不得不说，Github WorkFlow 以及 Pages 为开发者带来了很多便利。但是写yaml脚本的过程，时常让人感到不自在，束手束脚。
因此，为了上线我的个人博客以及 metrics 统计数据生成，我前前后后因为这个问题commit了20多次，改了试，试了改。最后以新建仓库单独引用metrics而告终。
可能是我的需求有点特殊，我需要生成 Github Metrics 图片，然后让我的博客引用他，而我的博客和它都部署在同一个url下面。
一开始 AI 写了两份yaml，如果一起运行就会相互覆盖。接着，我就让 AI 尝试合二为一，但是声明了 filename 字段后不知道什么原因 metrics.svg 文件没有正确生成。
最后不得不分了将这两个工作流分配在了两个仓库当中解决。好在问题也算是解决了。
