这些小东西原先散在我 Mac 的几个目录里：坦克大战在 scratch/tankcheck/，五子棋是单个 HTML 文件，霓虹方块躺在 cyberpunk-3d-tetris.html。想给人看的时候，只能把文件拖进浏览器，发过去还得附带一句“先下下来再打开”。后来干脆买了个域名，做了个首页，把它们全收进去：https://zwbcc.cn。

做这个站还有另一个原因：想给这些东西找个固定的地方。以前写完一个小游戏，玩两天就扔在文件夹里吃灰，过一阵自己都忘了放在哪。现在定了个规矩——以后用那台机器上的模型写出来的小玩意，不管是一个网页小工具、一个能联机的小游戏，还是别的什么，都往 zwbcc.cn 上放。它不该是做完就不动的展示页，而是一份一直在长的清单。

我想干脆写一篇，把这个站过一遍：首页有什么、六个项目各是什么、跑在哪台机器上，以及部署时踩过的几个坑。

一、一句话说清它是什么

zwbcc.cn 是一台 RTX 5080 小主机的门面。上面的项目都是局域网里那台 10.0.0.60 上的模型写出来的代码，写完落到云服务器，变成纯静态页面；首页顶部那块终端不是装饰图，字段和真实机器状态对得上：引擎版本、模型名、解码速度、显存与内存占用。

所以它现在有两个身份：既是“我家里有台机器在跑本地模型”的说明页，也是这些项目的入口。往后每写完一个东西，这个入口就多一格——不是先有站再凑项目，是项目一个个生出来，站跟着变长。

二、首页：一块终端加一张九宫格

首页是个单文件，24,334 字节，样式全部内联，没有外部 CSS/JS/字体请求。结构就三段：HERO（大标题 + 终端状态块）、项目九宫格、跑模型的机器，最后是页脚。

卡片顶上放的是每个项目的真实运行画面，640×400 WebP，8:5。早先图省事，这里用的是 emoji 图标，九个格子排出来像同一张图；换成截图之后，一眼能分清哪个是像素游戏、哪个是 WebGL、哪个是桌面客户端。

其实，九宫格是这个站唯一会长大的地方。加一个项目就三步：建目录放文件、复制一张卡片、跑一遍 deploy-site.sh；缩略图重新拍一张，右下角那张占位卡往后挪一格。所以现在的六格不是最终数量，只是写到今天为止的样子。

三、六个项目

游戏部分最花时间的是坦克大战：右侧面板原本高 1167 px，手机上把菜单和说明挤掉一半，后来压成三格状态 + 2×2 常用键，剩下的收进折叠区，523 px 就装下了；再配一套 #test 自检（298 项，线上跑一遍 ALL PASS），改版时才敢放手动 DOM。

WgPunch 是个例外：它不在主域下，卡片直接外链到 wgpunch.zwbcc.cn，页面和客户端都不在这个仓库里，首页只负责给个入口。

四、跑模型的机器

首页最后一段把这台机器的底细全写了：

两个模型都列了实际占用：主力 swift-1.5-iq3_s 约 91 tok/s、上下文 256K、15.2 GB / 16 GB 显存加 56 GB / 128 GB 内存；备选 Qwen3.8-Flash-Next · NVFP4 质量更高，但在 16 GB 卡上只有 41.5 tok/s。写这组数字没别的意思：在显存不够的机器上，“能跑多大模型”这句话没什么用，跑起来占多少、快多少才有意义。

五、托管：纯静态，Mac 关机也不影响

站点在腾讯云的一台服务器上，1Panel 的 openresty 直接发文件，前面挂腾讯云 EdgeOne。构建和部署都在 Mac 上做，./deploy-site.sh 一条命令搞定：

./deploy-site.sh            # 首页 + 全部项目
./deploy-site.sh --home     # 只传首页
./deploy-site.sh --games    # 只传项目

脚本先 scp 成 index.html.new 再 mv，访客不会下到半截文件；旧首页顺手备份成 index.html.bak-<时间戳>；传完 curl 一遍验证状态码。项目按目录整个传，加新游戏不用改脚本。

三条自己定的规矩：

1. 项目一律以静态文件形式上云。AI 那台机器只跑推理，不装任何 Web 服务，它重启跟站点没关系。
2. 第三方库全部自托管。three.js r160 670 KB、Tailwind 407 KB、marked / highlight.js / gemoji 都在站内 vendor/ 目录。面向国内访问，jsdelivr 和 Google Fonts 经常连不上，表现就是白屏或掉字体。
3. 卡片缩略图必须是真实运行画面，不能用图标代替。

六、踩过的三个坑

CDN 按 Content-Encoding 分别缓存。 2026-11-06 给九宫格加“工具”卡时，源站、br、zstd、不压缩四路都已经是新版，只有 gzip 那份还在吐七小时前的旧首页。Chrome 发的恰好是 gzip，于是本机刷新看到旧版、curl 看到新版，我一度以为部署没生效。判“传没传到”只能看源站：

ssh -i ~/.ssh/id_zwbcc_deploy root@<host> \
  'curl -sk --resolve zwbcc.cn:443:127.0.0.1 https://zwbcc.cn/ | sha256sum'

favicon 缓存。 浏览器对图标的缓存很顽固，改了图标不换 ?v=N，可能几天都不更新，一度以为自己改错了地方。

项目页的 HTML 有十分钟 TTL。 首页改完基本立刻生效，项目页要等缓存过期；着急时可以给链接加 ?v=<时间戳>，新缓存键会回源。

七、深色和浅色两套主题

默认深色，点右上角的按钮切换，选择存在 localStorage 里，下次进来还是上次那套。两套主题的差别只在两组 CSS 变量（:root 和 [data-theme="light"]），背景网格、光晕、终端块都跟着变量走，没有第二份样式表。

手机端（≤640 px）顶栏字号收到 12 px，链接区可横向滚动，360 px 宽也不会把“项目”挤掉；九宫格变单列，卡片仍然保持 8:5。

八、入口

• 首页：https://zwbcc.cn/
• 博客：https://blog.zwbcc.cn/ ，这篇文章就发在这里
• WgPunch：https://wgpunch.zwbcc.cn/

九宫格右下角那张占位卡还空着。按现在的节奏，以后用本地模型写出来的每个小东西都会放到这个站上：可能是个查快递的小工具，可能是又一个三分钟能玩完的小游戏，也可能只是某个周末折腾出来的半成品。想看得比博客勤一点，直接收藏首页就行。

说实话，站点本身没什么技术含量：几个静态文件，一条传文件的脚本，一套 CSS 变量。花时间的是里面每个项目，以及那些“看起来应该没问题、实际就是不对”的缓存和主题细节。想先看看长什么样的话，点开首页就行了。