AI 辅助开发全流程：从 GitHub 建项目到 Netlify 线上部署（超详细新手教程）

tjh0001

237人浏览 · 2026-06-01 20:33:26

tjh0001 · 2026-06-01 20:33:26 发布

前言

当下借助 AI 开发工具可以极大提升项目搭建、代码编写与迭代效率，本文结合Trae Solo CN、Cursor等主流 AI 代码编辑器，搭配 GitHub 代码托管、Netlify 静态部署平台，完整演示从 0 创建项目→本地开发→云端部署→自定义域名的全流程，步骤清晰、图文配套，新手也能一键上手。

一、前期准备

提前注册好两个平台账号：

GitHub（代码仓库，用于存放项目源码）
Netlify（免费静态网站部署平台，提供默认域名，支持绑定自有域名）

二、第一步：GitHub 创建远程项目仓库

登录 GitHub 官网，点击右上角新建仓库按钮，创建一个空白项目。
按需填写仓库名称、简介，选择公开 / 私有权限，完成仓库创建。

三、第二步：将 GitHub 项目拉取到本地（两种方式）

根据使用工具不同，分为传统 Git 拉取和AI 编辑器直连两种方案，按需选择即可。

方案 1：传统方式（Sourcetree / Git 命令行）

适合习惯图形化 Git 工具或命令行的开发者：

复制刚创建的 GitHub 仓库地址。
使用 Sourcetree 等可视化 Git 工具，执行克隆仓库；也可打开终端，执行 Git 克隆指令，将远程项目下载至本地指定文件夹。

方案 2：AI 编辑器直连（推荐：Trae Solo CN / Cursor）

无需手动克隆，AI 编辑器可直接关联 GitHub 仓库，操作更简洁，也是本文主力演示方案：

打开 Trae Solo CN / Cursor 编辑器。
在启动页选择关联 GitHub 仓库，授权登录个人 GitHub 账号。
在仓库列表中选中上一步新建的项目，一键打开项目。
进入项目后，即可使用编辑器内置 AI 能力，完成项目初始化、代码编写、功能迭代、bug 修复等全流程开发工作。

小贴士：全程依托 AI 辅助开发，大幅降低编码门槛，适合快速落地原型、个人项目、演示站点。

四、第三步：Netlify 线上部署项目（核心流程）

项目本地开发完成后，我们通过 Netlify 实现一键线上发布，平台提供免费额度，个人小型项目完全够用。

4.1 导入 GitHub 项目并初始化部署

登录 Netlify 官网，点击首页创建站点。
选择代码来源：勾选 GitHub 授权登录，允许 Netlify 读取你的 GitHub 仓库。
在仓库列表中，选中本次要部署的 GitHub 项目。
自定义填写站点名称、部署分支（默认main主分支即可），确认配置并开始部署。
等待几秒自动构建，页面提示部署成功即代表上线完成。

4.2 访问默认域名

部署成功后，Netlify 会自动分配官方默认域名，格式如下：

plaintext

https://你的项目名.netlify.app

复制链接即可在浏览器直接访问线上项目，如果不需要自定义域名，到此整个流程就全部结束。

⚠️ 重要提醒： Trae、Cursor 等工具开启 GitHub 自动推送后，每一次向main分支提交代码，Netlify 都会触发自动重新部署。频繁调试会快速消耗免费额度，开发阶段建议暂时关闭自动推送。

五、第四步：绑定自有域名（可选）

若想使用自己购买的独立域名，可通过 Netlify 的域名管理功能配置，支持主域名和子域名两种形式。

5.1 进入域名管理面板

在 Netlify 项目后台，找到并进入 Domain management（域名管理） 菜单。
点击页面中的 Add a domain（添加域名） 按钮。
可选择在平台内直接购买新域名，或添加已在外网购买好的域名（本文以自有域名为例）。

5.2 区分配置：子域名 / 主域名

