用 Astro 静态站展示 ComfyUI 工作流模板，经 GitHub Actions 多环境部署与每日定时重建

方案简介

本方案来自 Comfy-Org/workflow_templates 仓库，其核心之一是一个独立的 Astro 静态站点（site/ 目录），用于以可浏览、可搜索的方式展示所有 ComfyUI 官方工作流模板，线上地址为 templates.comfy.org。该站包含 AI 生成的描述、多语言支持（11 种语言）、SEO 优化以及自动化内容流水线。

部署层面，仓库通过 GitHub Actions 将模板站发布到四种环境：生产（Production）、生产预览（Preview Prod）、测试预览（Preview Test）和 PR 预览（PR Preview）。生产环境只在 PyPI 发布或每日定时任务时重建，且只展示状态为 approved 的工作流；预览环境则展示全部工作流（pending、approved、rejected、deprecated），便于内部审核。该方案适合需要为大型模板/内容集合搭建展示门户并配套多环境 CI/CD 的团队。

亮点与能力

• 可浏览、可搜索的模板展示界面
• 11 种语言的 i18n 国际化支持
• AI 生成的模板描述
• SEO 优化
• 自动化内容流水线（prebuild 在 build 时自动运行）
• 四种部署环境（Production / Preview Prod / Preview Test / PR Preview）
• 每日 00:00 UTC 定时重建
• PR 级别一次性预览及带标签的每日预览

组成与分工

• Astro：SSG 静态站点生成器，构建模板展示站
• pnpm：站点依赖安装与脚本运行（dev/build）
• GitHub Actions：CI/CD 编排，负责 deploy-site.yml、cron-rebuild-site.yml、preview-site.yml、preview-cron.yml 等工作流
• PyPI：版本发布（meta 包发布）触发生产部署
• Vercel：承载预览环境，通过 --prod 标志与 alias secret（如 VERCEL_PREVIEW_ALIAS）区分环境
• hub API：提供工作流索引与状态（approved/pending 等），由 PUBLIC_APPROVED_ONLY 控制过滤

前置要求

• 本地开发需要 pnpm 与 Node 环境（仓库以 npm scripts 提供校验命令）
• Python 环境（用于 sync 脚本与包发布）
• 部署侧需要配置 Vercel flag 与 alias secret、GitHub Actions 工作流

本地启动站点的命令（材料原文）：

bash
cd site
pnpm install
pnpm run dev # Start dev server at localhost:4321
pnpm run build # Production build (runs prebuild pipeline automatically)

校验节点兼容性：

bash
npm run validate:comfyui-nodes

实施步骤

1. 克隆并进入 site 目录

bash
cd site

2. 安装依赖

bash
pnpm install

3. 本地开发

bash
pnpm run dev # Start dev server at localhost:4321

4. 生产构建

bash
pnpm run build # Production build (runs prebuild pipeline automatically)

构建会自动运行 prebuild 流水线。构建时通过 PUBLIC_APPROVED_ONLY 环境变量控制是否只包含 approved 状态的工作流：预览环境不设置该变量以展示全部工作流。

5. 部署

生产部署由 PyPI 发布触发 deploy-site.yml（需人工批准），每日 00:00 UTC 由 cron-rebuild-site.yml 重建生产；PR 更新触发 preview-site.yml 一次性 PR 预览，带 preview-cron 标签的 PR 及主分支每日由 preview-cron.yml 构建预览环境。

使用与配置要点

模板贡献工作流（以 Wan 文生视频为例）

1. 配置 ComfyUI_frontend 开发环境，在 ComfyUI_frontend/.env 中加入 DISABLE_TEMPLATES_PROXY=true，用 npm run dev 启动开发服务器，并把本仓库的 templates 文件夹复制到 ComfyUI_frontend/public。
2. 获取工作流：用 ComfyUI 中 Save => Export 导出，或从已有工作流/图片中提取（可使用 comfyui-embedded-workflow-editor 工具从视频/图片拖入提取 workflow ）。
3. 获取缩略图：理想情况下直接使用工作流首次执行的输出；视频类模板可使用 webp 动图。
4. 选择缩略图类型（Image/Video/Audio）与悬停效果（Compare Slider/Hover Dissolve/Hover Zoom）。
5. 压缩资源：缩略图不会占满屏幕，可降低尺寸并转换为 webp 或 jpeg 等高效格式（如有损压缩可按 65% 质量转换）。

注意事项与常见问题

• 生产部署（deploy-site.yml 与 cron-rebuild-site.yml）均需人工批准（approved only）
• 视频缩略图必须先转换为 webp 格式
• 生成工作流文件时建议用 --disable-all-custom-nodes 启动 ComfyUI，防止自定义扩展写入元数据
• 预览环境不设置 PUBLIC_APPROVED_ONLY，会展示 pending/rejected/deprecated 等全部状态，仅供内部审核
• PR 每日预览需要打上 preview-cron 标签

优缺点

• ✓ 四种部署环境分离，预览与生产隔离
• ✓ 每日自动重建保证内容新鲜
• ✕ 生产部署需人工批准
• ✕ 仅展示 approved 状态工作流

出处

本方案挖掘自开源项目 Comfy-Org/workflow_templates，方案内容与实施命令均来自其 README 原文。