前言

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

一、前期准备

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 登录 Netlify 官网，点击首页创建站点。 

   

2. 选择代码来源：勾选 GitHub 授权登录，允许 Netlify 读取你的 GitHub 仓库。 

   

3. 在仓库列表中，选中本次要部署的 GitHub 项目。

   

4. 自定义填写站点名称、部署分支（默认main主分支即可），确认配置并开始部署。

   

5. 等待几秒自动构建，页面提示部署成功即代表上线完成。 

   

4.2 访问默认域名

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

plaintext

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

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

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

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

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

5.1 进入域名管理面板

1. 在 Netlify 项目后台，找到并进入 Domain management（域名管理） 菜单。
2. 点击页面中的 Add a domain（添加域名） 按钮。

   

3. 可选择在平台内直接购买新域名，或添加已在外网购买好的域名（本文以自有域名为例）。 

   

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

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

1. 配置子域名 

   

2. 配置主域名 

   

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

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

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

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

   

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

   

等待域名解析全网生效（一般几分钟～半小时），之后即可使用自有域名正常访问项目。

未完待续