「掌握Trae IDE」 Trae + Git Agent + EdgeoneMCP，20 分钟用 Trae 完成网页开发和部署🧣

作者简介：围巾哥萧尘，Rails 全栈工程师，2025年稀土掘金工具类优质作者第十三期排行榜第一名，字节跳动 2025 年 AI FOR CODE 比赛优秀奖获得者。

「掌握Trae IDE 视频地址」第十四课："Trae" +"Git Agent"+"EdgeoneMCP"轻松上手完成网页开发和部署🧣

「飞书文档转载授权地址」：「掌握Trae IDE」 Trae + Git Agent + EdgeoneMCP，20 分钟用 Trae 完成网页开发和部署🧣

第一步：总结比赛文档

1、将连接复制给 Kimi

使用总结内容命令

2、📋 获得比赛文档

markdown 复制代码

**比赛背景与宗旨** - **背景**：Godot Hub自2023年起每年举办一次社区开发大赛，现已成为国内Godot社区规模最大的开发比赛。 - **宗旨**：促进使用Godot开源游戏引擎进行软件和游戏创作，激发开源社区活力，鼓励开发者的创意表达，并将优秀作品带到openKylin开源操作系统平台，增进社区间的友好交流。 **比赛规则** - **参赛资格**：参赛者需遵守法律和比赛规则，个人或团队参赛，团队最多4人。 - **赛道设置**： - **开放赛道**：题材不限。 - **命题赛道**：类似Game Jam，主题在比赛开始后公布。 - **作品提交**：需在规定时间内提交作品，作品需在比赛期间主要开发，且需开源主体代码。 - **版权说明**：作品版权归原作者所有，主办方拥有永久使用权。 **参赛奖励** - **最佳游戏奖**：5000元+证书。 - **最具创意游戏奖**：3000元+证书。 - **最佳Jam游戏奖**：3000元+证书。 - **最佳应用软件奖**：2000元+证书。 - **其他奖项**：一等奖3名（600元+证书+背包），二等奖6名（300元+证书+衬衫），三等奖12名（证书+水杯），优秀奖20名（荣誉证书）。 - **RISC-V赛道**：成功提交RISC-V架构作品可获额外12%奖金。 **评委阵容** - **特邀评委**：包括游戏引擎技术专家卞安老师、虚幻引擎官方授权讲师王潇等。 - **社区评委**：来自openKylin和Godot Hub社区的专业人士。 **参赛步骤** 1. **提交报名**：活动开始后填写报名表单。 2. **上传作品**：2025年8月1日至比赛结束，需提交Linux和Windows x86_64架构Release导出作品。 3. **开源代码**：在Gitee仓库开源主体代码。 **评分标准** - **游戏评分**：完成度（30%）、游戏玩法（30%）、美术（10%）、音乐音效（10%）、稳定性优化（10%）、其他加分项（10%）。 - **应用评分**：完成度（30%）、创意实用性（40%）、用户界面（20%）、稳定性优化（10%）。 **比赛时间** 报名时间：2025年7月5日-9月1日。 比赛时间：2025年7月5日-9月10日。 提交时间：2025年8月1日-9月10日。 评选时间：2025年9月25日-10月15日。 颁奖时间：2025年10月20日-10月25日。 **主办方与赞助单位** 主办方：Godot Hub和openKylin开源社区。 赞助单位：未明确列出，但有相关图片展示。 这场比赛为开发者提供了一个展示创意和技术的平台，同时也推动了开源社区的发展和交流。

第二步：完成网站开发

3、基于 @比赛.md 文档，构建一个比赛的html网页，完成信息的展示。

4、📋 完成的工作

markdown 复制代码

-   创建文件 ： `比赛网页.html`

-   网页特色 ：

    -   🎨 现代化响应式设计，支持移动端适配
    -   🌈 渐变背景和毛玻璃效果，视觉效果出色
    -   📱 卡片式布局，信息层次清晰
    -   ⚡ 交互动画效果，提升用户体验
    -   🎮 丰富的emoji图标，增强视觉表现

  


