把博客拆回两百行脚本：静态建站与手绘纸面笔记

以前我也折腾过重型博客框架。装主题、配插件、调打包器，头两天兴致勃勃，等隔了半年想补一篇笔记时，npm install 先报一屏依赖冲突。修完构建配置，原本想写的那点东西早就没兴致写了。

这次重做 lxfight.github.io，我给自己的底线很明确：隔一年不碰，打开仓库依然能在一分钟内把文章发出去。

为什么不用现成框架

个人博客的核心需求其实极窄：把 Markdown 转成 HTML，按日期排个序，再生成首页和列表页。为了这点事引入一整套前端运行时、几十个插件和复杂的客户端水合，长远看全是在给自己攒技术债。

我干脆把构建逻辑收敛成了一个单文件 build.js，依赖只留三样：

• front-matter 读文章头部的元数据
• marked 把正文转成 HTML
• highlight.js 在构建阶段直接完成代码高亮

加起来两百来行代码，没有任何魔法。模板就是原生 HTML 加上 {{title}}、{{content}} 这样的纯文本占位符，跑一遍 node build.js，不到一秒就能吐出全站静态文件。没有客户端路由，也没有打包产物的 hash 迷宫，丢到 GitHub Pages 上就能直接跑。

做成一本速写本，而不是 SaaS 落地页

既然代码底座已经够轻了，外观上我也想避开那种千篇一律的“毛玻璃 + 大圆角 + 霓虹渐变”。技术笔记本来就更接近草稿纸上的涂写和圈注，索性整站都做成了铅笔手绘风（Sketch Style）。

整站样式全部收在根目录的 styles.css 里，靠几条硬约束撑起纸面感：

• 拒绝纯白背景（#ffffff 看久了晃眼），默认用冷调米白纸 #faf8f3，另外配了暖米黄、沙色、蓝图纸、黑板等 8 套纸色，改一下 <html> 上的 data-palette 就能换纸。
• 边框一律用 2px dashed 的铅笔虚线，卡片和按钮做成不对称的小圆角，悬停时带一点 -1deg 的轻微歪斜，模拟手绘线条的不稳定感。
• 强调色只用来画波浪下划线和虚线框，绝不直接拿高饱和红黄蓝绿去当文字颜色，保证在深浅纸面上都有足够的阅读对比度。

/* 铅笔手绘卡片：纸面底色 + 虚线描边 + 错位笔触阴影 */
        .sketch-box {
          background-color: var(--c-paper);
          border: var(--bd);
          border-radius: var(--r-card);
          box-shadow: var(--shade-md);
        }

这里还踩过两个挺有意思的浏览器渲染坑：

第一，最早我想在 box-shadow 里直接塞 SVG 排线图案，结果 Chrome 和 Firefox 会静默丢弃带 url() 的阴影声明，不报错也不渲染。最后改成了两段错位叠加的半透明铅笔灰笔触（1px 1px 叠 4px 4px），反倒更像铅笔侧锋涂出来的阴影。

第二，卡片加上轻微旋转（rotate）之后会创建新的层叠上下文，原本用 ::after { z-index: -1 } 垫在底下的排线纹理会被直接顶到正文上方盖住字。把这类纯装饰背景克制在聚焦态和独立色带里，版面才彻底干净下来。

为了防止以后改样式时不小心破戒，我还顺手写了个 sketch-check.js，每次构建完自动扫一遍 CSS 和 HTML——一旦混进渐变、毛玻璃、纯白背景，或者哪套纸色主题的文字对比度跌破 WCAG AA（4.5:1），脚本直接报错退出。

这个本子打算记些什么

把建站流程砍到最简，终归是为了把精力留给正文。接下来这里主要会记三类东西：

• AI 插件与记忆系统：围绕 AstrBot 生态做的插件实战，尤其是 RAG、长期记忆沉淀和工具调用里踩过的工程坑。
• 小而稳的工程工具：像基于 Deno 的 GitHub 代理服务、桌面端桥接客户端这类解决自己日常痛点的小项目。
• 排障与取舍复盘：少写空泛的概念科普，多写“当时遇到了什么约束、试过哪几种方案、最后为什么选了现在这条路”。

代码跑通只是第一步，把来龙去脉理清楚写下来，才算真正消化成了自己的东西。

如果你正好也在折腾类似的方向，或者对某篇笔记里的实现有不同看法，欢迎随时来 GitHub (@lxfight) 找我交流，也可以直接发邮件到 contact@lxfight.com。