【免费下载链接】sticker-forgeA tactile WebGL sticker maker with rich text, image uploads, and interactive peel physics.项目地址https://gitcode.com/gh_mirrors/st/sticker-forge点击查看免费下载Sticker Forge 是一款开源的 WebGL 贴纸制作工具可以把文字或上传图片变成能撕拉的 3D 贴纸——拖动真实的模切边缘贴纸会卷起并露出缎面背面还带有深度感知阴影与撕拉音效。想要把它部署上线分享给更多人项目原生提供了两条零折腾的Sticker Forge 部署路径面向零服务器场景的GitHub Pages 静态导出以及支持 D1 数据库与图片优化的Cloudflare Workers 全功能部署。本文带你快速走通这两条路径。部署前准备环境要求与获取代码 ️两条路径共享同一套本地环境要求先完成一次性准备Node.js ≥ 22.13.0package.json 中的engines字段明确了版本下限npm依赖安装与脚本执行获取代码并安装依赖git clone https://gitcode.com/gh_mirrors/st/sticker-forge.git cd sticker-forge npm install所有部署相关的脚本都集中在 package.json 中先记住这几个主力选手脚本作用对应部署路径npm run dev本地开发热更新 本地 Workers 环境Cloudflarenpm run build:pages构建静态站点产出out/目录GitHub Pagesnpm run build完整构建类型检查 embed 库 Workers 产物Cloudflarenpm run start本地启动生产模式的 Workers 应用Cloudflarenpm run db:generate生成 D1 数据库迁移 SQLCloudflare路径一GitHub Pages 静态导出部署 一键构建静态站点GITHUB_PAGES 开关原理静态导出的核心开关在 next.config.ts 中当环境变量GITHUB_PAGEStrue时Next.js 的output切换为export并开启trailingSlash构建产物变成一组纯静态 HTML/JS/CSS 文件。本地构建与线上完全一致的静态产物只需一条命令npm run build:pages构建成功后会生成out/目录里面就是可以直接放到任何静态托管上的完整站点。两个针对静态托管的细节同样由GITHUB_PAGEStrue触发Webpack 注入module: falsefallback并加载 build/inline-audio-loader.cjs 音频内联 loader撕拉音效经过裁剪、转单声道和高通处理后直接内联进 JS 包无需单独托管音频文件——原始录音保留在 lib/assets/ 中。自动上线推送 main 分支即触发部署项目内置了 GitHub Actions 工作流 .github/workflows/deploy-pages.yml流程非常直白触发条件推送到main分支或手动执行workflow_dispatchbuild 任务检出代码 → 安装 Node 22.13.0 →npm ci→npm run build:pages→ 将out/目录上传为 Pages 工件deploy 任务通过actions/deploy-pagesv4发布到 GitHub Pages 环境内置concurrency控制新推送会自动取消进行中的旧部署。也就是说只要仓库 Settings 中开启 Pages日常开发推代码即部署不需要任何额外配置。路径二Cloudflare Workers 全功能部署 ⚡本地开发一条命令拉起完整 Workers 环境npm run dev该命令通过 vite.config.ts 中的vinextcloudflare/vite-plugin组合启动Worker 入口为 worker/index.ts由 Miniflare 在本地模拟ASSETS、DB、IMAGES等 Cloudflare 绑定本地 D1 绑定使用占位database_id见 vite.config.ts 的localBindingConfig生产环境由控制面注入真实值类型声明见 cloudflare-env.d.tsEnv.DB即 D1 数据库句柄。构建与生产启动三步完整构建npm run build # 依次执行 typecheck → build:lib → vinext build npm run start # 本地验证生产产物npm run build是三步流水线package.json步骤产物typecheckTypeScript 全量类型检查build:lib可嵌入的框架无关组件库输出到public/embed/ES Module IIFE 两种格式含 sticker-forge.d.ts 类型声明vinext buildCloudflare Workers 生产构建产物其中 embed 库由 vite.lib.config.ts 配置特意把three打进产物使用者无需安装任何依赖复制即用。可选能力D1 数据库与图片优化Workers 路径独有的两个超能力D1 数据库通过 Drizzle ORM 接入迁移配置见 drizzle.config.ts默认表结构为空db/schema.tsexamples/d1/ 提供了一个完整的notes增删查改示例照抄即可拥有自己的数据层图片优化Worker 中/_vinext/image路由worker/index.ts借助IMAGES绑定按请求宽度/格式实时转换图片且带安全头.svg默认直接透传不做优化。两条部署路径怎么选维度GitHub PagesCloudflare Workers成本免费免费额度内基本免费部署产物纯静态out/目录Workers 运行时 绑定D1 数据库❌✅服务端图片优化❌✅上线方式push 即部署Actionsnpm run build 平台部署适用场景演示站、个人主页、作品集需要数据与完整功能的生产应用新手建议先跑npm run build:pages GitHub Pages 体验零服务器部署等需要持久化数据时再切换到 Workers 路径代码完全不用改只是换一套构建命令。常见问题 Q1为什么静态版本没有音频文件也能播放撕拉声音频在构建期被内联进 JS 包见 next.config.ts 的 webpack 规则public/里自然看不到单独的音频请求。Q2部署后想把这个贴纸嵌入自己的博客/网站直接使用public/embed/sticker-forge.es.js注册的sticker-forgeWeb Component参考 examples/embed.html 的独立页面示例即可两条部署路径产出的站点都自带该文件。Q3npm run dev报 Node 版本错误升级到 Node 22.13.0 或更高版本——这是两条部署路径共同的硬性要求。到这里你已经掌握了 Sticker Forge 从本地构建到 GitHub Pages 自动上线、再到 Cloudflare Workers 全功能部署的完整链路。选一条路径npm install之后几分钟内就能拥有属于自己的贴纸工坊 ✨。赞分享【免费下载链接】sticker-forgeA tactile WebGL sticker maker with rich text, image uploads, and interactive peel physics.项目地址https://gitcode.com/gh_mirrors/st/sticker-forge点击查看免费下载相关推荐我的Quarkdown网站我的Quarkdown网站 这是使用Quarkdown创建的静态网站将部署到GitHub Pages。 编译Quarkdown文档为静态HTML 使用Quar文档CLI开发工具Agent Orchestrator Landing 站点部署实战GitHub Pages 静态导出 Cloudflare 域名迁移与缓存调优Agent Orchestrator Landing 站点部署实战GitHub Pages 静态导出 Cloudflare 域名迁移与缓存调优 本篇技术指解决Astro项目GitHub Pages部署的静态资源路径难题解决Astro项目GitHub Pages部署的静态资源路径难题 你是否在将Astro项目部署到GitHub Pages时遇到过静态资源加载失败的问题本文将从前端Web框架前端构建SSR静态站点上一篇CloudEvents 常见问题终极解决方案新手必看指南下一篇如何让微信聊天记录永不丢失这个免费开源工具让你真正拥有数据主权创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考