从零搭建个人网站的一天

今天用一天时间搭建了个人网站，从选型到上线，完整走了一遍流程。技术实现挺顺利，但也踩了不少坑，特别是在配色上折腾了很久。记录一下整个过程。

项目概况

• 技术栈：Astro 5 + Content Collections + Cloudflare Pages
• 页面结构：首页（诗歌+头像+进入按钮）+ 内容页（日常记录+读书笔记双栏）
• 最终风格：水墨画风格，黑白灰极简配色
• 总耗时：约8小时（含走弯路）

技术选型

选择Astro是因为：

1. 内容驱动，用Markdown管理文章
2. 构建快，天然对静态部署友好
3. Content Collections类型安全

部署选Cloudflare Pages，免费、快速、GitHub自动部署。

页面架构

首页：极简Landing页，诗歌+头像+进入按钮 内容页：左栏”日有所思”（日常记录），右栏”读有所感”（读书笔记）

导航栏只放了一句话：“Toward the other shore”，加上头像和名字。

踩过的坑

1. 配色迭代了4次（最费时间）

从下午2点到4点半，2.5小时都在试配色：

• 第1次：科技绿 → “太科技感”
• 第2次：暖橙色 → “还是不喜欢”
• 第3次：粉紫绿 → “还是不喜欢”
• 第4次：水墨风 → 终于OK

问题根源：前三次只说”不喜欢”，没给参考，没说想要什么。AI只能猜，浪费时间。

教训：设计类需求要给视觉参考（截图/网站）+ 关键词（极简/温暖/复古），别让AI瞎猜。迭代超过2次就该停下找参考。

2. 目录结构搞错了

Astro项目静态资源应该放public/，我却先放在了assets/，部署前才发现要整理。

教训：不熟悉的框架，开始前先看文档。

3. 图片水印

上传AI生成的图片后才发现有水印，又花时间用sips裁剪。

教训：资源上传前先预处理。

4. 多个开发服务器

不知不觉开了3个astro dev，看到”2 shells”提示才发现。

教训：定期检查后台进程，别让资源白白浪费。

经验总结

时间分配

• 有效工作：~5小时（架构、开发、部署）
• 走弯路：~3小时（配色2.5h + 其他0.5h）

如果一开始做好准备，3小时可以省下来。

下次项目要做的

开始前（15分钟准备）：

• 找3-5个视觉参考
• 查框架文档和规范
• 预处理图片等资源

开发中：

• 设计类需求给参考，别说”不喜欢”就完了
• 迭代2次没对就停下沟通
• 定期清理后台进程

核心原则：

• 有审美就用审美
• 没审美就找参考
• 前置15分钟准备，省下3小时返工

最终成果

• 水墨风极简设计，黑白灰配色
• 磨砂玻璃效果的卡片
• GitHub自动部署到Cloudflare Pages
• 域名审核中

第一个作品上线了，虽然走了弯路，但收获了经验。

---

技术栈：Astro 5 + Content Collections
部署：Cloudflare Pages
源码：GitHub