技术栈
这个站真正在用的东西，按用途分组 —— 每一项都能在仓库里指出用在哪
5 个分类 · 22 项构建与站点
把 Markdown 和模板编译成纯静态网页的那一层
- Hugo 整站的构建引擎（extended 版）。它把文章和模板编译成 public/ 里的一堆静态文件，不需要服务器、不需要数据库。gohugo.io
- PaperMod Hugo 主题，本站的版式底座。不过样式与结构几乎都被项目的 layouts/ 和 fluent.css 重写过，主题本体保持原样。github.com
- Markdown + Goldmark 文章用 Markdown 写，由 Hugo 内置的 Goldmark 渲染；本站开了 unsafe，所以正文里也能直接写 HTML。gohugo.io
- Hugo 资源管线 样式与脚本由 Hugo 自动合并、压缩、加内容指纹，并生成 SRI 完整性校验值，缓存与安全两头都省心。gohugo.io
- Hugo 短代码 自定义短代码：文章正文里写一行 bilibili 短代码，就会渲染成一个 16:9 的 B 站播放器。gohugo.io
前端与交互
全部手写，没有引入任何第三方前端库
- 原生 JavaScript 全站前端脚本都是手写的，零第三方库：仓库里没有 package.json，站内脚本也没有引用任何 CDN 包。页面里唯一的外链脚本是 Cloudflare 在边缘自动注入的统计代码，不是本站引入的依赖。developer.mozilla.org
- CSS 自定义属性 颜色、圆角、模糊、遮罩这些设计令牌集中在 :root 里；左下角「背景清晰度」滑块拖动时也只改一个自定义属性。developer.mozilla.org
- backdrop-filter 页头、卡片、页脚状态栏的磨砂玻璃质感：半透明底色加上把身后背景模糊掉的 backdrop-filter。developer.mozilla.org
- pjax 无刷新切页 自研的无刷新切页：点站内链接只替换内容区，正在播放的音乐不会被掐断，滚动位置也会记住。developer.mozilla.org
- View Transitions API 切页与深色/浅色切换的过渡动画，用浏览器原生的视图过渡 API 实现；不支持或开了「减少动效」就自动降级。developer.mozilla.org
- Canvas 2D 左下角开关控制的樱花飘落，是画在 canvas 上的粒子动画，页面不可见时会自动停下省电。developer.mozilla.org
- localStorage 在本地记住一些偏好：音乐音量与播放进度、樱花开关、侧栏目录的滚动位置。developer.mozilla.org
- Intl.DateTimeFormat 页脚状态栏那个走字的时钟，用 Intl 固定按北京时间显示，不随访客本地时区变化。developer.mozilla.org
- Speculation Rules 鼠标悬停在站内链接上时提前把下一页取回来，点下去更快；只用预取不用预渲染（预渲染会掐断音乐）。developer.mozilla.org
部署与基础设施
从 push 到上线，中间要经过的东西
- Cloudflare Workers 站点上线的运行平台：把 Hugo 生成的 public/ 当纯静态资源托管，一条 wrangler 命令发布，自带 HTTPS。developers.cloudflare.com
- Cloudflare R2 音乐的对象存储：六首曲子的 MP3 都放在桶里，走 music.yunblog.com.cn 这个自定义域名分发，仓库里不再存音频。developers.cloudflare.com
- Cloudflare DNS 域名 yunblog.com.cn 的解析托管在 Cloudflare（实测 NS 就是 Cloudflare 的），Workers 与 R2 的自定义域名都挂在它下面。www.cloudflare.com
- GitHub Actions 往 main 分支一推，它就自动装 Hugo、构建、再发布到 Cloudflare Workers，全程不用手动操作。docs.github.com
- Git 版本管理：每一次改动都有记录，改坏了随时能回退。git-scm.com
- GitHub 代码与文章的托管仓库，同时也是网页后台保存时的提交目标。github.com
内容管理
不写代码也能改站上的东西
辅助脚本
构建之外、偶尔跑一次的小工具
