小白建站实录：我让 DeepSeek 给我写了个个人主页，效果居然还不错？

最近折腾了个新“玩具”——我的第一个个人网站。

说实话，作为一个非专业的前端开发者，面对如今琳琅满目的技术栈，以前真有点不敢下手。但这次我学乖了，既然不会写，那就让 AI 来写。于是，我拉着 DeepSeek，从零开始搞定了这个站点：hsinpersonalweb.pages.dev。

今天不想搞太复杂的技术文档，想以普通博主的视角，聊聊这次“外包给 AI”的建站体验，以及对未来的一些小规划。

最终网站首页效果（hsinpersonalweb.pages.dev），大部分代码由 DeepSeek 生成。

为什么选 Astro 和 Tailwind ？

在这个项目中，我主要定下了两个基调：极简 和 圆润。

• Astro 7： 其实最早选它单纯是因为听说它“快”。Astro 这种默认不发送 JavaScript 到客户端的架构，对于做一个单纯展示的个人主页来说简直是性能杀手锏。而且它是岛架构，如果以后我想加一点点交互，也不用把整个项目重写成 SPA，非常适合我这种想一步一个脚印的人。
• Tailwind CSS 4： 我承认，我是个视觉动物。Tailwind 4 带来的新语法和编译速度提升非常明显，最重要的是，它能让我极其方便地调整圆角和间距。为了追求那种看起来很舒服的“柔和感”，我几乎把每一张卡片、每一个按钮都加上了 rounded 属性。

DeepSeek 是我的“高级外包”

这次建站，90% 的代码其实都是 DeepSeek 生成的。

这让我意识到，现在的开发模式真的变了。以前我要去查 Astro 的文档，去学怎么配置 astro.config.mjs，去记 Tailwind 的类名。现在我更像是一个“产品经理”，我负责描述需求：“我要一个深色模式的导航栏”，“我要这种磨砂玻璃效果的卡片”，“我希望点击头像有个简单的过渡动画”。

DeepSeek 给我的代码直接复制进去，大部分时候跑起来就能用。遇到报错（比如 Vite 版本不兼容），我就把错误日志丢回去，它立刻就能给出修复方案。这种体验对于想试水新技术的人来说，门槛真的低了很多。

网站现状与后续的“填坑”计划

后续计划中的像素风看板娘概念图。

目前的网站已经上线，虽然内容不多，但骨架已经搭好了。但这只是个开始，我在我的 TODO List 里写下了一堆听起来很有趣（但可能很难实现）的功能，也就是所谓的“后续计划”：

计划添加的 H5 跑酷小游戏参考图。

1. 手搓像素风看板娘： 不想用网上现成的二次元 Live2D，想自己画个像素小人，放在角落里卖萌。这需要用到 Canvas 或者 SVG 动画，对我来说是个新的挑战。
2. 谷歌小恐龙同款游戏： 很久以前就想过在网站里塞个 H5 小游戏让访客摸鱼。既然是跑酷类的游戏，逻辑倒是不复杂，交给 DeepSeek 写核心逻辑，我负责画图，应该没问题。

这两点是目前最想实现的，尤其是互动性。现在的静态主页总感觉少了点人气。

进阶版脑洞：

• 看板娘 Agent： 如果看板娘不仅能动，还能跟我聊天呢？我想接一个大模型的 API，让这个小像素人变成真正的“导游”，根据访问者的提问介绍我的网站。这需要前后端结合，可能还得考虑 API 调用的成本，是个长期的坑。
• 我的资源小站： 既然有了域名，不如顺便做一个小型的资源导航页，把常用的工具、常用的书签都放上去，这就涉及到数据结构和简单的 CMS 管理了。
• 音效狂魔： 还有个比较抽象的想法，给整个网站加上音效。比如点击按钮会有“咔哒”声，鼠标经过会有轻微的风铃声，甚至背景音乐点击会播放和弦。这个功能比较考验用户体验的把控，做不好就是噪音污染，得慎重。

写在最后

这次建站最大的感触是：不要被“技术栈”吓倒。

以前总觉得要先把文档读通透才能动手，现在有了 DeepSeek 这样的工具，哪怕你是第一次听说 Astro 或 Tailwind，只要你有想法，就能把东西做出来。

如果你也对个人建站感兴趣，或者也想试试让 AI 帮你写代码，不妨从最简单的静态页开始。不用追求完美，先让网页跑起来，就像我一样，先把“壳”搭好，剩下的创意咱们慢慢填。

欢迎大家来我的新家参观（hsinpersonalweb.pages.dev），如果有任何改进建议，或者觉得哪里的代码写得太烂，欢迎随时留言吐槽！