为什么改用 Astro

原本的博客基于 Vue 3 + FastAPI,有完整的后台管理、评论系统、GitHub OAuth 登录。随着功能的添加,维护成本变高:服务器成本、数据库备份、依赖升级……于是决定改造成纯静态站。

核心改造点

  1. 内容源:从 MySQL 改为 src/content/posts/*.md,Obsidian 写完直接复制进来
  2. 评论:后端 API 改为 Giscus(GitHub Discussions)
  3. 搜索:后端 LIKE 查询改为 Pagefind 构建时索引
  4. 部署:Docker + Nginx 改为 Cloudflare Pages 自动构建

实现

博客主要是使用VibeCoding实现,使用的AI产品时Trae。刚开始本来是想实现一个完整的前后端项目,但是去搜索服务器的相关信息,长期使用的话,成本也是不小,所以在b站上搜索了一些博客的构建,了解到静态网站的部署,基于cloudflare的免费计划部署,又基于开源项目CloudFlare-ImgBed 部署了自己的图床。在实现的过程中前面主要使用Trae IDE进行构建,好像是2026年7月31日软件实行了积分机制 ,在积分使用完之后转到了TRAE Work产品的使用,新人注册又2000积分,每天登录能够领200积分,而且还能添加插件。不过,积分的消耗是比较快的,在交流过程,你让它解决两三个小问题,就要使用差不都两百积分。不过,每天优化一个小问题还是没问题的。

代码示例

import { getCollection } from 'astro:content';

const posts = await getCollection('posts', ({ data }) => !data.draft);

保留的设计

纯黑白渐变配色、浮动药丸导航、网格发光背景、暗色模式、Markdown 渲染样式全部保留,确保视觉一致性。

页面展示

image.png

image.png

image.png

image.png

image.png

image.png

我的Github

改造不是推翻重来,而是用更轻的方式延续同样的表达。

Logo

AtomGit AI 社区提供模型库、数据集、Agent、Token等资源

更多推荐