我又找回了写代码的快乐.

这个周末, 我用 Google Antigravity 做了一个自己的网站. 耗时大约10小时. 原本没两个小时就上线了; 后来我想着把podcast, substack都搬运一遍, 多用了一倍时间. 我上一次做任何网站, 是在2017年左右.这些年 front-end 技术的迭代很多, 对我来说, 这是一个相对新的体验.

1. AI 辅助全栈开发实战

概要

  • 结合 Gemini 架构决策与 Antigravity IDE 智能编码

  • 复盘如何利用 AI 工具(Gemini 和 Antigravity)在一个周末内构建并上线一个高性能的个人静态网站.

  • 不算建站教程, 应该是 AI 辅助工程(AI-Assisted Engineering)的实践分享.

项目背景与目标

目标: 把substack还有podcast的内容,可以同时sync到自己的服务器上.

核心需求

  • 高性能: 静态页面, 极速加载. 不需要复杂的网页功能

  • 低成本: 零维护费用, 免费托管.

  • 掌控权: 数据完全自有, 独立域名 (tuwang.ai).

AI 角色

  • Gemini: 架构,做简单的research -- 负责技术选型与方案制定.

  • Antigravity: 负责代码实现, 调试与资源生成.

2. Gemini 技术选型

架构决策: hosting static website

技术栈:

  • 框架: Hugo (构建速度极快)

  • 托管: Cloudflare Pages (全球 CDN, 自动化 CI/CD)

  • 开发环境: Antigravity IDE

决策依据: 相比 Wordpress, 该方案在性能与迁移灵活性上达到最佳平衡.

3. Antigravity 实战

Phase 1 - substack migration

挑战: 将 Tuwang Substack 的非结构化内容迁移至 Hugo 的文件系统.

实施步骤:

  • 数据清洗: 提取 Post 001-031 内容, 转成markdown file.

  • 使用工具: 我特地做了一个工具 Substack Scraper 来转化文章

  • 简化: 有些复杂的substack组件, 或者图片, 太过复杂, 所以我选择了重点转化文字

NOTE: 我们没有简单地复制粘贴, 而是利用 AI 将内容结构化, 然后整体地转化.

Phase 2 - podcast widget

痛点: 只有 Spotify 播客的主站链接, 如何快速生成结构化列表?

Antigravity 的高光时刻:

  • 自动抓取: 直接扫描 我的Spotify主页, 自动提取单集元数据.

    • antigravity 的browser功能点击button还不太准, 所以最后完整的链接, 是我手动抓取html源码给他的

  • 自动分类: 把最新的 ‘The Build Log’ 跟 ‘土汪遛弯儿’ 分别归类到不同的table (我完全没有指示)

  • 布局演进:

    • 尝试 1: 3 列 Grid (信息过载, 拥挤).

    • 最终版: 2 列 Grid, 统一宽度 100% (清晰, 呼吸感).

技术细节:

  • Embed 优化: 放弃默认大卡片, 强制使用极简播放器 (height=80px).

  • 历史回溯: 自动补全 “土汪遛弯儿” Vol. 1-20 的 ID.

  • Antigravity agent 直接帮我生成整个 podcast table

Phase 3 - 首页设计

设计理念: 拒绝整段的列表, 打造动态简约的preview.

技术实现:

  • 模板覆盖 (Template Override): 创建 layouts/index.html 覆盖主题默认行为.

  • 动态预览 (Dynamic Preview):

    • 逻辑: 自动抓取 letters.md 和 podcasts.md 的最新 2 条内容.

    • 实现: 在首页渲染预览组件, 而非全量列表.

  • 视觉打磨:

    • Headline 颜色调整为浅灰 (Light Grey), 增加换行呼吸感.

    • “More...” 链接移至标题行并缩小字号, 优化视觉层次.

SVG 图标生成

场景: 页脚社交媒体图标 (Social Icons).

AI 高光:

  • 需求: 将文字链接转为图标.

  • 执行: Antigravity 自动搜索图标资源 -> 绘制 SVG 路径 -> 处理图片下载与上传 (我完全没有指导这个方式)

  • 结果: 零手动素材处理, 直接生成可用代码.

4. 部署与填坑

Troubleshooting: Cloudflare 构建失败.

Gemini 帮忙错误分析:

  • 问题: npx wrangler deploy eror.

  • 原因: 在Cloudflare上, 我错误地将 Hugo 静态站 选错成了Worker (Serverless function).

解决方案:

  • Build Command: 保持 hugo.

  • Deploy Command: 重新配置 (关键步骤).

NOTE: 我个人完全没有相关经验, 所以完全靠Gemini的提示解决; 如果没有提示, 我可能要搜索很久.

5. 成果

项目成果

  • 上线: tuwang.ai 成功运行.

  • 性能: 极速加载, 在国内访问也没有问题

  • 体验: 实现了高度定制化的 UI (极简播放器, 动态首页).

个人感想:

  • 开发者角色转变: 从 Coder 转向 Architect + Reviewer.

  • Antigravity 的 Planning 和 Context 理解能力极大地降低了全栈开发的门槛.

资源