一、起因
我用 NewBee 的导航页挺久的了，启动很快，功能也很全。只是近期因为没有手动再添加导航，一直从书签打开（虽然添加并不麻烦），并且 NewBee 也并未达到我理想的简洁，所以很早就产生了自建一个网站导航的起始页的想法，期中忙完才开始实施。
二、寻找灵感
最开始的想法是像下面这样的布局样式：
然后开始在 GitHub 以及 HelloGitHub 上寻找类似的开源项目。中间的确找到了类似的，比如 OneNav 这种，但是似乎部署真的不太方便，我也不会 Docker。
然后继续才找到 PinTree 这个开源项目（虽然宣传图好像和我实际拿到的代码的样式有些不太一样，但是效果还是挺不错的）。
三、探索方案
3.1 方案一：AI 生成页面
非常可惜的是当时 CF 崩掉了，我无法注册并获取 Neon 的 PostgreSQL 服务，于是开始想用 AI coding 一个界面试试。然后忘了 Cursor Pro 也早寄了，用 Auto 生成了一个，其实效果还可以的：
但是不太相信 Auto 的能力，有些也改不到位。等 CF 好了回宿舍继续搞，发现 Claude 4.5 Haiku 生成的页面更是一坨，又在原来的初版上改，还是不够理想，只能等第二天再搞了。
3.2 方案二：PinTree + Vercel 部署
等到第二天的三四节没课，刚好跑到图书馆开始搞那个因为 CF 崩而无法获取数据库的方案，比我想象的部署简单，非常快。这也是我第一次用 Vercel 部署一个带后端的项目，Vercel 真牛逼吧，给的域名也挺好的。
优化过程
然后效果大致如图，在源代码的基础上删除了很多内容，也不知道为啥塞进去的，前端没咋找到，就是一些宣传和扩展功能的代码，都给删了，让 AI 调调删删也花了一会（忘了中间的 favicon 了，我把导出默认的 icon 获取方式改了成功率更高的网站了，虽然还是存在失败）。
最后也是成功了，唯一不足的是进入的加载速度有点慢了，3~4 秒大概，也用了一个新的插件把它作为我的新标签页，才发现设置中一般是无法设置的。
下一步就是把我原来导航的网址都再添加到我现在的导航页了，有点麻烦。
四、最终成果
效果展示
成果展示：
图床建立
这里为了使所有的导航都具有对应的 icon，我基于 PicGo 建立了一个轻量化的图床服务，本地上传图片就可获得 URL 进行引用。
参考了教程：
完整教程：2025最新在GitHub上搭建个人图床，保姆级图文教程，实现图片高效管理 - ljbguanli - 博客园
很简单也很好用，现在所有的导航都具备了各自的 ICON 了。
性能说明
现在感觉有些依赖缓存，首次进入对图标需要加载较久，自用基本不影响。
五、网站链接
网站链接： Nav-huizhi