根据自身需求选择对应解析方案，解析记录参数为平台固定值，无需手动修改。

配置子域名
配置主域名

5.3 域名服务商后台修改 DNS 解析

登录你购买域名的服务商后台（阿里云、腾讯云、华为云等），按照上面的解析参数，新增 / 修改域名 DNS 解析记录。

六、第五步：验证 DNS 配置生效

6.1 回到 Netlify 域名管理页面，点击验证 DNS按钮，等待系统检测。

6.2 页面显示 DNS 配置成功，代表域名解析生效。

PS：Netlify 近期更新了验证要求，需要添加A记录，添加方式如下：

操作项	具体配置	说明
1. 登录控制台	登录你的域名注册商（阿里云/万网）管理后台，进入云解析DNS控制台。
2. 进入解析设置	在域名列表里找到根域名 XXX`.com`，点击其右侧的 “解析设置”。
3. 添加记录	点击 “添加记录” 按钮。
4. 填写记录类型	在“记录类型”下拉菜单中，选择 `A`。	A记录用于将域名指向一个IPv4地址。
5. 填写主机记录	在“主机记录”输入框中，填写 `@`。	`@` 在这里代表你的根域名 `XXX.com` 本身。
6. 填写记录值	在“记录值”输入框中，填写 `75.2.60.5`。	这是Netlify官方提供的负载均衡器IP地址，用于根域名的A记录。
7. 确认并保存	其他选项（如TTL）保持默认即可，点击 “确认” 保存。

6.3 如果添加了A记录DNS配置还是与1中的截图一致，那么就回到第四步中的5.1将添加的域名删除重新添加即可

七、第六步：给项目添加表单

7.1 首先进入Forms菜单开启表单收集功能，页面如下：

7.2 项目是纯静态页面，直接在页面合适的位置添加form标签，以及netlify属性。示例如下：

<form name="contact" netlify>
    <p>
        <label>Name <input type="text" name="name" /></label>
    </p>
    <p>
        <label>Email <input type="email" name="email" /></label>
    </p>
     <p>
        <button type="submit">Send</button>
    </p>
</form>

PS：添加完毕发版即可，无需额外操作

7.3 项目是单页应用（SPA），如vue、react等框架的实现

核心问题

Netlify Forms 在构建部署阶段扫描静态 HTML 文件来识别表单。Vue 单页应用中的表单是运行时动态渲染的，Netlify 构建时看不到，所以不会自动注册。

解决方案：字段配置 + 构建时自动生成静态表单

只维护一处字段配置，构建时自动生成 Netlify 需要的静态表单模板。

文件结构

项目根目录/
├── index.html # 主入口，干净无表单
├── netlify.toml # SPA 路由回退配置
├── package.json # build 脚本接入自动生成
├── scripts/
│ └── generate-netlify-forms.js # 构建时生成静态表单的脚本
├── public/
│ └── __forms.html # 自动生成的 Netlify 表单模板（gitignore）
└── src/
├── config/
│ └── feedbackForm.js # 唯一的字段配置源
└── views/
└── other/
└── Feedback.vue # 用户交互表单页面

第一步：字段配置 feedbackForm.js

这是唯一的字段维护位置。所有表单字段、类型、验证规则、初始值都在这里定义：

export const FEEDBACK_FORM_NAME = 'suggestion'

export const feedbackFields = [
  {
    key: 'type',           // 数据绑定 key
    name: 'feedback-type', // 提交给 Netlify 的字段名
    kind: 'select',        // 字段类型：input / textarea / select / rate
    initialValue: 'general',
    labelKey: 'tools.feedback.type',
    options: [...]
  },
  // ... 其他字段
]

新增字段只需在这里添加一项 ，页面 UI、提交数据、Netlify 静态表单都会自动同步。

第二步：构建脚本 generate-netlify-forms.js

读取 feedbackForm.js 的字段配置，自动生成 public/__forms.html ：

