无法自动连接Webflow与GitHub，需实现Webflow变更自动同步至GitHub

方案1：Webflow Webhook + GitHub Actions #

这是最直接的低代码方案，利用Webflow的事件触发机制结合GitHub自动化工作流实现同步：

1. 配置Webflow Webhook
   • 进入Webflow站点设置 →「集成」→「Webhooks」
   • 添加新Webhook，触发事件选择「站点导出完成」，目标URL填写你GitHub仓库的Actions webhook地址（仓库→「Settings」→「Webhooks」路径下生成）
   • 启用Webhook，确保Webflow能正常发送触发请求
2. 编写GitHub Actions工作流
   在仓库的.github/workflows/webflow-sync.yml中创建以下内容：

   name: Sync Webflow to GitHub
   on:
     repository_dispatch:
       types: [webflow_export]
     workflow_dispatch: # 支持手动触发
   jobs:
     sync:
       runs-on: ubuntu-latest
       steps:
         - name: Checkout repository
           uses: actions/checkout@v4
         - name: Download & extract Webflow export
           run: |
             curl -L -o webflow-export.zip "${{ github.event.client_payload.export_url }}"
             unzip webflow-export.zip -d webflow-static
         - name: Commit & push changes
           run: |
             git config --global user.name "GitHub Actions Bot"
             git config --global user.email "actions@github.com"
             git add webflow-static/
             git commit -m "Auto-sync Webflow changes $(date '+%Y-%m-%d %H:%M')"
             git push
   

   • 工作流会在Webflow完成导出后，自动下载导出包、解压到指定目录（如webflow-static），再提交推送到仓库
   • 若需整合React组件，可在工作流中添加步骤，将Webflow静态资源移动到React项目的public或专属组件目录，避免覆盖自定义React代码

方案2：第三方自动化工具（Zapier/Make） #

适合无代码需求的场景，通过可视化流程连接Webflow与GitHub：

• 新建自动化流程，触发条件选择「Webflow → 站点更新/导出完成」
• 添加动作步骤「GitHub → 上传文件/推送代码」，配置将Webflow导出的代码包解压后同步到指定仓库分支
• 可设置过滤条件，比如仅同步特定页面的变更，或在同步前自动处理React组件的整合逻辑

方案3：自定义脚本+定时任务 #

适合需要深度定制逻辑（如与React组件紧密整合）的场景：

1. 编写Node.js脚本
   利用Webflow API导出站点代码，通过Git命令完成提交推送：

   const { Webflow } = require('webflow-api');
   const { execSync } = require('child_process');
   
   const webflow = new Webflow({ token: '你的Webflow API令牌' });
   const siteId = '你的Webflow站点ID';
   
   async function syncWebflowToGitHub() {
     // 触发站点导出
     const exportResult = await webflow.sites.export(siteId);
     // 下载并解压导出包
     execSync(`curl -L -o webflow-export.zip ${exportResult.exportUrl}`);
     execSync('unzip webflow-export.zip -d webflow-static');
     // Git提交推送
     execSync('git add webflow-static/ && git commit -m "Auto-sync Webflow changes" && git push');
   }
   
   syncWebflowToGitHub();
   

2. 定时执行脚本
   • 可通过GitHub Actions的定时触发（在workflow中添加schedule: - cron: "0 */4 * * *"），每4小时同步一次
   • 也可在自有服务器上用cron定时运行脚本

注意事项 #

• 确保Webflow API令牌拥有「站点导出」权限，GitHub令牌拥有「仓库写入」权限
• 规划好Webflow静态代码与React组件的目录结构，避免自动同步时覆盖自定义React代码
• 测试同步流程，确保Webflow的样式、资源路径与React项目兼容

内容的提问来源于stack exchange，提问作者Jithin K George