Hello World

楔子

建个人网站是一个折腾的事。

从过年期间新建了一个纯 html 页面来放置个人简历；到今年四月的时候，强行将一个 next.js 项目改成 FastApi 驱动的前后端分离项目，结果修修补补三四个月，最终因为堆积成山的 bug 不得不废弃从来。

“vibe coding”写博客网站是这几个月学雅思、申博唯一的放松，雅思学久了，感觉写写代码也是一种放松。悉数用过的工具有 Trae、Cursor、augment、Claude code到CodeX,算是完整体验过这波 AI 驱动代码的大潮。在大语言模型的驱动下，写代码有了沉迷的乐趣，虽然往往要花费更多的时间进行 debug。

此时，在雅思、申博准备差不多已经可预见结果的时候，我和其他人相比，反倒是有前所未有的宁静，实在是不想再过那种紧张焦虑的生活了。

在今天，逛了大半天故宫以后、北京暖气初至的的夜晚，想好好写下这篇“Hello World”。

眼下的这个站点，在 AI 时代，想用它来记录我的文字。虽然已经做过很多次努力——从公众号、微博到小红书，都失败了。我应该是知道，记录文字不在于载体，而是在于那颗心。

但是还是想再试一次。我觉得这次，对于构建这个网站的乐趣和兴奋，已经远超了对写文字的兴奋。每每烦闷和无聊的时候，总想起要写一点。身兼产品经理、开发与测试，即考虑到你们的阅读体验，也关注到了我的使用乐趣。我觉得这个项目反倒是让我完整懂得了产品开发流程，远超我在大学时候学过的一门门课程。

项目骨架

网站用了Payload CMS的官方模板进行了大量的修改， Next.js 15 + React 19 搭出前端壳，外加一层 TailwindCSS 和自定义组件，把照片、地理与故事穿成线。

- 全栈一体：Next.js 的 App Router 负责页面和数据流，React 19 提供指令式读取和优化的并发渲染；API 侧由 Payload 的自定义 collections/globals 驱动，Posts、Pages、Media、Categories 和用户体系全部在这套后台里统一建模。

- 设计系统：TailwindCSS + Radix UI 组件铺垫了基础交互，我又叠了不少自写组件，比如带拖拽缩放、EXIF 和地理标签的 `GalleryLightbox`，以及多层次的筛选条、时间线视图。

- vibe coding：这是一个纯AI Coding 项目，采用了 CodeX，和 Claude Code 驱动的 GLM 4.6 进行构建。大骨架使用CodeX进行增添，小细节使用Claude Code进行打磨。后期如果还使用了新的工具，会再此记录。

功能性

Payload CMS原生是只支持文字记录的，但是我在项目中添加了对图片的支持，包括时间线、瀑布流展示，以及以高德 API 为核心新建了一套图片地图库，能够记录图片拍摄的足迹。因为一直希望能把拍过的照片梳理成图库展示给大家，代价就是增添了很多对象存储的成本，以及一张接近 100 MB的图片被压缩到了 15MB左右，所以你们看不到高清原图了。

可用性

前端针对移动端和桌面都做了适配，顶部/底部导航、Hero、搜索条、返回按钮等细节在 10 月中旬后得到了多轮打磨。

性能

Next.js 15 自带的 SSR、路由并发和图片优化是底层保障；对象存储 + CDN 解决大图加载，EXIF/哈希等逻辑在 11 月初做了去重与增量修复。筛选和搜索多次优化后，列表分页与懒加载让后台数据量增加也不会拖垮首屏。

初版迭代记录

- 2025-10-07：初始化项目与 Mongo，搭好富文本编辑器、Waline 评论的雏形。

- 2025-10-08：连通对象存储与生产配置，用来储存照片。

- 2025-10-09：大规模的界面与体验微调，包含字体、按钮、顶/底栏、移动端适配，以及评论区组件的重构。字体使用的是开源字体霞鹜文楷。

- 2025-10-11：文章列表与筛选功能完善，CDN、媒体分类齐备，内容浏览体验成形。

- 2025-10-12：整合“照片”与“照片流”，修复默认折叠行为，统一媒体入口。

- 2025-10-13：聚焦搜索、EXIF、定制文案与 Hero 区的易用性，同时新增返回导航，照顾小屏使用场景。

- 2025-10-14：地点库初版上线，附带 EXIF/标题的单键显示、缩略图、地图缩略图、原图可选上传等贴心功能。

- 2025-10-15：地点库进入结构化建设：树形管理、折叠、自定义范围、兴趣点、解析流程逐渐完善。

- 2025-10-16：继续打磨地理解析的边界、经纬度识别和层级逻辑，让地址数据更可靠。

- 2025-10-24：地点库扩展到关键词检索与全景地图视图，查询体验更顺手。

- 2025-10-26：在文章区域、相册区域，新增了多样化筛选与批量操作的功能。

- 2025-10-28：详情页组件支持放大缩小，媒体库弹窗优化。

- 2025-10-29：实现相册全屏浏览、全局搜索提升、详情页继续打磨。

- 2025-10-31：上线相片双视图模式，并以 EXIF 时间为主线，强化照片叙事感。

- 2025-11-01：新增分页、折叠组件、筛选面板和上传哈希唯一性，解决大规模相片管理的稳定性。

- 2025-11-02：地点信息支持自动更新，解放手动维护。

- 2025-11-03：修复全选添加到相册、刷新跳转等易用性问题。

- 2025-11-05：时间线瀑布流、层级展开、年月日视图陆续上线，并补齐 EXIF、坐标与上传逻辑的细节问题。

尾声

写这篇 Hello World，开始记录个人独立开发的一个可用、生产级的项目。站点的底子已经稳固，接下来可以慢慢把内容填满：希望说到做到。

版本更新记录

- V0.1（2025-11-05）：Hello World 初稿，记录项目骨架与至今所有迭代。