从 Antigravity 到 GitHub，再到 Netlify：完整部署指南

🚀 从 Antigravity 到 GitHub，再到 Netlify：完整部署指南

适用于：Vite / React / 前端项目
作者：winfred

1. Antigravity 中的项目结构与 Git 初始化

Antigravity 的工作区本质上是一个本地项目文件夹，你可以像在 VS Code 中一样使用 Git。

1.1 初始化 Git 仓库

在 Antigravity 左侧点击Source Control（源代码管理）：

• 如果项目还没有 Git：点击Initialize Repository
• Antigravity 会自动创建.git文件夹

1.2 连接 GitHub 仓库

先在 GitHub 创建一个空仓库，例如：

https://github.com/use/my-antigravity-project.git

然后在 Antigravity 终端执行：

gitremoteaddorigin https://github.com/user/my-antigravity-project.git

如果之前设置过远程仓库，可以用：

gitremote set-url origin https://github.com/user/my-antigravity-project.git

1.3 提交并推送代码

gitadd.gitcommit -m"initial commit"gitpush -u origin main

如果你遇到：

Failed to connect to github.com port 443

说明网络无法访问 GitHub，需要代理或切换网络。

2. 项目在子目录时的正确结构

你的项目结构是：

my-antigravity-project/ └── TraeFolder/ └── movieapp/ ├── src/ ├── public/ ├── dist/ ├── package.json ├── vite.config.js └── ...

这意味着：

• 真正的前端项目在 movieapp 子目录中
• Netlify 默认不会进入子目录构建
• 必须通过netlify.toml指定 base 目录

3. 正确创建 netlify.toml（关键步骤）

3.1 netlify.toml 必须放在仓库根目录

正确位置：

my-antigravity-project/ netlify.toml ← 必须在这里 TraeFolder/ └── movieapp/

你之前把它放在movieapp/里，Netlify 完全不会读取，导致：

• 构建目录错误
• publish 目录错误
• redirect 不生效
• 最终访问 404

3.2 正确的 netlify.toml 内容

[build] base = "TraeFolder/movieapp" command = "npm run build" publish = "dist" [[redirects]] from = "/*" to = "/index.html" status = 200

解释：

• base：告诉 Netlify 进入子目录构建
• publish：Vite 的构建产物目录
• redirects：解决 React Router / Vite SPA 刷新 404 问题

4. 推送 netlify.toml 并触发部署

将文件移动到根目录后：

gitaddnetlify.tomlgitcommit -m"move netlify.toml to root"gitpush

Netlify 会自动重新部署。

部署成功后，你会看到：

• 正确识别 base 目录
• 正确构建 dist
• 正确处理 redirect
• 不再出现 404 页面

5. 在 Netlify 查看部署结果

进入 Netlify → 选择你的站点：

你会看到：

• Build logs（构建日志）
• Production deploys（生产部署）
• 访问 URL（例如https://benevolent-kulfi-824fad.netlify.app）

如果看到：

No redirect rules processed

说明你的 netlify.toml 没被读取（通常是放错位置）。

6. 在手机端查看部署结果

Netlify 部署成功后，你的网站就是一个公开 URL。

方法 1：直接在手机浏览器输入 URL

例如：

https://benevolent-kulfi-824fad.netlify.app

方法 2：从电脑复制 URL 发到手机

微信、iMessage、Telegram 都可以。

方法 3：扫描 Netlify 的二维码

在 Deploy 页面可能会显示二维码。

方法 4：添加到主屏幕

像一个独立 App 一样打开。

7. 常见问题与解决方案

❌ 访问网站出现 404

原因：缺少 SPA redirect
解决：在 netlify.toml 添加：

[[redirects]] from = "/*" to = "/index.html" status = 200

❌ Netlify 构建失败

原因：项目在子目录
解决：设置 base：

base = "TraeFolder/movieapp"

❌ git push 失败（443 错误）

原因：网络无法访问 GitHub
解决：使用代理或切换网络。

8. 完整流程总结（可作为 Checklist）

1. 在 Antigravity 初始化 Git
2. 创建 GitHub 仓库并连接
3. push 代码
4. 在仓库根目录创建 netlify.toml
5. 设置 base、publish、redirect
6. push netlify.toml
7. Netlify 自动部署
8. 手机端访问 Netlify URL