博客迁移-Obsidian自动化发布

我在大三时基于springboot和vue写了自己的博客，有着美观的界面和丰富的后台管理。一切都那么完美，直到我尝试去写博客…… 好吧，并没有那么完美，我习惯在Obsidian里面写博客，为了发布我需要cv到后管网页。然后我在启动我的p站爬虫脚本去精选一张配图。这太麻烦了，即使我后面加了一键解析md文档到后管的功能，我依旧需要手动登录到后管，去上传。我那个时候就在想，而且得益于vue伟大的seo性能，我的seo接近于没有。我为什么不选择使用hexo?它是ssg，它是静态生成，它有那么丰富的插件生态！直到我刷到了这位佬的博客 skywt,astro，多么优美的框架

于是一个思路在我心中埋下萌芽 在Obsidian写博文，推送到远程服务器，服务器根据md文档静态生成网页（静态网页通过Obsidian元数据进行解析（标题-文件名，创建时间更新时间tags-元数据，分类-顶层文件夹名））。以markdown为数据源的思想与astro不约而同，于是在公司放假后我很快开始了这个博客的编写。

框架选择 ：astro+react

astro是一个专门用来做内容驱动网站的框架，且这个框架的厉害之处除了他伟大的ssg性能外，竟然还能支持多框架（react/vue等等），在复杂的交互下使用react写js,在纯静态下保持astro保证性能。 这都得益于与他的群岛架构

群岛架构

“群岛” 架构的总体思想看似简单：在服务器上渲染 HTML 页面，并在高度动态的区域周围注入占位符或插槽 […] 这些区域随后可以在客户端 “激活” 成为小型独立的小部件，重用它们服务器渲染的初始 HTML。 — Jason Miller, Preact 的创造者

群岛架构的核心理念是它承认大多数网页内容实际上是静态的，并拒绝为静态内容发送 JavaScript。通过将页面拆分为独立的岛屿，它实现了并行加载和按需执行，这是传统单一巨大的 JavaScript 包无法比拟的。

传统的单页应用（SPA）即使是一个只有文本的静态页面，也往往需要下载并执行一个巨大的 JavaScript 包（Bundle）来渲染内容。

• Astro 的做法： 默认情况下，Astro 会在构建时移除所有 JavaScript。如果你没有明确标记某个组件需要交互，它就只是纯 HTML 和 CSS。

• 结果： 极快的首屏加载速度（FCP）和极小的带宽占用。

B. 部分注水 (Partial Hydration)

这是性能提升的“杀手锏”。传统框架需要加载整个页面的 JS 才能让页面动起来。

• Astro 的做法： 只有作为“岛屿”的组件才会被注水。

• 结果： 浏览器的主线程不会被巨大的水合任务阻塞。用户可以立即看到内容，并且交互组件的响应速度更快（TTI 缩短）。

C. 精细的懒加载控制 (Granular Lazy Loading)

Astro 允许你精确控制每个“岛屿”何时加载 JS。通过简单的指令，你可以极大地优化性能：

指令	行为	性能优势
client:load	页面加载时立即注水	用于高优先级的交互组件（如导航栏）。
client:idle	浏览器空闲时注水	不阻塞初始渲染，用于非关键 UI。
client:visible	仅当组件滚动到视口内时注水	性能提升最明显。用户没滑到的地方，绝对不加载 JS。
client:media	仅在特定媒体查询匹配时加载	比如只在桌面端加载侧边栏交互。

主题风格

有句老话说，花里胡哨的尽头是极简主义。我的博客目前的第一个主题便是极简主义。极简主义有个优点，他不需要复杂的交互，不需要花里胡哨的动画，也就是并不需要制作人要有很强的前端功底，同时他又能让读者真正的专注于文章的阅读而非其他的干扰。真是无比契合博客的风格，不过我不只满足于此。于是我让ai设计了部分动漫彩蛋藏在了博客里面，作为装饰的同时让博文满足我的个性化需求。

vibecoding

实不相瞒，整个项目从需求分析-系分文档-原型图设计-代码编写-bug修复-工作流部署均为纯ai完成，个人只起到了提供需求，审核执行方案的作用。ai时代下技术的高深与否对能否写出优美的，健壮性的程序相关度在大幅下降。

以下是使用的ai工具列表

工具名称	涉及功能
gemini3pro网页端	需求分析文档编写；原型图设计;功能实现思路
反重力cladue4.6ops	代码编写-自动化测试
codex 5.3xh	debug，codeReview，部署github action yml编写，bark通知脚本