import { FEEDBACK_FORM_NAME, feedbackFields } from '../src/config/feedbackForm.js'

const html = `<!DOCTYPE html>
<html>
  <body>
    <form name="${FEEDBACK_FORM_NAME}" method="POST" data-netlify="true" hidden>
      <input type="hidden" name="form-name" value="${FEEDBACK_FORM_NAME}" />
      ${feedbackFields.map(getFieldMarkup).join('\n')}
    </form>
  </body>
</html>`

生成的 __forms.html 被 Netlify 构建时扫描到，从而注册表单。

第三步：构建命令 package.json

"build": "node scripts/generate-netlify-forms.js && vite build"

每次 npm run build 时，先生成静态表单模板，再执行 Vite 打包。

第四步：表单页面 Feedback.vue

关键点：

1. 使用单个原生 <form> ，不嵌套 <el-form>

<form
  class="feedback-form el-form el-form--default el-form--label-right"
  :name="FEEDBACK_FORM_NAME"
  method="POST"
  data-netlify="true"
  @submit.prevent="submit"
>

添加 el-form 的 CSS 类保持 Element Plus 样式， @submit.prevent 阻止默认跳转。

2. 字段从配置动态渲染

<el-form-item
  v-for="field in visibleFields"
  :key="field.key"
  :label="$t(field.labelKey)"
  label-width="120px"
>

3. AJAX 提交

const submit = async () => {
  const formData = new URLSearchParams()
  formData.append('form-name', FEEDBACK_FORM_NAME)
  feedbackFields.forEach((field) => {
    formData.append(field.name, form[field.key])
  })
  
  await fetch('/__forms.html', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: formData.toString()
  })
}

使用 URLSearchParams + application/x-www-form-urlencoded 格式，提交到 __forms.html 。

第五步：SPA 路由回退 netlify.toml

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

确保刷新 /other/feedback 等前端路由时不 404。

第六步：忽略构建产物 .gitignore

public/__forms.html

__forms.html 是构建产物，由脚本自动生成，不需提交到 Git。

数据流总览

feedbackForm.js (唯一配置源)
│
├──→ Feedback.vue (动态渲染 UI + 用户填写)
│ │
│ └──→ fetch('/__forms.html') (AJAX 提交)
│ │
└──→ generate-netlify-forms.js (构建时)
│
└──→ public/__forms.html (Netlify 扫描，注册表单)

注意事项

Netlify 后台需开启 Form detection
每次修改字段后需重新部署，Netlify 部署时扫描 __forms.html
表单 name 必须一致： feedbackForm.js 中的 FEEDBACK_FORM_NAME 、 __forms.html 中的 <form name> 、 fetch 中的 form-name 三者必须一致
不要用 FormData 直接提交（无文件上传时），用 URLSearchParams + application/x-www-form-urlencoded 更稳定

八、第七步(可选)：让搜索引擎找到并收录你的网站，是流量的基础（以下内容都需科学上网）

8.1 登录 Google Search Console 验证网站所有权

8.1.1 选择资源类型（我这里以网域为例）；

🌐 选项一：网域（推荐）

覆盖范围：覆盖整个域名下的所有内容，包括所有子域名（比如 www.、m.、blog.、shop. 等）和所有协议（http 和 https）。
验证方式：必须通过 DNS 验证（在域名购买商的管理后台添加一条 TXT 解析记录）。
优点：一次验证，管所有子域名，最适合你这种未来可能会扩展子站点的场景。
缺点：需要去域名注册商后台操作 DNS，稍微偏技术一点点。

📂 选项二：网址前缀

覆盖范围：只覆盖你输入的那个精确的网址。
- 如果你输入 https://a.xxx.com/，它就只管这个地址。
- http://a.xxx.com/ 或 https://www.a.xxx.com/ 都不会包含在内，需要分别验证。
验证方式：有多种方式可选，包括上传 HTML 文件（例如 googlebf1d111111111.html）。
优点：不需要操作 DNS，上传文件或添加 meta 标签就可以完成，非常简单快捷。
缺点：范围窄，如果你以后加了子域名，需要重新验证。

