把这个博客从默认模板里救出来
告别 Doks 示例页:手写 HTML/CSS、纸墨配色、三态深色模式,以及 tar + scp 的部署流水线。
打开自己的博客,看见的第一行字是「Congrats on setting up a new Doks project!」——恭喜你装好了模板。装是一年半以前装的,祝贺一直挂到今天。于是这个下午,我把它拆了,从默认模板里捞出来,重新做了一层皮。这篇文章记录改版的设计与实现取舍,也顺便当作站点的第一篇技术笔记。
现状:一个壳
旧站是 Thulite/Doks(Hugo 系)的官方示例:示例导航、示例文档、示例文章,连 favicon 都是一张通用的「文档」图标。真正写过的内容只有两个关于第 97 届奥斯卡的空白草稿——点进去,正文是「Title here / Date here」。
问题不在 Hugo,也不在 Doks——它们都是好工具。问题在于:一个连「写什么」都还没想清楚的人,先领了一套五脏俱全的文档站骨架,然后被那套骨架吓住了。
决策:不换框架,直接扔掉框架
改版方案通常有两种:换一个更好看的主题,或者换成 Next.js/Astro 之类的新玩具。我选了第三种——不换,扔掉。
这个博客的需求少得可怜:一个首页、几篇文章、一个关于页、一份 RSS。为它背一个 Node 工具链、一套主题变量、一层构建抽象,属于高射炮打蚊子。最后落地的是:
- 每页一个手写的 HTML,共享一份 CSS、一份二十行的 JS;
- 一个百来行的
build.py负责拼公共布局、生成 RSS/sitemap、给旧 URL 写跳转页——标准库,零依赖; - 文章正文就是 HTML 片段,元数据是一个 Python 列表,
git diff一眼能看清。
框架解决的是它假设你会遇到的问题。如果那些问题从来没来,「零框架」就是最好的框架。
设计:纸与墨
方向很早就定了:纸和墨。中文个人博客的审美富矿区在「文人案头」,不在「SaaS 落地页」——没有渐变按钮,没有玻璃拟态卡片阵列,没有 Inter 字体。
- 配色:暖纸底、墨色正文、朱砂色做唯一强调色;朱砂只用于链接、印章、目录菱形,整页不超过三处。
- 字体:标题走衬线(Noto Serif SC / 宋体系栈),正文走系统无衬线,日期与代码走等宽。不加载任何 webfont——站点跑在国内机器上,省一张字体请求,首屏快一截。
- 印章:站名「寒江」做了一枚旋转 -4° 的朱文印,放在顶栏和首页 hero 右上,是全站唯一的「装饰物」。
- 纸感:body 上叠了一层 SVG 噪点纹理,透明度 5%,几乎不可察觉但手感立刻不同。
- 分节:文中小标题前一颗旋转 45° 的朱砂小方块(
::before),分隔线是一枚居中菱形——传统活字排版的「花丁」做法。
深色模式:三态,二十行
深浅色用 CSS variables 切换,html.dark 一个类名换一整套色板。默认跟随 prefers-color-scheme,用户手动切换后写入 localStorage。为防刷新时闪白,切换逻辑内联在 <head> 里、样式表之前执行——全部加起来二十行。
一个细节:暗色的「纸」没有用纯黑,而是带一点暖褐的深墨色(#171310),和亮色那层米纸(#f6f1e7)互为镜像。夜读时它比 #000 温柔得多。
部署:打包、对摘要、原子替换
写成一个脚本,跑一条命令就够:
./deploy.sh # 构建 → 打包 → scp 上传 → 两边核对 sha256 → 原子替换 → 抽查线上
关键动作只有四步,顺序不能换:构建产物打包、scp 传到服务器、在两边核对同一个摘要、解包到一个全新目录再 mv 替换。为什么要这么麻烦?因为「传文件」这件事曾经以最难察觉的方式骗过我:管道写过去的文件是 0 字节,命令却返回成功。凡是静默成功的操作,都得有一条对得上的凭证。
静态站的妙处在于部署即生效:没有进程、没有依赖、没有冷启动。替换目录的一瞬间新旧交替,旧目录原地留作备份,回滚就是 mv 回去。
旧链接(/blog/…、/docs/…、/tags/…)各留了一个 meta refresh 跳转页,指向新地址——外链不致 404。
结果
首页 HTML 6KB、CSS 11KB、JS 不到 1KB,整站在服务器上约 217KB,其中六成是图标和那张 OG 分享图。没有第三方请求,没有字体下载,没有统计脚本,首屏该有的东西就是全部的东西。
更重要的是心理上的:现在打开这个站,看见的不再是别人的模板,而是一张自己的纸。纸已经铺好了,剩下的就是往上面写字。