反重力为类似cursor的ai ide，但是集成了大量的以前需要自己配mcp的配置（浏览器自动测试），属于是懒人必备了，codex等这种类claude code的cli编程工具给我了一点小小的ai震惊。我把codex部署到了我的树莓派上让它完全的做了开发机，因为我家有公网ipv6，只要我脑子里有了创意，我可以在任意时间任意地点，打开termius和tmux进行vibecoding，完全终端的界面也完全杀死了我CodeReview的心。我放下了一切负担完全的不看代码的vibecoding这还是第一次，而强大的codex5.3xh给我了极大的信心，超强的debug能力，超大的上下文，以及几乎无限的额度（这几个月还翻倍，不翻倍我也用不完，一周也就顶多用20%的用量）

由于这个项目只是一个纯前端的简单项目，我并没有完全的按照spec驱动的规范来，只是简单的让ai根据需求文档和系分文档进行开发，根据功能点做出排期，并且时刻记录进度，在每轮排期的代码开发完成后让codex进行一次codeReview和重构。无比丝滑的流畅，从代码文档到编写到实际上线就花了两天时间。完成编码后我迷茫了，ai与其说是在减少人学习新框架的工作量，不如说是直接消灭了。现在代码已经写完了，我对astro依然仅有浅显的理解，简单的知道他怎么写，几个场景的坑怎么解决，但是仅此而已了，ai时代去研究技术的深度和广度真的还有意义或者说性价比吗?假如你达到了这个技术的巅峰，那么过了几年后这个技能过时了，这门编程语言再也不用了，只有ai，唯独只有ai，他在任何时代都会那个时代最前沿的技术框架。 我们还能做什么？除了验收和提出需求外还有什么是人类能插手的？文档编写？还有谁有ai编的快编的准？代码？谁能和ai比写代码速度？架构？claude的架构能力很不错。debug？ai能几分钟内读完上万行的报错日志,配合自动化测试框架mcp能时刻获取网页html元素，然后给出不同的修复方案，并且快速去验证修复方案是否可行，我们只能靠经验和断点进行步步调试。我们所谓的特定项目的经验只要作为提示词填充到该项目的知识库里ai比我们更清醒。

软件产业会发生变革，程序员会从写代码的人完全变成去解决XY问题的人

XY问题

什么是 XY Problem

A：赵老师，请教个问题！
Z：好呀！
A：怎么用 Shell 去取得一个字符串的后 3 位字符？
Z：如果字符串变量是 $str，你可以这样做 “echo ${str:-3}”。
Z：为什么你要取后 3 位字符呢？你想干什么？
A：其实我想取文件的扩展名，比如 aaa.txt、bbb.doc，我想取出 txt、doc 然后判断文件的类型。
Z：--||--||
Z：可文件的扩展名的字符数不是一定的呀。比如 bbb.docx。
A：这我没有想到。
Z：如果你想取文件的扩展名可以使用“echo${str##*.}”。这样就可以把任何文件的扩展名取到了。
A：太好了，谢谢赵老师！
Z：不客气！

• 用户想要解决问题 X
• 用户认为 Y 可以解决 X 的问题
• 用户同样也不知道如何做 Y
• 于是用户向被提问者提出问题 Y
• 被提问者按照用户的问题试图解答问题 Y 题，但被提问者感到困惑，因为 Y 是个很奇怪的问题
• 经过多次交互，最终被提问者明白了其实用户是想问问题 X，而 Y 其实并不是一个合适的解决方案

XY Problem 就是提问者没有向被问者提出问题的本身，而是将提问者自认为的解决方案抛给了被提问者，于是大家在一个错误的方向上浪费了大量的时间和人力物力。

该怎么办呢？

• 始终包含关于整体情况以及任何尝试解决方案的信息。
• 如果有人要求提供更多信息,请提供详细信息。
• 如果还有其他你已经排除的解决方案,请分享一下你排除这些解决方案的原因。这提供了有关您要求的更多信息。

这就是ai欠缺的，他永远不能解决xy问题，因为他的上下文并非无限的，即使是无限的他也不知道在如此多的上下文中哪些是重要的哪些是脏信息。 对于一个业务需求，如何判断哪个技术方案可行，哪个技术方案过于绕圈子是当前时代下更重要的问题，这才是人类需要做出的判断

部署运维

CICD自然选择了我们的老朋友：github action自动化部署，建站因为我的服务器到期了，这里直接选择了阿里的oss静态建站。不过为了让代码和博文相解耦，采用了双git仓库模式。

双git仓库

代码库与博文库相分离。流程如下。 场景1 代码变更 代码提交到代码库dev分支-触发action-astro build-dist的构建文件上传到阿里oss-触发bark通知提醒

场景2 博文变更 代码提交到博文库-触发action-发送博文变更时间给代码库，事件内容包括博文的变更内容（是否是新发布，是否发布了多篇）-代码库接受事件并触发部署action->走一遍场景一的部署流畅

bark通知

ios存在bark可以原生的在任意地方使用http请求加设备token给手机发通知，确实是一个优雅的功能。

附录：Obsidian插件

主要使用git推送，NustoreSync做手机pc远程同步，templater做笔记元数据管理，update time to edit做创建时间更新时间的元数据控制