用 WorkBuddy 一句话生成教育触摸屏网页，并一键部署公网 Demo
古董级程序员，前百度/微博工程师，现在关注 AI 工程化与开发者工具。
微信公众号「字与码」，记录技术思考与行业观察。
本文同步发布于 zicode.com
学校、培训机构、少年宫，门口总想放一块触摸屏展示屏：轮播校园风采、点开看宣传视频、查课程和通知。传统做法要拉设计、搭前端、买服务器、配域名，没两周下不来。
这回我只用 WorkBuddy 一句话就把这件事跑通了：先做一个单文件的触摸屏首页 Demo，再一键部署成公网可访问的链接。重点是——它不需要你会前端、不用配服务器，这类展示网页 WorkBuddy 都能照着需求直接生成。下面把做法、踩的坑，以及你最关心的”还能部署到哪、当前链接到底在哪”一次说清。
想自己动手试一把？WorkBuddy 邀请链接：https://www.workbuddy.cn/events/invite?inviteCode=9nep0vg7p9cpjmlv
一、这个 Demo 做了什么
一个自包含的 index.html，专为大屏触摸场景设计（1920×1080 墙面屏 / 电子班牌），零依赖、断网也能跑：
- 顶部轮播 banner：4 张教育主题大图，每 5 秒自动切换，支持左右箭头、圆点、手势滑动、键盘方向键；
- 6 个栏目导航：课程中心 / 校园直播 / 通知公告 / 图书借阅 / 校园地图 / 关于我们，点一下弹出内容卡片；
- 视频区：卡片点击直接全屏弹出 HTML5 播放器；
- 底部通知滚动条 + 实时时钟，适合校门大厅长期展示。
下面这些是它实际跑起来的样子（1920×1080 全屏）：
点一下轮播右箭头，banner 就切到下一屏：
点栏目（比如”课程中心”）会弹出内容卡片——这就是”点文字”的交互：
为什么用”单文件 HTML”：墙面屏本质就是个全屏浏览器。把所有结构、样式、脚本塞进一个文件，拷贝到任何一台机器、任何静态服务器都能直接打开，没有构建、没有依赖地狱，运维成本趋近于零。
二、一个容易踩的坑：视频要本地化
第一版视频我用了 Google 公共示例 MP4 占位。结果国内网络访问不到，点开”只有播放器、没有画面”，整个 Demo 像在模拟播放。
修法是把视频本地化：用 ffmpeg（imageio-ffmpeg 自带）本地生成 6 段真实的 1280×720 示例视频，打包进站点 videos/ 目录。这样一来，断外网也能播，墙上的屏最稳。上线时把这几个文件换成真实课程录像即可。
修好之后点开视频卡，是这样——全屏播放器，画面是真的在播：
经验：凡是给国内墙面屏用的 Demo，外部资源（视频、字体、图片）能本地化的尽量本地化。外链慢一秒，观感就掉一档。
三、一键部署成公网链接
写完页面，用 WorkBuddy 的”发布为应用”能力（底层 workbuddy_sites_deploy）把目录部署出去，直接拿到一个 https://*.app.workbuddy.link 的公网 HTTPS 链接，零配置。验证返回 HTTP 200，任意手机、任意网络打开即看。
这版 Demo 是公开可访问的，你现在就能点开体验（鼠标点一下，效果跟墙上触摸屏一模一样）：
四、还能部署到哪些地方
这个 Demo 是纯静态，几乎可以丢到任何静态托管。按”国内访问稳不稳、要不要花钱、灵不灵活”给你排个序：
| 部署方式 | 适合场景 | 费用 | 备注 |
|---|---|---|---|
| GitHub Pages / Vercel / Netlify / Cloudflare Pages | 纯静态、有海外或自有域名 | 免费额度够用 | 拖一个 HTML 即可；Cloudflare Pages 国内也还凑合 |
| 阿里云 OSS + CDN / 腾讯云 COS + CDN | 国内访问稳、要快 | 按量，几元/月 | 配自定义域名 + HTTPS 最稳，企业首选 |
| 七牛云 / 又拍云 | 国内静态托管 | 有免费额度 | 自带图片处理，适合图文多 |
| 自有服务器 Nginx / Docker | 完全可控、要后端/数据库 | 服务器成本 | 最灵活，可做密码、日志、统计 |
| 屏本身（树莓派 / 工控机） | 纯展示、连内网都行 | 一次硬件 | 本机起个静态服务，断网也播 |
| WorkBuddy 分享链接（当前） | 最快出 Demo、临时演示 | 看套餐 | 一键部署，随时取消发布 |
一句话：要快就用 WorkBuddy 分享链接；要长期稳定且在国内部署，上云厂商 OSS/COS + CDN；要完全可控，自己服务器或屏本机。
五、当前这个分享链接，到底部署在哪
几个你问到的关键点，直接给结论：
部署在哪里
在当前使用的是 WorkBuddy 内置的分享托管，域名是 *.app.workbuddy.link，由 WorkBuddy 托管静态/应用服务。子域名是随机串，不会被搜索引擎收录——属于”知道链接就能看”，但不是”需要授权才能看”。
是否支持后端服务
支持。 这个部署能力不只是静态托管，它还支持 Node / Python / Go 的”单端口 HTTP 服务”。也就是说，如果这面屏后面需要接口（报名表单、访客登记、实时数据），把项目改成一个监听 PORT 的小服务重新部署即可，用的还是同一个分享链接。纯静态只是它的”免构建”模式。
是否永久有效
分享链接长期有效，由你在 WorkBuddy 的「设置 — 数据管理 — 我发布的应用」里管理，随时可以”取消发布”让它下线。我没有掌握到任何自动过期的设定；它绑定在你的账号 / 应用下，生杀大权在你手里。
六、一点工程师视角
- 墙面屏 Demo 的”最小可交付”：一个 HTML 文件 + 本地化资源（视频、图片），比拉设计、搭前端、买服务器快一个量级。先让屏亮起来，再谈精致。
- 外链能不用就不用：视频、字体、图片，能打包进站点就打包。国内网络环境复杂，外链慢一秒，Demo 就少一分说服力。
- 密码门 ≠ 真鉴权：展示屏用前端密码门足够挡”路人随便翻”；要把链接发给校外、且内容敏感，得上服务端 Basic Auth（前面说的”支持后端”正好用上）。
- 还能继续加：无人操作自动回首页（待机）、点击放大招生二维码、后端接报名表单——这些都是在现有骨架上的小增量。
七、结语
做一面会自己轮播、能点视频的校园大屏，现在真的不需要一个团队。一个 HTML 文件打底，本地化资源保稳，一键部署出公网链接，剩下都是锦上添花。
- 线上 Demo（公开，可直接点开体验）：https://05e6c28fca18430897e5b43cd0a42c15.app.workbuddy.link
- WorkBuddy 邀请链接：https://www.workbuddy.cn/events/invite?inviteCode=9nep0vg7p9cpjmlv
照着本文的路子，把校名、课程视频和栏目换成你自己的，一面能上墙的展示屏就能跑起来了。
微信公众号
欢迎关注「字与码」
如果这篇文章对你有用，也欢迎在微信里继续关注后续更新。
X / Twitter
关注 @ax2_zicode
更即时的技术观察、新文章提醒和一些短想法会发在 X 上。