我把个人网站做成了一座能钓鱼的岛，代码开源了

打开我的个人网站，你会先看到一片海。

海中间有一座岛，红白相间的灯塔立在岸边，岛刊社顶着红屋顶，码头上有人拿着鱼竿。拖一下，可以转着看；点一栋建筑，镜头会靠过去。

这是 xiaodao.ai，也是我给「小岛 AI」做的家。现在，这座岛的网站代码开源了。想搭个人网站、想玩网页 3D，或者想找一个能继续改的 AI 编程项目，都可以拿去看看。

先把地址放前面，免得有人逛到一半忘了回来。

试玩：https://xiaodao.ai/

开源：https://github.com/xiaowuzicode/xiaodao-island

这座岛，真的可以用来看文章

岛上的建筑各有去处。灯塔通向新文章，岛刊社连着文章归档，船坞通向视频，渔港夜市里是专题，岛主小屋放着关于我的介绍。

这些名字和位置，让内容有了一个能记住的地方。你可以沿着岛逛，也可以直接点顶部的「文章」「日报」「视频」，去找自己要看的内容。

如果只是想查一篇文章，直接走导航就好。逛岛是一种额外的乐趣，不该成为看内容必须完成的任务。设备暂时打不开 3D 时，页面也留了文章、日报和地点链接。

这也是我挺在意的一点：个人网站可以有点自己的脾气，同时把最基本的事做好。看完这座岛，你还能找到文章，打开文章，接着读。

它目前承载着我持续更新的 AI 实战、行业观察、日报和视频内容。首页的场景可以慢慢添东西，里面的内容也能继续长，房子不必每写一篇文章就重新盖一次。

海里有鱼，码头还能钓到旧文章

岛上有清晨、正午、黄昏和夜晚几种光照，可以跟随本地时间，也可以手动切换。右上角还能打开海浪声。

同一个镜头，换到黄昏，屋顶、树和海面会变成另一种颜色。灯塔放在岸边，到了这个时候，就特别像一个该待在这里的东西。

海水也有可以凑近看的细节。浅海里的颜色、折射、沙纹、水草和游动的鱼，由代码绘制。仓库里能找到对应的实现，想研究这片海，可以从 src/island/ocean-glsl.ts 看起。

这个文件名里的 GLSL，可以理解成一门告诉显卡「每一小块画面该怎么画」的语言。我们看到的水色、水纹和水下细节，就有这些绘制规则在参与。

不用一上来把它全部读懂。可以先打开网站，看看自己喜欢哪种效果，再带着问题去找那一段代码。眼前有一片海，再看这些公式，至少知道自己在找什么。

码头上的「钓鱼」也能点。接过周伯的鱼竿，往海面甩竿，等鱼影靠过来，咬钩时收竿。钓上来的鱼，还会叼着一篇旧文章。

翻旧文这件事，在这里多了一种打开方式。 不知道读哪篇，就去码头碰碰运气。正经内容入口旁边，留一点闲逛的空间，我觉得挺好。

钓鱼还有贝壳、渔具升级和图鉴，进度保存在浏览器里。换设备或清理浏览器数据时，别把它当成云端账号存档。

站里另外放了一个拍蚊子小游戏，三十秒一局，连着拍中有连击加分。它的实现是一个独立 HTML 文件，也在仓库里。想从小一点的东西开始读代码，可以先看它，再回来看整座岛。

拆开之后，你可以只拿走需要的那一块

这个项目主要由 Astro 和 Three.js 组成。Astro 负责把文章、日报、视频等内容组织成网页；Three.js 负责浏览器里的 3D 场景、镜头和动画。

很多代码，是我和 Claude、Codex 一起写的。仓库里有已经落到文件里的实现，你可以运行、修改，再回浏览器看变化。

对想练习 AI 编程的朋友，这样的项目有个方便之处：改动能直接看见。换一个屋顶颜色、调整一个建筑位置、改变一处海水效果，都有具体的对象，不用只凭聊天框里那句「已经优化完成」来判断。

不过，画面更好看和网站更好用，要分别看。房子挪了位置，建筑标签是否挡住入口？镜头靠近了，手机上还能不能点到按钮？给 AI 一张截图和一个具体问题，会比只说「再精致一点」更容易继续改。

拿到代码之后，可以按自己的兴趣一点点拆。每次改一个具体对象，也给自己留一次回浏览器看效果的机会。

开源仓库放的是网站代码，文章和日报换成了几篇示例。线上完整内容在另一个私有仓库里，网站代码有更新时会同步过来。下载之后看到示例内容，属于正常情况。

代码采用 MIT 许可，可以按许可要求修改、复用。我自己的头像、图标、视频封面和小岛宣传片等媒体素材，不在这份 MIT 授权范围内，搭自己的站时请换成自己的素材。

这个区别写清楚，你拿去做自己的东西，也更踏实。

给自己搭一座岛，从跑起来开始

仓库的启动方式很短。准备 Node.js 20 或以上版本，以及 Bun；把仓库克隆下来后，在终端依次运行：

git clone https://github.com/xiaowuzicode/xiaodao-island.git
cd xiaodao-island
bun install
bun run dev

然后在浏览器打开 http://localhost:4321，就能看本地版本。按仓库说明，启动这套网站不需要填写模型 API Key 或其他环境变量。

准备生成静态站文件时，再运行 bun run build，产物会放到 dist/。这里给的是仓库的启动说明；这次文章展示的截图，来自线上网站。

第一次改，我建议从自己的内容开始。文章放进 src/content/posts/，开头填好标题、摘要和发布日期；日报放在 src/data/daily/；视频列表在 src/data/videos.json。

把示例文章换成你写过的一篇，把关于页改成自己的介绍，再换掉头像和封面。一座岛里开始出现自己的东西，才会慢慢知道，下一步想往哪里改。

对 3D 感兴趣，再去看 src/island/。地形、海水、鱼群、灯塔、昼夜和镜头都在这里。钓鱼从 fishing.ts 看起，拍蚊子在 public/play/mosquito/index.html，可以挑一个自己最想玩的部分拆。

你也不必给自己加上「必须造一整座岛」的任务。只想搭博客，就先把内容页用起来；喜欢海水，就研究海水；想做小游戏，就从那个单文件的小项目开始。

最后，替我的小岛求个 Star

今天这篇，算是认真带大家认一下门。

欢迎来 xiaodao.ai 逛逛，看看海、翻翻文章，或者去码头钓一篇不知道会遇见什么的旧文。对实现有兴趣，代码就在 GitHub 上，README 也放了相关的 B 站拆解视频。

如果这座岛让你觉得有意思，或者里面的代码刚好能帮上忙，想请你去仓库右上角点一个 Star。也欢迎把它转给那个一直想搭个人网站、还没找到开头的朋友。

https://github.com/xiaowuzicode/xiaodao-island

代码拿走，搭一座你自己的。要是做出来了，也欢迎回来让我看看，你把灯塔放在了哪里。

—— 小岛 AI，记录一线实战、踩坑与成长