核心技术#

• 静态站点生成器：Astro 5.13.10
• UI 框架：Svelte 5.39.8
• 样式：Tailwind CSS 3.4.19
• 包管理器：pnpm 10.29.1
• 内容管理：Astro Content Collections + Markdown
• 部署平台：Cloudflare Pages

项目结构#

1
fuwari/
2
├── src/
3
│   ├── content/
4
│   │   ├── posts/          # 博客文章（Markdown）
5
│   │   └── config.ts       # 内容模式定义
6
│   ├── config.ts           # 主配置文件
7
│   ├── components/         # 组件
8
│   ├── layouts/            # 布局
9
│   ├── pages/              # 页面
10
│   └── styles/             # 样式
11
├── public/
12
│   ├── favicon/           # 网站图标
13
│   └── images/            # 静态图片
14
└── package.json

写作流程#

1
1. 在 src/content/posts/ 创建 .md 文件
2
2. 添加 Frontmatter
3
3. 编写 Markdown 内容
4
4. 本地预览：pnpm dev
5
5. 发布：git add . → git commit → git push

部署流程#

1
1. 本地写文章
2
2. 推送到 GitHub
3
3. Cloudflare Pages 自动检测
4
4. 自动构建部署
5
5. 几分钟后在线可见

博客地址#

• 在线访问：https://croco-blog.pages.dev

功能特性#

• ✅ 清爽的卡片式设计
• ✅ 响应式布局
• ✅ 亮/暗主题切换
• ✅ 搜索功能（Pagefind）
• ✅ 文章分类和标签
• ✅ 自动目录生成
• ✅ 代码高亮
• ✅ 数学公式支持
• ✅ 图片画廊

性能优势#

• ⚡ 静态文件加载速度极快
• 🔒 没有数据库，更安全
• 💰 完全免费托管
• 🌐 Cloudflare CDN 全球加速
• 🇨🇳 国内访问速度快

AI 辅助开发的优势#

作为编程新手，能在一天内完成博客搭建，主要归功于 Claude Code：

1. 降低门槛：不需要学习复杂的技术栈
2. 自动决策：帮我选择了最合适的方案
3. 快速解决问题：遇到错误立即定位和修复
4. 减少试错：避免了常见的配置错误
5. 学习机会：在操作中也能学到知识

静态博客的好处#

对比之前的尝试，我深刻体会到静态博客的优势：

1. 开发体验好：本地用熟悉的编辑器写文章
2. 完全自动化：Git 推送即部署，不需要手动操作
3. 版本控制：每次修改都有记录，可以随时回滚
4. 成本低：Cloudflare Pages 完全免费
5. 性能好：静态文件加载速度快
6. 安全：没有数据库，不会被黑客攻击

克服困难的过程#

整个过程中遇到了很多困难：

1. 网络问题：Docker 镜像下载失败、GitHub 克隆慢
2. 配置问题：端口冲突、Git 历史冲突
3. 界面不熟悉：Cloudflare Pages 界面导航困难

但在 Claude Code 的帮助下，所有问题都一一解决。

短期目标#

• 定期更新博客文章
• 优化博客样式
• 添加评论系统
• 配置自定义域名

长期目标#

• 添加更多技术文章
• 学习更多 Astro 高级功能
• 建立个人知识库
• 与其他博主交流

搭建团队#

• 技术实现：Claude Code (AI 编程助手)
• 需求提出：我（Crocodile，编程新手）
• 完成时间：2026年2月8日

参考资源#