← 所有笔记

我是怎么用 Vibe Coding 搭出这个网站的

· Vibe Coding
EXP-001 本文是实验「不务正业实验室（就是这个网站）」的制作过程 →

实验室的第一个实验，是实验室本身。

「不务正业实验室」这个名字是自嘲：正经工作之外，总忍不住想做点没人要求、但我觉得好玩的东西。以后这里会放技术笔记、Vibe Coding 记录、开源小项目，还有摸鱼、打游戏之类的不正经产物。域名 notworklab.com——not work lab，字面意思。

先看效果，再写代码

这个站基本是 Vibe Coding 出来的：我负责描述想要什么、挑毛病，AI 助手负责写大部分代码。

整个过程里我说得最多的一句话是「先看效果」。改布局之前，先让它做三四个方案的 mockup，用无头浏览器截好桌面和手机两种尺寸的图，我挑一个，再说「把这个挪到左下角」「标语放到外面」，确认了才动真代码。这样做最大的好处是：吵架都发生在截图阶段，代码阶段很和平。

技术栈：能少就少

  • Astro，静态输出。内容用 MDX 内容集合，分 projects（实验）和 posts（笔记）两类
  • 没有前端框架运行时，交互都是几段原生脚本，首页加载总共大概 40KB
  • Cloudflare Pages 托管，git push 到 GitHub 的 master，一分钟左右自动上线

实验的数据结构长这样，编号必须是 EXP-xxx，状态只有三种：

const projects = defineCollection({
  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/projects' }),
  schema: z.object({
    id: z.string().regex(/^EXP-\d{3}$/), // 实验编号，如 EXP-001
    title: z.string(),
    status: z.enum(['进行中', '已完成', '已翻车']),
    // ...
  }),
});

「已翻车」是正式状态，翻车的实验也会老实记录。

域名和部署

域名在阿里云买的，然后把 nameserver 改到 Cloudflare（免费版）。根域名和 www 都绑到 Pages 上，www 用一条重定向规则 301 到根域名。

部署方式中途换过一次：最开始是把整个 dist/ 打包进一个 Cloudflare Worker 发布的，能用，但每次都要自己打包；后来换成 Pages 直接连 GitHub，从此上线就是一句 git push。

顺手配了这些：

  • sitemap 和 RSS（/rss.xml）
  • Cloudflare Web Analytics，不用 cookie
  • 分享预览图：先写一个 1200×630 的 HTML 模板，再用无头 Chrome 截成 PNG
"$CHROME" --headless=new --window-size=1200,630 \
  --screenshot="$PWD/public/og-default.png" \
  "file://$PWD/scripts/og/og-default.html"

Logo：一个被划掉的 W

Logo 是一个绿色方块，里面一个白色的 W（work），被一笔红色的毛笔线划掉——不务正业，懂的都懂。旁边上下两行：上面是「不务正业实验室」，下面是 notworklab.com，其中 not 是红的，work 是绿的。

首页：一个终端窗口

首页整体是一个终端窗口：

  • 标题栏左边是 mac 的红黄绿三个点，标题是随机标语，每次打开从三句里抽一句：「实验进行中，偶尔会翻车」「其实，我是一个程序员。」「一间只做有趣东西的代码实验室。」
  • 窗口里是一个迷你终端，提示符是 jerome@notworklab:~$，可以输入 help、ls、dota 试试
  • 下面是随机小游戏，每次打开换一个（目前有抓 bug、补刀、摸鱼、躲需求），右下角趴着一只像素烧瓶吉祥物，点它会说话
  • 底栏左边是「管理员正在…」状态灯，右边是今日不务正业指数

状态灯按北京时间段从台词池里抽一句，工作日、周末、节日各有一套，总共九十来句。鼠标放上去会看到真相：「骗你的，我瞎猜哒，哈哈哈」。

翻车现场

既然口号是「偶尔会翻车」，那就老实交代：

  1. 状态灯不换词。 一开始为了「同一时间段内保持稳定」，把抽到的那句存了起来，结果刷新十次都是同一句，看起来像坏了。后来改成每次打开都重新抽，只保证不和上一次重复。
  2. 标语在手机上折行。 原来还有一句「打工是不可能打工的，这辈子不可能打工的。」，在手机上折成两行，标题栏忽高忽低。最后的解决方案很朴素：删掉它，规定每句最多 15 个字。
  3. 烧瓶太占地方。 吉祥物原本单独占游戏右边一列，在手机上把游戏区挤得很窄。现在它浮在游戏框右下角，不占宽度。
  4. 笔记页没对齐。 笔记页的内容是居中的窄栏，和实验、摸鱼页不在一条线上，被一眼看出来了。改成和页头 Logo 左对齐。
  5. 国内访问有点慢。 没有备案，Cloudflare 免费版在国内走的是海外节点，不开代理会慢一点。页面本身已经很小了，这个暂时只能先记在这里。

接下来

  • 写内容。毕竟目前全站只有这一篇
  • 更多小游戏
  • 把吹过的开源小项目真的做出来

如果你看到这里，恭喜你发现了实验室的第一个实验——也是唯一一个。管理员正在努力，大概。

AstroCloudflare PagesVibe Coding制作过程

评论

评论加载中…