← 回到首页
ABOUT THIS SITE

わたしについて

一个个人小站,从一张静态导航页长到现在这个样子。下面是它是什么、为什么做成这样,以及一路改过来的记录。

13个版本
20个页面
1.7API 版本
30+次部署
KUROMI
图片位 · 待补
把图放到 /about/portrait.webp 就会自动出现

这是一个什么样的站

它原本只是一张导航页:几个入口卡片,点进去是乌萨奇、小游戏、留言板。后来慢慢长出了角色介绍页、访问统计、管理台,甚至一个能点赞、能楼中楼回复的留言板。技术上没什么高深的东西——一台 2 核 2G 的云服务器,1Panel 管着 OpenResty,后端是一个纯标准库的 Python 服务,数据放在一个 SQLite 文件里。

做成酷洛米的样子,是因为喜欢那种「看起来凶,其实很软」的气质。黑色、玫红、骷髅、蝴蝶结,加上跑马灯和棋盘格——这些元素凑在一起,就是现在这个页面。

下面这些版本记录,是按时间从旧到新的。每一条都对应一次真实的改动,不是占位文案。

v0.12026.10.25

起点:把整个站看清楚

  • 把容器、站点目录、反代关系摸了一遍:OpenResty 跑在 host 网络容器里,宿主机 /opt/1panel/www 挂进容器 /www。
  • 确认后端其实只有三块:静态站、usagi-api(纯标准库 HTTP 服务)、手工起的上传服务。
  • 写出第一版《站点架构说明》,把拓扑、端口、接口和风险列清楚。
  • 当时的判断:不引框架、不换数据库。2 核 2G 的机器,SQLite 完全够用,MySQL 光常驻就要 300–400 MB。
v0.22026.10.26

把「能跑」变成「出事能恢复」

  • 上传服务从 SSH 手工进程改成 systemd:原先父进程是 sshd,一断线就没了;改完 enabled + Restart=always,崩了 3 秒拉起。
  • 顺手把它从 0.0.0.0 收回 127.0.0.1(OpenResty 是 host 网络,反代照样通),token 从代码里挪进 /etc/usagi-upload.env。
  • 每日 03:30 备份:用 sqlite3 .backup 而不是 cp——cp 在写入时可能拿到半个事务,.backup 是在线一致性备份。
  • 访问统计:解析 nginx 日志,用「页面 + 静态资源」双条件认人,配 UA 黑名单。不用第三方统计,是不想给页面塞外部脚本。
v0.32026.10.26