8.1.2 输入域名`.com`（不要带 `https://`）确定。

8.1.3 复制 TXT 记录到域名提供商中对应域名的解析记录中添加，这里以腾讯云为例展示。

字段	填写内容	说明
主机记录	`@`	表示主域名本身
记录类型	`TXT`	下拉选择
线路类型	默认	保持默认即可
记录值	粘贴你从 Google 复制的那一串	类似 `google-site-verification=xxxxx`
权重 / 优先级	不填或保持默认	不用管
TTL	`600` 或默认	保持默认即可

8.1.4 回到 Google Search Console 验证

添加完成后，等待 1-3 分钟（腾讯云生效很快），回到 Google Search Console，点击 “验证” 按钮，正常情况下几秒钟内就能通过。

8.2 在 Search Console 中提交 Sitemap

8.2.1 需要将 sitemap.xml 文件放到主域名下的项目中。如果没有项目新建一个内容只需要放置 sitemap.xml 文件即可，项目新建发布流程参考上面 👆。

静态页面：根目录
SPA 单页应用：放在 public/ 目录下

<!----------------sitemap.xml文件内容------------------->
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://子域名.com/sitemap.xml</loc>
    <lastmod>2026-07-20</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://子域名.com/sitemap.xml</loc>
    <lastmod>2026-07-20</lastmod>
  </sitemap>
</sitemapindex>

九、第八步(可选)：帮你分析访客行为，了解流量来源和用户喜好（以下内容都需科学上网）

9.1 登录 Google Analytics 添加资源。

9.2 出现以下图片表示添加成功，开始添加 Google 代码

方案一：Netlify 代码注入

方案二：传统方式注入

静态页面：将 9.2 中的谷歌代码复制到入口html页面中 </head> 上方即可
SPA单页面：重复静态页面的操作，还需额外加下面代码添加路由监听

// 以Vue 3 + Vue Router为例
import router from './router'

// 监听路由变化，每次切换都发送 page_view
router.afterEach((to) => {
    if (typeof gtag === 'function') {
        gtag('config', 'G-XXX', {
            page_path: to.fullPath,
            page_title: to.name || to.path
        })
    }
})

// 如果是 React + React Router，可以在 App.js 中添加：
import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'

function App() {
  const location = useLocation()
  
  useEffect(() => {
    if (typeof gtag === 'function') {
      gtag('config', 'G-xxx', {
        page_path: location.pathname + location.search
      })
    }
  }, [location])
  
  // ... 其余代码
}

智能体开发者社区

中国智能体开发者社区，聚焦智能体与大模型开发，提供前沿资讯、实用工具链、开源项目及行业案例。通过技术沙龙、开发者大赛等活动，促进经验交流与协作，助力开发者快速构建创新智能应用。

更多推荐

MCP协议开发实战：从零搭建AI Agent工具链

创建静态资源（如项目 README 文件）。创建动态资源（如实时系统状态）。在 Client 中请求并利用资源上下文。回顾 MCP 协议如何降低 AI Agent 开发门槛。当前生态的局限与未来的演进方向。鼓励读者基于此大纲进行实践，并参与开源贡献。

智能体开发者社区

AI Agent可观测性：破解多步推理黑盒

随着AI Agent在复杂任务中承担越来越多的决策角色，其内部的多步推理过程往往如同一个“黑盒”，难以理解、调试和信任。本文旨在探讨AI Agent可观测性（Observability）的核心概念、技术挑战与实践方案，为开发者提供一套系统的方法论和工具链，以“照亮”Agent的推理黑盒，实现对其行为、决策逻辑与内部状态的全面洞察。构建AI Agent的可观测性体系不再是“锦上添花”，而是保障其在大

智能体开发者社区