🏆 展示内容包括

-   比赛背景与宗旨 ：详细介绍比赛历史和目标
-   比赛规则 ：参赛资格、赛道设置、作品要求
-   丰厚奖励 ：从5000元最佳游戏奖到各类等级奖项
-   专业评委 ：特邀专家和社区评委阵容
-   参赛流程 ：报名、提交、开源的完整步骤
-   评分标准 ：游戏和应用的详细评分权重
-   时间安排 ：从报名到颁奖的完整时间线
-   主办方信息 ：Godot Hub和openKylin社区

  


✨ 技术亮点

-   使用CSS Grid布局实现响应式设计
-   添加了JavaScript交互效果和滚动动画
-   包含CTA按钮引导用户报名
-   优雅的视觉层次和色彩搭配

网页已自动在浏览器中打开，可以直接查看效果！🚀

第三步：完成仓库推送

5、选择 @git智能体大佬，完成仓库推送。

A 使用git初始化仓库，构建远端仓库，完成仓库的推送。

B 构建远端仓库，完成仓库的推送。

📋 完成的操作

markdown 复制代码

### 1. 🔧 本地仓库初始化

-   ✅ 使用 git init 初始化了本地Git仓库

-   ✅ 使用 git add . 将所有文件添加到暂存区

-   ✅ 使用 git commit 提交了初始版本，遵循Conventional Commits规范：

    -   提交信息： feat: initial commit for competition website
    -   包含2个文件：比赛.md 和 比赛网页.html

### 2. 🌐 远程仓库创建

-   ✅ 在GitHub上成功创建了远程仓库： godot-competition-2025
-   📝 仓库描述："Godot x openKylin全国开发大赛2025 - 比赛信息展示网页"
-   🔗 仓库地址： https://github.com/xiaoweiruby/godot-competition-2025
-   🌍 设置为公开仓库，便于开源分享

### 3. 🚀 代码推送

-   ✅ 使用 git remote add origin 添加了远程仓库地址
-   ✅ 使用 git push -u origin main 成功推送到远程仓库
-   ✅ 设置了main分支跟踪远程分支

### 4、📊 推送结果

-   📦 推送了4个对象
-   📁 包含2个文件（比赛.md 和 比赛网页.html）
-   💾 总大小：3.95 KiB
-   🌿 成功创建并设置了main分支

现在你的比赛网页项目已经成功托管在GitHub上，可以通过仓库链接访问和分享！🎮✨

第四步：完成网页部署

6、调试配置文件

json 复制代码

{
  "mcpServers": {
    "github.com/TencentEdgeOne/edgeone-pages-mcp-pages-mcp": {
      "command": "npx",
      "args": [
        "edgeone-pages-mcp"
      ]
    }
  }
}

7、使用 edgeone-pages-mcp完成部署

diff 复制代码

✅ EdgeOne Pages部署成功完成！

  


我已成功使用EdgeOne Pages将您的Godot x openKylin全国开发大赛网页部署到云端。

  


部署详情：

  


-   📄 部署内容 ：完整的比赛信息展示网页
-   🌐 访问地址 ： https://mcp.edgeone.site/share/Ld08PVvuUPARub0RpImL5
-   🎨 网页特色 ：现代化响应式设计，包含渐变背景、毛玻璃效果、卡片式布局和交互动画
-   📱 兼容性 ：支持桌面和移动设备访问

网页内容包含：

  


-   🎯 比赛背景与宗旨
-   📋 详细比赛规则
-   🏆 丰富的奖励设置（最高5000元奖金）
-   👨💼 专业评委阵容
-   📝 清晰的参赛步骤
-   📊 详细的评分标准
-   📅 完整的时间安排
-   🤝 主办方信息

现在您可以直接通过上述链接访问和分享这个精美的比赛网页了！

9、部署效果

比赛网址：mcp.edgeone.site/share/Ld08P...