我为什么从零构建 Rain Lab

我是一名大一学生。大概四个月前，我连 npm init 是什么都不知道。

现在，你正在读的这篇文章跑在我自己的域名 rain-lab.com 上。从一行空白文件到被全世界访问的网站，这条路比想象中曲折，也比想象中有趣。

起因

最初只是想做个个人网站。网上看了很多别人的博客，有 Notion 发布的、有 GitHub Pages 套 Jekyll 的、有 WordPress 搭的。看起来都很方便。

但很快发现，我想要的东西和”快速上线”有一点分歧。我不是只想放几篇文章——我想有一个可以长期扩展的空间。以后加项目展示、学习路线、小实验、甚至交互组件，都能自己动手加进去。

所以我想要的是：一个个人数字实验室。Rain Lab 这个名字就是这么来的。

为什么不直接用 WordPress / 主题模板

WordPress 确实方便。Argon、Sakurairo、Firefly 这些主题也很好看。我认真试了一圈。

但有两个问题让我最终放弃了。第一，我发现自己开始沉迷选主题了——这个颜色好看、那个布局不错，但改了几天也没写出任何属于自己的东西。本末倒置了。

第二，模板很快，但长期可能限制我对页面结构的控制。如果我将来想加一个实验性的算法可视化组件，或者想做一个自定义的学习进度面板，模板框架不一定能轻松支持。

我希望这个网站像自己的”我的世界”——以后想加什么都能自己造。

为什么选择 Astro + Tailwind + MDX

一开始想用 Next.js，因为听说是”工业级”的。但看了一圈文档发现太重了——我的网站 90% 的内容是静态文字，不需要服务端渲染每一页。

后来发现了 Astro。它默认输出纯 HTML，只在需要交互的地方加载 JavaScript——比如导航菜单和背景选择器用了 React 组件，其他所有页面都是零 JS 的。而且 Astro 的内容集合系统和路由非常直观：创建一个 .astro 文件就是一条路由，写一个 .mdx 文件就是一篇内容。

Tailwind CSS 是被推荐试的。刚开始看到 HTML 里堆一堆 class 觉得很不习惯，但写了两天就理解了——不用在 CSS 文件之间来回跳，改一个颜色直接改一个 class 的值，反馈立刻可见。

MDX 很适合我这个场景：文章和项目内容写在 Markdown 里，前端 metadata 放在 YAML 里，Astro 自动把它们变成类型安全的内容集合。发布一篇文章只需要写 MDX，不用动任何组件代码。

Cloudflare Pages 是免费的，从 GitHub 自动部署。对我一个学生来说，不需要考虑服务器费用和维护——push 代码，自动上线。

搭建过程中的真实问题

Node 环境踩坑。 第一次装依赖就报错了。Windows 上的 PowerShell 执行策略默认 Restricted，不允许运行脚本。查了半天才知道要 Set-ExecutionPolicy RemoteSigned。然后是 npm cache 权限问题，折腾了一个多小时。当时很崩溃——第一行代码还没写，就被环境问题卡住了。

Claude Code 接入。 一个人写一个完整网站真的很难。从环境配置、代码结构、样式调整到部署，工作量远超预期。后来把项目接入 Claude Code，用 AI 辅助开发——用自然语言描述需求，AI 生成代码框架，我再审查和调整。这极大降低了实现难度，让我能专注于设计决策和内容创作。

第一版像 AI 生成的模板。 这是最让我难受的一个阶段。Claude Code 帮忙搭建的初始结构虽然功能完整，但看起来太”标准”了——就是那种你一眼就知道是 AI 写的页面：Hero 区 + 卡片网格 + 脚注，没有性格。

深色科技风实验。 我想”加点科技感”，做了黑背景 + 紫蓝渐变 + 玻璃拟态 + 发光按钮。放到手机上看——眼睛疼。深色背景不是不好，而是我在上面用了太多高饱和度渐变，加上文字对比度不够，整体又暗又刺眼。

Claude 风格的方向转变。 有一天看到 Claude 的 Web 界面：暖白背景、安静、细边框、Georgia 衬线字体、只有少量强调色。那种克制的设计感比我的”科技风”强太多了。于是全部推翻重来，定下了现在的方向——暖色极简，Claude-inspired。做完后自己都觉得舒服了很多。

移动端适配。 桌面端看着很舒服的页面，在手机上可能间距过大、卡片溢出、导航太挤。尤其是学习路线和学习页面那种带时间线的区块，在小屏上要完全重新考虑布局。花了差不多一整天处理各种 md: 和 sm: 断点。

部署和域名。 这是第一次把一个项目推到生产环境。GitHub 创建仓库、配置 Cloudflare Pages、绑定域名——每一步都是新的。rain-lab.com 这个域名是在部署确认可用之后买的。看到自己的网站跑在自己的域名上的那一刻，非常有成就感。

我学到了什么

前端不只是写页面。 做这个项目之前，我以为前端就是写 HTML + CSS。实际上还包括：项目工程结构的设计、文件路由的规划、内容管理系统、Git 版本管理、部署 CI/CD 配置、域名和 DNS、SEO 元标签、移动端适配。没有一个单独的”前端课”会同时覆盖这些。

AI 可以辅助，但不能替代审美和判断。 AI 可以生成代码、完成重复任务、debug。但设计方向的判断——什么是好看的、什么阅读体验是好的、什么内容是值得写的——这些都需要自己来。AI 写的初版和最终版本之间的差距，就是”人的审美和取舍”。

长期项目需要迭代。 网站不是一次做完的。从 V0.1 单页模板到现在的 12 个页面 + 主题系统 + 移动端适配，中间经历了十几个版本。每个版本只改进一小部分，累积起来就是很大的进步。

Rain Lab 未来会是什么

Rain Lab 不是一个”已经完成”的网站，而是一个会持续生长的实验空间。

已经有的：

• 3 个项目的案例展示
• 3 篇起点文章
• 学习路线时间线
• 实验室占位页面
• 外观设置面板（主题、背景、玻璃强度）

计划加入的：

• 更多真实项目记录
• 学习笔记系统（从 Obsidian 发布到网站）
• 算法可视化小工具
• AI 学习助手组件
• 如果有 Bilibili 频道，可以嵌入视频或提供入口
• 持续记录从大一走向更成熟阶段的学习轨迹

这是一个属于我自己的数字空间。不急、不炫、不装成熟。只是慢慢地搭，慢慢地写，让它跟着我一起成长。