📋 目录
- 背景说明
- 整体流程 Overview
- 各个通项目在哪里找
- 第一步:打开 Genspark AI 开发者
- 第二步:将 GitHub 账号授权给 Genspark
- 第三步:导入项目(两种方案)
- 第四步:查看部署预览效果
- 第五步:保存代码修改
- 功能迭代代码提交攻略
- 后续更新版本代码攻略
- 常见问题 Q&A
💡 背景说明
在非技术员工电脑没有安装任何开发环境的情况下,使用 Genspark 部署项目并进行预览和测试,是跨部门员工之间沟通效率提升的关键。
✅ 此教程适用于:只需对项目效果进行展示和简单测试的非技术岗同学
❌ 不适用于:技术岗同学的正式开发部署(请找技术同学)
🗺️ 整体流程 Overview
📌 完整协作流程一览:
🚀 部署到 Genspark
→
🌿 创立自己仓库的分支
→
✏️ 自然语言修改
→
📤 提交至总仓库分支
→
🔍 评审
→
✅ 通过
→
🔀 推送到 main
→
⚙️ 开发
📁 各个通的项目在哪里找?
各个通的详细项目说明和相关资料,请查阅以下内部文档:
如需在 GitHub 上查看不同项目的代码仓库,可前往 SamZheng-Design 的 GitHub 主页,L2 开头的项目就是各个通的独立项目。
↑ SamZheng-Design 的 GitHub 主页,L2 开头的就是各个通
- 打开 Genspark,在左侧菜单找到并点击 「AI 开发者」
↑ 点击左侧的「AI 开发者」选项
- 进入后选择 「全栈网站或应用程序」(强烈建议选这个,GitHub 项目选项没有本地 preview 功能)
- ⚠️ 如果只想展示、不需要在线预览效果,才可以选 「现有 GitHub 项目」,但将无法使用本地 preview 预览功能
↑ 建议选「全栈网站或应用程序」;「现有 GitHub 项目」选项没有 preview 预览功能
- 如果还没有 GitHub 账号,先去 www.github.com 免费注册一个
- 进入 Genspark AI 开发者后,找到 GitHub 集成,点击 「先点击这里进行账号的授权和链接」
- 授权完成后,可以看到自己账号里的仓库列表
⚠️ 常见问题:No valid token 错误
如果看到如下图这种
No valid GitHub App installation token found 的错误,需要注意:
你下载 Genspark AI Developer 时使用的 GitHub 账号,和在 Genspark 中授权的 GitHub 账号必须是同一个。
解决方法:在点击授权之后,会跳转到 GitHub 登录界面,请用
当初下载 Genspark AI Developer 所使用的那个 GitHub 账号进行登录,登录后即可完成授权。
↑ 点击授权后可以看到自己账号里的仓库
💡 如果你的账号里已有正在开发或调整的项目,直接在列表里选择那个仓库就行,不需要填写 URL。
如果账号是新的、没有仓库,或者你需要部署别人账号下的项目,按下面两个方案操作:
首先,登陆 GitHub 找到那个人的主页,进入对应的仓库。
↑ 找到目标账号的主页,进入你要部署的仓库
📋 方案一:手动复制链接法
- 进入仓库,确认你要部署的分支(一个仓库可能有多个分支,对应不同功能版本)
↑ 点击分支下拉菜单,选择你需要的那个分支(比如 V5.0)
- 复制仓库的网址(切换分支后可以看到提交记录,方便确认这个分支是否正确)
↑ 点击「Code」→ 复制 HTTPS 地址(注意:不论哪个分支,地址都是一样的)
- 回到 Genspark,在对话框里输入:
请帮我把这个仓库的【分支名】分支的项目在我的账号创建一个仓库并部署一下:【粘贴仓库地址】
⚠️ 如果部署失败,重新做一次 GitHub 授权,或先手动在 GitHub 创建好仓库再告诉 Genspark:「帮我把这个仓库的 XXX 分支在我的账号的 YYY 仓库上传并部署一下」
⭐ 方案二:Fork 一键克隆法 推荐
无需复制链接、无需写复杂指令,最简单!
- 在 GitHub 目标项目页面,点击右上角的 「Fork」→「Create a new fork」,把项目克隆到你自己的账号下
↑ 点击「Fork」→「Create a new fork」
- 进入 Fork 配置页面,不要勾选「Copy the main branch only」(否则只能拿到主分支,不完整)
- 点击 「Create fork」
↑ 注意:不要勾选「Copy the main branch only」,然后点绿色按钮
- Fork 完成后,可以在你自己的 GitHub 主页看到这个仓库(会标注「Forked from xxx」)
↑ Fork 成功后,在你自己的主页就能看到这个项目(标注了来源)
- 回到 Genspark,选择你账号里刚 Fork 的那个仓库,在对话框输入:
帮我部署这个选中的仓库的【分支名】分支
- 连上仓库之后,输入上述部署指令(如「帮我部署这个选中的仓库的【分支名】分支」),Genspark 就会自动开始部署
↑ 确认仓库已选中,然后告诉 Genspark 你要部署哪个分支
- 等待片刻,点击上方的 「预览」 标签就可以看到项目效果!
↑ 部署成功!可以直接在预览界面里看到项目运行效果(如这里的「身份通」项目)
💡 如果 Genspark 提示你配置 Cloudflare,忽略它就好,沙盒内预览不需要真正托管到域名,临时链接够用了。真正的线上部署交给技术同学处理。
↑ 另一个部署案例:Cardi B 演唱会项目测算系统,直接在预览界面运行
- 只要有有效代码的修改,建议都在预览满意之后发一句:
把这部分修改代码上传仓库
新开一个分支上传
✅ Fork 出来的是你自己的副本,不会影响原来 SamZheng-Design 的代码,放心操作!
🔁 功能迭代代码提交攻略
在 Genspark 中完成修改或功能迭代后,按下面两种情况选择对应的提交方式:
🔧 小修改(Bug 修复、样式微调等)
直接推送到当前分支,并附上说明这次改了什么:
将当前代码修改推送到当前分支,将功能修改添加为 message 一起提交
💡 message 就是备注,方便以后回溯「这次改了什么」,建议写清楚,比如:「修复登录页按钮样式」
🚀 功能迭代(新功能、大改版等)建议新开分支
功能差异较大时,建议新开一个分支,避免覆盖原来的稳定版本:
新开一个分支 XXX,并将当前部署的代码上传
后续这个功能的相关修改,都在 XXX 分支上继续提交:
将当前代码修改推送到 XXX 分支,将功能修改添加为 message 一起提交
✅ 这样可以保留原分支的稳定版本,新功能在新分支独立开发,互不干扰!
🔄 后续更新版本代码攻略
如果原仓库有新版本代码更新,你需要把自己 Fork 来的仓库同步到最新版本,然后重新在 Genspark 中部署预览。
🔃 一键同步所有分支到原仓库最新版本
选中需要更新的 Genspark 窗口后,输入以下指令:
对这个仓库所有分支的代码都按照原仓库更新
💡 执行完毕后,你的 Fork 仓库中所有分支都会和原仓库保持一致,然后重新部署即可预览最新版本效果。
❓ 常见问题 Q&A
🔴 Q: 部署失败了怎么办?
A: 重新做一次 GitHub 授权,或者先手动在 GitHub 建好仓库,然后让 Genspark 往那个仓库部署。
🟡 Q: 我需要把项目真正上线到网站吗?
A: 不需要!预览用临时链接就够了。真正的线上部署(配置域名、Cloudflare 等)交给技术同学处理。
🟢 Q: 我会不会改坏原来的代码?
A: 不会!Fork 出来的是你账号下的独立副本,原仓库完全不受影响。
🔵 Q: 我不知道要部署哪个分支?
A: 在 GitHub 仓库里切换到某个分支后,可以看到提交记录的备注(message),从里面判断这个版本是什么功能。也可以问负责的技术同学。