Rain Lab 个人网站
从零搭建的个人数字实验室，持续学习和迭代的在线空间。
Rain Lab 是我从零开始构建的个人网站。它不只是一个博客——我想把它做成一个可以长期扩展的”个人数字实验室”。
项目背景
大一开始学编程后，一直想有一个属于自己的地方。不是 Notion 那种笔记工具，也不是 WordPress 那种模板博客——我想要一个真正属于自己、可以随意改造的空间。
具体的目标是：
- 首页可以展示我的能力和正在做的项目
- 学习路线可以随时更新，记录成长进度
- 每个项目都有独立的案例页，记录完整的思考过程
- 文章不只是文字，还能嵌入代码、图表和交互组件
- 像自己的”我的世界”——以后想加什么都能自己造
这就是 Rain Lab 的起点。
技术选型
每项技术的选择都经过了一些对比和纠结：
Astro 6。一开始想过用 Next.js，但发现太重了——我的网站 90% 是静态内容，不需要服务端渲染。Astro 默认输出纯 HTML，只在需要交互的地方加载 JavaScript，非常适合内容型个人网站。而且它的内容集合系统和文件路由非常直观。
Tailwind CSS v4。没有选择传统的 CSS 方案或 CSS-in-JS 库，因为想快速迭代视觉。v4 的 @theme 块可以直接定义设计 token，一个 CSS 变量控制全站的颜色、阴影、圆角，改一个值就能看到全局效果。
MDX。文章和项目内容写在 Markdown 里，同时可以嵌入组件。Frontmatter 做元数据管理，Astro Content Collections 把它们变成类型安全的数据源——发一篇文章不需要动任何组件代码。
React 19。只用在两个需要交互的地方：导航菜单的移动端汉堡按钮、右下角的外观设置面板。其他地方全是纯 HTML，页面加载几乎不跑 JavaScript。
Cloudflare Pages + GitHub。免费的自动部署，push 代码就能上线。不需要买服务器，不需要配 CI/CD 脚本。对一个学生来说，这个组合几乎没有维护成本。
搭建过程
整个过程并不是一次完成的。从环境配置、页面雏形、视觉推翻到正式上线，几乎每一步都踩过坑——但也正是在一轮轮快速迭代中，网站逐渐成型。
环境准备。 Windows 上装 Node.js 还算顺利，但第一次在 PowerShell 里运行 npm 命令就报错了——执行策略默认是 Restricted，不允许运行脚本。查了文档才知道要 Set-ExecutionPolicy RemoteSigned。然后是 npm cache 权限问题，改目录所有者来回折腾了一个多小时。
项目初始化。 npm create astro@latest 创建项目，然后接入 Tailwind、React、MDX。这些操作本身很快，但理解每个配置在做什么花了不少时间。
Claude Code 接入。 一个人写一个完整网站的工作量远超预期。后来把项目接入 Claude Code，用自然语言描述需求——“做一个玻璃拟态导航栏”、“加一个背景切换面板”——AI 生成代码框架，我再审阅修改。这极大降低了实现难度，让我能把精力放在设计决策上。
第一版的 AI 感。 这是最让我难受的阶段。Claude Code 帮忙搭的初始结构功能是完整的，但看起来太”模板”了——就是那种你一眼能认出来的通用页面，没有性格。我知道它能跑，但不想把它当成自己的网站。
深色科技风失败。 想加点”科技感”，做了黑背景 + 紫蓝渐变 + 玻璃拟态 + 发光按钮。自己看了几分钟——眼睛酸。深色背景本身不是问题，问题是高饱和渐变加上文字对比度不够，整体又暗又刺。
转向 Claude 风格。 偶然看到 Claude 的 Web 界面——暖白、安静、细边框、Georgia 衬线、少量强调色。那种克制的高级感让我明白了”设计不是为了炫，是为了读”。于是全部推翻重来：米黄底色 #f7f3ea、Georgia 衬线标题、陶土橙 #c96442 做唯一强调色。
外观设置系统。 加入背景切换（Warm Paper / Soft Grid / Warm Aurora / Dark Aurora）、三套主题（Warm / Light Tech / Dark Glass）、三档玻璃强度——总共 36 种组合。这里踩了个坑：Glass Strength 一开始用 --glass-opacity 控制透明度，但 Strong 模式让卡片背景太透，文字跟着变淡。后来把变量改名为 --glass-bg-alpha，确保文字颜色完全独立于玻璃透明度。
Content Collections 踩坑。 V0.4 时定义 MDX 内容集合，build 报错 LegacyContentConfigError。查了一下午才发现 Astro 6 改了 API：配置文件必须叫 src/content.config.ts 而不是 src/content/config.ts，而且每个 collection 需要显式声明 glob() loader。这个变化在当时的文档里不够醒目，花了不少时间 debug。
移动端适配。 桌面端看着舒服的布局，到手机上可能间距过大、卡片错位、分割线太重。尤其是学习路线的时间线在窄屏上要完全重新考虑——从 4 列变单列，从横向连接线变纵向时间线。前后调了三个版本（V0.7 → V0.7.1 → V0.7.2）才把纵向节奏统一好。
SEO 和部署准备。 加了 canonical、Open Graph、Twitter Card 标签，写了 robots.txt，做了 OG 分享图，建了 404 页面。这些不是为了”做完”，而是为了让网站像一个真正的线上产品。
域名。 部署确认可用后，买了 rain-lab.com。把域名绑到 Cloudflare Pages，在 astro.config.mjs 里设 site: 'https://rain-lab.com'，push 上去——第一次看到自己的网站跑在自己的域名上，那种满足感没法形容。
设计迭代
项目按版本号记录了每次重要变化：
| 版本 | 做了什么 |
|---|---|
| V0.1 | Astro 初始化，第一个主页 |
| V0.3 | 放弃深色科技风，转向暖色极简 Claude 风格 |
| V0.4 | Content Collections + 多页面（项目/文章/学习/实验室） |
| V0.5 | 详情页质感：prose-custom 排版系统、Case Study 风格 |
| V0.6 | 外观设置：3 主题 × 4 背景 × 3 玻璃强度 |
| V0.7 | 移动端适配、纵向节奏统一 |
| V0.8 | SEO、404、OG 图、project 清理 |
| V0.9 | Cloudflare Pages 部署 + 正式域名 rain-lab.com |
| V1.0 | Rain Lab 品牌统一 |
| V1.1 | 真实内容替换——从示例内容到个人视角 |
| V1.2 | 第一篇正式长文章《我为什么从零构建 Rain Lab》 |
| V1.3 | 核心项目案例页（就是你现在读的这篇） |
| V1.3.1 | 修正 Case Study 中不够真实的时间表述 |
| V1.3.2 | 修复项目详情页长文排版和表格阅读体验 |
| V1.4 | 完成全站发布质量审计 |
| V1.4.1 | 同步版本记录 |
我遇到的问题
写这部分是因为很多项目复盘只写成功不写失败，看起来不真实。以下是实际卡过我的问题：
- 环境配置不顺。 第一行代码还没写，PowerShell 执行策略和 npm 权限就卡了一下午。技术教程通常跳过这些，但对新手来说环境问题是最容易让人放弃的一步。
- 第一版没有性格。 AI 生成的代码功能完整但缺乏辨识度。功能齐全不等于好看。
- 审美需要反复推翻。 深色科技风我觉得很酷，但实际阅读体验很差。后来明白好看不是”第一眼震撼”，而是”长久看舒适”。
- 外观系统透明度坑。
--glass-opacity命名有问题——它控制的是卡片背景透明度，但变量名暗示它也影响内容。Strong 模式下卡片太透，文字跟着模糊。改名为--glass-bg-alpha并把文字颜色独立出来才解决。 - 移动端节奏。 间距和分割线在桌面端很自然，在手机上却显得突兀。来回改了三个子版本才找到合适的 56px section spacing 和 6% opacity 分割线。
- DNS 和域名绑定。 这些概念第一次接触时很抽象——DNS 记录、A 记录、CNAME、Cloudflare 的代理模式。不是技术难，是不熟悉流程。
- AI 是工具，不是决策者。 Claude Code 可以写代码、调试、生成内容框架，但审美——什么颜色好看、什么布局舒适、什么内容值得写——这些只能自己判断。AI 写的初版和最终版本之间的差距，就是人的审美和取舍。
当前成果
Rain Lab 目前的状态：
- 正式域名：rain-lab.com，HTTPS 自动开启
- 12 个页面：首页、3 个项目详情、3 篇文章详情、项目列表、文章列表、学习路线、实验室、404
- 内容：3 个真实项目案例、3 篇个人文章、7 阶段学习路线、5 个实验室项目
- 外观系统：3 套主题 × 4 种背景 × 3 档玻璃强度
- SEO：canonical URL、OG/Twitter 标签、OG 分享图、robots.txt
- 部署：GitHub push → Cloudflare Pages 自动构建，无需手动操作
后续计划
Rain Lab 会继续生长：
- 完善算法可视化工具，作为数据结构课的配套学习资源
- 把 Obsidian 中的 CS 学习笔记整理发布为网站文章
- 如果做 Bilibili 教学视频，在网站上提供入口和配套资源
- 逐步把这个空间从”个人网站”变成”长期成长档案”
不急。慢慢搭，慢慢写。这是属于我自己的数字实验室。