构建我自己的 Subspace Builder

上个月，女朋友说她需要一个简洁漂亮的作品集网站，我也想起自己一直想开个个人技术博客。

我想要一个轻量的方案，容易搭起来，改起来更轻松。于是我直接动手，从零搭建了一个小巧的 11ty + Tachyons 网站，每次迭代都能在一分钟内上线。虽然她远在国内另一头，我还是能看到每次更新带给她的惊喜。

仓库链接：https://github.com/NicholasClooney/11ty-subspace-builder

# 目录

1. 动机
2. 为什么选 11ty？
3. 用 Tachyons 写 CSS
4. 特别感谢 ChatGPT
5. 设计灵感
6. “神奇”的部分
7. 主要收获

# 动机

在这之前，我几乎没有建网站或写 CSS 的经验，所以探索 Eleventy 和 Tachyons 就像学习一门有趣的新手艺。我喜欢为在意的人做东西，看到他们对每个新功能的反应，特别有成就感。这个项目不只是写代码，也是在实时分享进展、学习几样新工具，并享受过程。

# 为什么选 11ty？

• 非常轻量，零配置：马上就能开始写 Markdown 和 Nunjucks，不需要 webpack，也没有复杂的安装过程。
• Nunjucks 模板：即使是新手，也很容易创建可复用的布局和局部模板。

# 用 Tachyons 写 CSS

• 实用类优先：直接在标记里设置样式（pa3、bg-near-black 等），不用在 CSS 里到处寻找对应规则。
• 容易摸索，命名一致：Tachyons 的命名约定直观，做原型很快。

# 特别感谢 ChatGPT

我开始把我们的工作方式理解为结对编程：ChatGPT 是驾驶员，直接动手写关键帧动画、切换导航类名、完善选择器；我则是领航员，观察、反馈，并确保方向正确。这样的合作很愉快，也彻底改变了我排查问题的过程。

# 设计灵感

• 研究了几个精致的网站，确定汉堡菜单的交互和视觉效果。
• 加了一个简单的淡入加滑动关键帧动画，让导航更精致，又不会增加太多负担。

# “神奇”的部分

• 本地编辑 → git push → Cloudflare Pages 部署：约 30 秒。
• 远在国内另一头的女朋友刷新网址，几乎立刻就能看到最新调整。对于这样轻量的配置，实在让人惊喜。

# 主要收获

• 开发者优先的工作流：11ty 的零配置思路让你专注内容，而不用把精力花在工具上。
• 快速设置样式：Tachyons 让 CSS 好写，也容易维护。
• 简单的 CI/CD：一条 git push 就能触发 Cloudflare Workers，在几秒内完成网站部署。