为什么改用 Astro原本的博客基于 Vue 3 FastAPI有完整的后台管理、评论系统、GitHub OAuth 登录。随着功能的添加维护成本变高服务器成本、数据库备份、依赖升级……于是决定改造成纯静态站。核心改造点内容源从 MySQL 改为src/content/posts/*.mdObsidian 写完直接复制进来评论后端 API 改为 GiscusGitHub Discussions搜索后端 LIKE 查询改为 Pagefind 构建时索引部署Docker Nginx 改为 Cloudflare Pages 自动构建实现博客主要是使用VibeCoding实现使用的AI产品时Trae。刚开始本来是想实现一个完整的前后端项目但是去搜索服务器的相关信息长期使用的话成本也是不小所以在b站上搜索了一些博客的构建了解到静态网站的部署基于cloudflare的免费计划部署又基于开源项目CloudFlare-ImgBed 部署了自己的图床。在实现的过程中前面主要使用Trae IDE进行构建好像是2026年7月31日软件实行了积分机制 在积分使用完之后转到了TRAE Work产品的使用新人注册又2000积分每天登录能够领200积分而且还能添加插件。不过积分的消耗是比较快的在交流过程你让它解决两三个小问题就要使用差不都两百积分。不过每天优化一个小问题还是没问题的。代码示例import{getCollection}fromastro:content;constpostsawaitgetCollection(posts,({data})!data.draft);保留的设计纯黑白渐变配色、浮动药丸导航、网格发光背景、暗色模式、Markdown 渲染样式全部保留确保视觉一致性。页面展示我的Githubchengzi改造不是推翻重来而是用更轻的方式延续同样的表达。 为什么改用 Astro原本的博客基于 Vue 3 FastAPI有完整的后台管理、评论系统、GitHub OAuth 登录。随着功能的添加维护成本变高服务器成本、数据库备份、依赖升级……于是决定改造成纯静态站。核心改造点内容源从 MySQL 改为src/content/posts/*.mdObsidian 写完直接复制进来评论后端 API 改为 GiscusGitHub Discussions搜索后端 LIKE 查询改为 Pagefind 构建时索引部署Docker Nginx 改为 Cloudflare Pages 自动构建实现博客主要是使用VibeCoding实现使用的AI产品时Trae。刚开始本来是想实现一个完整的前后端项目但是去搜索服务器的相关信息长期使用的话成本也是不小所以在b站上搜索了一些博客的构建了解到静态网站的部署基于cloudflare的免费计划部署又基于开源项目CloudFlare-ImgBed 部署了自己的图床。在实现的过程中前面主要使用Trae IDE进行构建好像是2026年7月31日软件实行了积分机制 在积分使用完之后转到了TRAE Work产品的使用新人注册又2000积分每天登录能够领200积分而且还能添加插件。不过积分的消耗是比较快的在交流过程你让它解决两三个小问题就要使用差不都两百积分。不过每天优化一个小问题还是没问题的。代码示例import{getCollection}fromastro:content;constpostsawaitgetCollection(posts,({data})!data.draft);保留的设计纯黑白渐变配色、浮动药丸导航、网格发光背景、暗色模式、Markdown 渲染样式全部保留确保视觉一致性。页面展示我的Githubchengzi改造不是推翻重来而是用更轻的方式延续同样的表达。 
实战：从原理到代码实现)
