和星星布丁的 500 天

🎉 数着数着，我和星星布丁在一起整整 500 天了。 这篇想认真聊一件我做了很久的事：把我们俩所有有记录的东西——玩过的游戏、走过的城市、吃过的餐厅——全部搬进了一个网站里。

---

一、这 500 天，我们攒下了什么

我们是异地恋，我在江南、她在武汉。见一面要数着日子盼，所以每次见面的痕迹都格外值得留下来。500 天攒下的记录，大概长这样：

类别	我们记了什么
🗺️ 旅行	4 次旅行：无锡元旦跨年（融创水世界）、武汉 21 岁生日（东湖樱园 + 华农校园）、上饶五一、无锡端午两日游（摩天轮 / 蠡园 / 鼋头渚），每次都配一本我提前做的攻略书
🎮 游戏	一起开的存档、一起通的关。泰拉瑞亚第一个晚上，我们俩懵懵懂懂被僵尸撵着死了 20 多次——这种必须记下来
🍜 餐厅	打卡过的餐厅和奶茶、口味备忘。哪家好吃、哪家踩雷、她的忌口，都留档
💌 信	我写给她的信，按纪念节点存档
💬 聊天	聊天报告：消息条数、活跃时段之类的统计，量化一下我们的话痨程度
📅 大事记	从认识到 500 天的完整时间线，一条条串起来

然后我把这些全部做成了一个网站——一条 3D 走廊，两边挂着一扇扇门：旅行之门是时光照片墙，游戏之门是回忆长廊，还有大事记、告白之门、聊天之门。

走进去翻记录，像回家一样。这件事我还会一直做下去：以后每去一个地方、每通一个关、每发现一家好吃的店，都往里加。

---

二、为什么是”自己建网站”

不是相册 App，不是网盘，也不是情侣空间。理由很朴素：

1. 数据在自己手里。 相册会满、换手机会丢记录、情侣 App 说停运就停运——而静态网站就是一堆 HTML 文件，放哪儿都能跑，谁也关不掉。
2. 记录有仪式感。 照片墙按旅行分册、大事记按时间铺开，翻起来有”走进去”的感觉。这和在列表里刷相册，是完全不同的两种体验。
3. 它可以一直长大。 加一条记录只改一个数据文件，1000 天、2000 天的时候它还在，而且越长越好看。

---

三、数据存哪儿（经验分享，明文）

如果你也想给两个人的回忆建个”家”，我的存法分四层，从素材到发布：

1️⃣ 原始素材层（照片 / 视频）

• 网盘一份 + 移动硬盘一份，双备份起步（3-2-1 备份原则的简化版）
• 目录按 年份 / 事件 归档，比如 2026-端午无锡行——以后往网站里挂的时候，整个目录直接拖

2️⃣ 聊天记录层

• 微信电脑端自带的「聊天记录备份与迁移」，一两个月备一次
• 真正重要的对话单独截图，放进对应事件的文件夹——备份是给”怕丢”的，截图是给”想翻”的

3️⃣ 结构化数据层（网站的灵魂）

• 大事记、游戏清单、餐厅清单这类”事件数据”，全部写成数据文件（JSON / Markdown），一条记录一个条目
• 网站构建时读数据、渲染页面。加一条记录 = 改一个数据文件，完全不碰页面代码
• 这意味着记录可以无限增长，维护成本几乎为零

4️⃣ 发布层

• 整站是纯静态站：本地 Vite 构建，产物扔到 GitHub Pages 免费托管，自带全球 CDN
• 因为产物只是静态文件，哪天想换地方，整个目录拖去任何静态托管都能跑——不跟任何平台锁死

---

四、私密内容怎么办：真加密，不是障眼法

网站上毕竟是我们的生活，入口链接我不想公开挂出来。

常见的做法是把链接”藏”一下：CSS 盖一层、base64 编一下、塞进 JS 变量里。但这些都是假加密——按下 F12 打开源码面板，所有”藏”起来的东西原形毕露。

我的做法是真加密：

• AES-256-GCM，在网站构建时加密，最终页面 HTML 里只有密文，没有任何明文
• 密码不存在任何 JS 文件里；访问者输入后，浏览器用 PBKDF2 从密码派生密钥，在本地解密、本地渲染
• 密码不对就是解不开——F12、看源码、爬虫，统统拿不到内容

所以这篇博客的规则是：经验随便看，入口加密。 下面这块卡片就是密文本体——密码是我们俩第一次真正认识的日期。知道我们故事的人，自然进得去。

---

🚪 五、想去我们的 500 天看看？

🔐

解锁专属回忆

💡 密码提示: 我和星星布丁第一次真正认识的年月日（六位数，格式：年年月月日日）

---

500 天，说长不长。但对异地恋来说，每一个”在一起”的瞬间都是数着日子攒出来的。 把它们全部留在一个小小的网站上，10 年后翻回来，希望我和星星布丁能看到一条清晰的、属于我们的时间线。

1000 天见。 🥰