MCP协议开发实战：从零搭建AI Agent工具链

回顾：我们从协议概念到动手搭建了一个可用的MCP工具链。MCP的生态现状：官方与社区提供的Server示例（GitHub, Jira, Notion等）。未来方向：更复杂的工具编排、多模型协作、可视化工具开发平台。鼓励动手：鼓励读者基于此框架，开发解决自己实际问题的工具。

智能体开发者社区

所有评论(0)

查看更多评论

tjh0001

@qq_39748755

已为社区贡献1条内容

AI 辅助开发全流程：从 GitHub 建项目到 Netlify 线上部署（超详细新手教程）

tjh0001

前言

一、前期准备

二、第一步：GitHub 创建远程项目仓库

三、第二步：将 GitHub 项目拉取到本地（两种方式）

方案 1：传统方式（Sourcetree / Git 命令行）

方案 2：AI 编辑器直连（推荐：Trae Solo CN / Cursor）

四、第三步：Netlify 线上部署项目（核心流程）

4.1 导入 GitHub 项目并初始化部署

4.2 访问默认域名

五、第四步：绑定自有域名（可选）

5.1 进入域名管理面板

5.2 区分配置：子域名 / 主域名

5.3 域名服务商后台修改 DNS 解析

六、第五步：验证 DNS 配置生效

6.1 回到 Netlify 域名管理页面，点击验证 DNS按钮，等待系统检测。

6.2 页面显示 DNS 配置成功，代表域名解析生效。

6.3 如果添加了A记录DNS配置还是与1中的截图一致，那么就回到第四步中的5.1将添加的域名删除重新添加即可

七、第六步：给项目添加表单

7.1 首先进入Forms菜单开启表单收集功能，页面如下：

7.2 项目是纯静态页面，直接在页面合适的位置添加form标签，以及netlify属性。示例如下：

7.3 项目是单页应用（SPA），如vue、react等框架的实现

核心问题

解决方案：字段配置 + 构建时自动生成静态表单

文件结构

第一步：字段配置 feedbackForm.js

第二步：构建脚本 generate-netlify-forms.js

第三步：构建命令 package.json

第四步：表单页面 Feedback.vue

1. 使用单个原生 <form> ，不嵌套 <el-form>

2. 字段从配置动态渲染

3. AJAX 提交

第五步：SPA 路由回退 netlify.toml

第六步：忽略构建产物 .gitignore

数据流总览

注意事项

八、第七步(可选)：让搜索引擎找到并收录你的网站，是流量的基础（以下内容都需科学上网）

8.1 登录 Google Search Console 验证网站所有权

8.1.1 选择资源类型（我这里以网域为例）；

🌐 选项一：网域（推荐）

📂 选项二：网址前缀

8.1.2 输入 域名.com（不要带 https://）确定。

8.1.3 复制 TXT 记录到域名提供商中对应域名的解析记录中添加，这里以腾讯云为例展示。

8.1.4 回到 Google Search Console 验证

8.2 在 Search Console 中提交 Sitemap

8.2.1 需要将 sitemap.xml 文件放到主域名下的项目中。如果没有项目新建一个内容只需要放置 sitemap.xml 文件即可，项目新建发布流程参考上面 👆。

九、第八步(可选)：帮你分析访客行为，了解流量来源和用户喜好（以下内容都需科学上网）

9.1 登录 Google Analytics 添加资源。

9.2 出现以下图片表示添加成功，开始添加 Google 代码

方案一：Netlify 代码注入

方案二：传统方式注入

静态页面：将 9.2 中的谷歌代码复制到 入口html页面中 </head> 上方即可

SPA单页面：重复静态页面的操作，还需额外加下面代码添加路由监听

所有评论(0)

温馨提示：您尚未绑定手机号

tjh0001

8.1.2 输入域名`.com`（不要带 `https://`）确定。

静态页面：将 9.2 中的谷歌代码复制到入口html页面中 </head> 上方即可