管理台:终于看得见访客了

  • /admin.html 加一组 /api/admin/* 接口,口令复用原来的 USAGI_ADMIN_TOKEN,不另建账号体系。
  • 三个面板:访问记录(IP / 地区 / 路径 / 状态 / 客户端)、留言管理、14 天趋势。
  • 地区解析为什么用 ip-api 而不是离线库:离线库(ip2region,约 11 MB)从这台机器下载不到,GitHub、jsdelivr、gitee 全不通;代价是访客 IP 会发给第三方。
  • 性能是后来才修好的:接口现场只查 1 个新 IP,其余交给后台每 10 分钟补 45 个进 SQLite 缓存,响应从 10.5 秒降到 0.93 秒。
  • 同一天还做了口令轮换、软删除 + 回收站、SQLite 切 WAL 并加索引。
v0.42026.10.26

留言板:反垃圾、体验、互动

  • 反垃圾五道闸:隐藏蜜罐字段、提交耗时不足 2.5 秒判机器人、链接超过 2 条拒收、同 IP 同内容 10 分钟去重、单 IP 60 秒 + 全站每分钟 5 条限流。
  • 体验:游标分页(before=id)替代整页重拉,发送后局部插入并高亮 2 秒,昵称记在 localStorage,Ctrl+Enter 提交。
  • 互动:点赞(reactions 表,一人一票)、楼中楼(只做一层,回复的回复归到同一顶层)、置顶、管理台直接回复。
  • 为什么不用 WebSocket:这个量级不值当,局部刷新已经够快,还省掉长连接和重连逻辑。
v0.52026.10.26

把「说不清」的地方补上

  • 回复对象 reply_to:列表一扁平就丢了「在回谁」,补一列记住对方昵称。
  • 举报按钮 + 管理台「只看被举报」、关键字搜索、分页;这三样是管理台从「能看」到「能用」的分界。
  • 今日计数「N 条 · 今天 +M」和空状态文案,让人知道这里还活着。
  • 图片:复用上传接口,默认 pending,管理台审核通过才显示。公开站不想让任意图片直接上墙。
v0.62026.10.27

首页重做:酷洛米

  • 从「淡粉柔光」换成黑紫玫红:黑底、骷髅徽章、跑马灯、棋盘格,把「凶但软」的气质做出来。
  • 素材取自 Sanrio 官方角色页,转 WebP 后一共 574 KB,配 srcset 让手机只下 480w。
  • 结构:双栏 hero、角色档案条、今日一句、公告、6 张分区卡片、About 官方横幅、Q&A 轮播、8 张画廊。
  • 动效:星空 canvas、漂浮头像、极光、卡片光斑、滚动揭示,全部受 prefers-reduced-motion 约束。
  • 为什么还是全手写:整页就一万多行 HTML/CSS,引框架等于多一层构建、多一份体积,换不来什么。
v0.72026.10.27

绫华页 + 两个入口

  • /ayaka.html:官方立绘、资料、三副面孔、太刀术、命座、配队、配装、养成、台词。
  • 首页页脚爱心连点三次进 /admin.html,作为不显眼的管理入口;它被别人的编辑覆盖过一次,之后加了 build 标记,方便一眼看出是不是自己那份。
  • 「今日一句」升级成 32 条台词库:按日期取默认值,点击 / Enter / ←→ 切换,每条都标作品和角色。
v0.82026.10.28

往下滚,东西自己长出来

  • 顶部进度条、SCROLL 提示、分区标题横线生长、卡片与画廊逐个入场、骷髅条弹入、回顶按钮。
  • 视差分三层:立绘 0.10、文案 0.045、底纹 0.055;scroll 用 passive + rAF 节流,不抢主线程。
  • 卡片 3D 倾斜只在 pointer:fine 下启用,触屏不参与。
  • 踩过的坑:fixed 元素放进带 transform 的父级,会以父级为包含块——SCROLL 提示因此跑到画面中间。
v0.92026.10.28

点一下,会掉星星

  • 点击任意位置撒骷髅、爱心、星星粒子:55 ms 节流,总量上限 26 个,动画结束回收节点。
  • 图片优化:立绘 PNG 51 KB 换成 WebP 20.8 KB,画廊补 480w 版本,首屏加 preload。
  • 可访问性:提高浅色主题对比度、加 focus-visible 描边、Q&A 圆点扩到 36px 热区、减少动效时不自动轮播。
  • 运维:每 5 分钟监控、日志轮转、Windows 侧异地拉取并校验、服务器上的恢复演练。
v0.102026.11.01

把毛边收一收

  • 补上真正的 404:nginx 里加了 error_page 404 /404.html;,不存在的路径不再空白,而是那张带骷髅徽章的酷洛米 404。
  • 跨文档过渡:首页、绫华页、留言板、开发日志都加了 @view-transition,站内跳转缩放淡入,不再白闪。
  • 新增 About 页:/about.html 从开发日志改造而来,首页第六张卡片从「準備中」变成可点。
  • 标题换成 Zen Maru Gothic 圆体,只取用到的字符,woff2 一共 7.9 KB。
  • 第三套主题「夜樱」:黑底加樱色渐变,主题按钮变成 ☾ / ☀ / ❀ 三态。
  • 灯箱重做:八张缩略图、← → 翻页、Esc 关闭、焦点锁在弹窗里。
  • 订阅:/feed.xml 上线,留言与公告每小时汇总,可以直接丢进 RSS 阅读器。
v0.112026.11.02

排行榜、问答箱,和冬天的第一版

  • 排行榜上线:scores 表 + GET/POST /api/scores,2048 与凛鲸娘幸存者结算自动提交,/rank.html 两个榜,首页多一张卡。
  • 匿名提问箱:questions 表、/ask.html、管理台新增「问问站长」标签页(待答 / 已答、就地作答、删除)。
  • 首页「问问站长」卡改成实时读 /api/ask,不再写死示例。
  • 冬天成为默认主题:11–2 月 winter、3–4 月 sakura、其余 dark,<head> 早期脚本防首屏闪色。
  • 补回「弹幕幻想」入口卡:重做首页时丢了,游戏本体一直在 /danmaku/。
  • sitemap.xml 重写:去掉 404 的 /now.html,补上 rank / game / 2048 / stats / ask / danmaku。
v0.122026.11.03

轻一点,也快一点

  • 冬日皮肤铺满全站:留言板、统计、问问站长、排行榜、关于、绫华页;绫华页 hero 的白底换成深蓝卡片。
  • 手机端减负:不再预取 5 首(手机端 18 MB)、播放器默认折叠、关毛玻璃与噪点、降低星空负载。
  • 音乐 mp3 → m4a(AAC),单曲 9.5 → 5.4 MB,整站 77 → 54 MB。
  • 起播引子:12 秒 / 约 100 KB 先出声,再从同一位置交叉淡入正片。
  • nginx 对 dotfile 与 php 探测返回 444,扫描器不再刷日志。
  • 首页拆分:/site.css + /site.js,index.html 156 KB → 25 KB,gzip 48 KB → 8 KB。
  • 六个小功能:站龄、连续来访、深夜模式、卡片倾斜、空白星星、库洛米光标。
  • 修 bug:引子播放期间暂停要点两次。
v0.132026.11.09

有自己的域名了

  • 备案通过:沪ICP备2026059621号-1,域名 chypy.com,页脚按规矩挂了号并链接到工信部。
  • HTTPS 上线:Let's Encrypt 证书(到 2027-02-07),HTTP/2、TLS 1.3、HSTS,http 与裸 IP 一律 301 到 https://chypy.com。
  • 证书自动续期:certbot.timer + 续期钩子自动拷证书并 reload OpenResty,不用人管。
  • 全站换域名:sitemap、RSS 三份 feed、og:image、og:url、canonical 全部改成绝对地址 https://chypy.com。
  • 会话 Cookie 加 Secure,只在 HTTPS 下传输。
  • 顺手修的:静态资源重复的两条 Cache-Control 合成一条;HANDOFF.md 从网站根目录移走(之前 180 KB 公网可读)。
  • 修 bug:卡片「点了没反应」——关掉了 iframe 软导航,跳转交回浏览器原生(代价是跳页时音乐停)。
next在做 / 在等

接下来

  • 在等:公安联网备案。ICP 过了之后 30 天内要办,办完把公安备案号也加到页脚。
  • 在做:brotli。现在只有 gzip,OpenResty 若编了 ngx_brotli 就能再省 20%~25% 传输。
  • 待定:game.html 318 KB 拆成 game.css / game.js;/secret.html 要不要加密码。
  • 在等数据:访客地图。geo 表只有国/省/市,没有经纬度,要么换离线库,要么先做「按地区聚合的横条」。
  • 技术债:/qianmen/ 那套 Vue 仍占 50 MB;CSP 还停在 Report-Only。
NOW · 现在在做什么

这周在做什么

最后更新 2026-11-09 · 比更新日志软一点,写的是「现在进行时」

正在做

  • HTTPS 收尾:证书续期演练、CSP 从 Report-Only 转正式
  • 传输优化:brotli、game.html 拆分
  • 备份:异地副本与恢复演练

刚做完

  • 备案通过、域名上线、全站 HTTPS(Let's Encrypt + 自动续期)
  • 管理台改成账号登录(PBKDF2 + 会话 Cookie)
  • 文案、待办、封禁、批量审核四个后台面板
  • 母鸡页 /hen.html、排行榜、问问站长

接下来

  • 公安联网备案(拿到号加页脚)
  • brotli、game.html 拆分
  • 访客地图(缺经纬度数据)

还没做的

  • /qianmen/ 那套 50 MB 的 Vue 要不要换原生
  • /secret.html 的访问密码