以前做外贸独立站，通常要找人开发，或者自己装 WordPress、配主题和插件。现在用 AI 编程代理，可以直接用中文描述需求，看着页面提修改意见，把站一点点做出来。

这篇文章以外贸独立站为例，直接让 AI 编程代理做出首页、产品、关于和联系方式几个栏目。模板用 Envato Elements，域名注册和网站托管都放在 Cloudflare 上。

先说句大实话：AI 代理不是魔法。它擅长改已有模板、照截图从零做页面、跑命令和部署；但完整的产品库、询盘系统、在线支付这些，仍要专业栈或后续扩展。下面把能做的和做不了的都讲清楚。

先选路线：两种建站方式怎么选

开始之前，先判断你要的是哪一种，避免做到一半发现路线不对。

  • 路线 A：模板 + Vite + Cloudflare。适合品牌展示站、产品落地页、轻量独立站。页面做好后上传到 Cloudflare，省去租服务器、装系统的过程。会员、支付、内容管理后台留作后续扩展。本文走的就是这个。
  • 路线 B：Hexo / WordPress / WooCommerce。适合内容型站点、电商型独立站，需要 CMS、产品库、询盘和支付。我自己的博客就是 Hexo 这套，内容管理和 SEO 更顺手，但上手比路线 A 重。

如果你现在只是想先有个能对外展示的品牌站、落地页，路线 A 最快；后面要做询盘转化、产品目录，再迁移或扩展。下面以路线 A 完整演示。

AI 编程代理改页面预览示意

一、准备工作

这次采用静态网站方案，适合个人主页、作品集和文章展示。页面制作好后上传到 Cloudflare，省去租服务器、安装系统的过程。

1. 装好 AI 编程代理

以 Codex 为例：通过 OpenAI 官方入口安装客户端，登录有 Codex 使用权限的账户。Codex 能打开本地文件夹、执行命令。

使用整合后的 ChatGPT 桌面应用，在左上角切换到 Codex 即可。2026 年起 Codex 已阶段性纳入 ChatGPT Free 和 Go 套餐，Plus、Pro、Business、Edu 额度更高——也就是说不完全是付费专属，新手也能先试试。

除了 Codex，ChatGPT、Cursor、Claude 这类能读写本地文件、跑命令的编程代理都能走同一套流程，下面统一叫「AI 代理」。

2. 安装 Node.js

网站在电脑上预览、生成上线文件，都要用到开发工具。这里先装 Node.js，它附带的 npm 负责下载项目需要的软件包。

打开 Node.js 官网，选 LTS 长期支持版，下载对应系统的安装包并完成安装。

Windows 打开「命令提示符」，Mac 打开「终端」，分别执行：

1
2
node --version
npm --version

都能显示版本号，安装就完成了。遇到「找不到命令」，先重新打开终端再试。

后面用的 Wrangler 部署工具支持 Windows 11、macOS 13.5 及以上等环境。

3. 准备 Cloudflare 账户和网站资料

推荐用 Cloudflare 买域名、托管网站。网站采用 Cloudflare 的静态文件托管，免费档每天 10 万次请求，个人品牌站和轻量独立站基本够用；超出按量计费，单价很低。后续加动态功能时，再按所用服务核算费用。

另外，整理好建站的素材和资料。网站参考模板推荐去 Envato 上看看。找到满意的模板后，复制网站模板 ID，可到某宝上以非常低的价格获得正版使用。或者直接参考我找到的一些模板，网址如下：

二、在 Cloudflare 注册域名

打开 Cloudflare 控制台，登录并完成邮箱验证，接着注册域名：

  1. 进入 Domain Registration → Register Domains（域名注册）。
  2. 搜索想注册的名称，选择可购买的域名。
  3. 点击 Purchase（购买），选择注册年限。
  4. 核对注册费用和续费安排，填联系人、地址及付款信息。
  5. 完成购买，按邮件提示完成后续验证。

联系人资料按真实信息填，中文信息可根据表单要求转成拼音或英文。购买成功后，域名会出现在账户中。

域名注册好后，可直接用 Cloudflare 的 DNS 服务。

三、选择网站模板，优先找 HTML 版

这里推荐选 HTML 模板：下载后有现成的网页、样式和脚本，适合修改后直接部署。

打开 Envato Elements → Web Templates，可以搜索：

  • portfolio html：作品集
  • personal website html：个人网站
  • agency html：工作室、企业展示

商品详情里的文件类型，是选购时首先要看的地方：

模板类型包含什么使用方法
HTML / HTML5网页、样式、脚本适合本文，交给 AI 代理修改
React / Next.js网站项目源码AI 代理可以处理，部署方式需结合项目检查
WordPress ThemeWordPress 主题安装到 WordPress 环境中使用
Elementor Template KitElementor 页面套件配合 WordPress、Elementor 和所需插件使用
Figma / PSD页面设计稿作为设计参考，再由 AI 代理编写网页

下载 WordPress 主题后，需要另外准备 WordPress 环境。本文是搭静态网站，用 HTML 版就够了。

挑中模板后，打开演示站，看文章列表、正文页和手机版。如果你准备长期写文章，正文的字号、行距和栏目安排也要关注，包括演示页里的照片、字体、视频，以及留言和预约功能。有的图片只用于展示，有的表单需要另外接入接收服务。

如果你有自己的设计想法，可以给 AI 代理几张参考截图，让它从零制作。比如参考某个站点的配色和导航，文字、图片用自己的资料。

四、把模板和资料放进项目文件夹

在桌面新建 my-website 文件夹，按下面的结构存放文件：

1
2
3
4
5
6
7
my-website/
├── materials/             文字和图片资料
│   ├── profile.txt        个人介绍和网站要求
│   ├── articles/          文章原稿
│   └── images/            头像、作品图、二维码
├── template-original/     解压后的原始模板
└── site/                  AI 代理制作网站的目录

原始模板保留在 template-original，修改后的网页放进 site。不用模板时，前一个文件夹留空。

profile.txt 用记事本或纯文本编辑器填即可。外贸独立站可以参考下面的写法：

1
2
3
4
5
6
7
8
网站名称：XXX Trading Co.
内容方向：工业品出口、产品案例、公司实力
面向读者：海外采购商、经销商
首页栏目：产品展示、关于我们、最新动态、联系方式
文章页面：标题、发布日期、摘要、正文
作品页面：产品图、规格说明、询价链接
风格：浅色背景，正文清楚，留白适中，少量动画
联系方式：填写准备公开的邮箱或社媒账号

介绍、经历、产品数据用自己的真实资料。缺少的内容让 AI 代理列出来，再补充。

这个文件夹只放建站需要的内容。账户密码、客户合同等另行保存；AI 代理用云端模型时，会处理任务所需的文件内容。

五、让 AI 代理看资料、做页面

打开 AI 代理，添加本地项目，选桌面的 my-website 文件夹。

先把这段话发进对话框：

请阅读当前项目中的资料和模板，给我一份网站制作方案。materials 是内容资料，template-original 是原始模板，site 是制作目录。请说明模板类型、运行要求，以及是否适合部署为 Cloudflare 静态网站。根据现有资料安排首页、产品页、关于页，列出缺少的内容。本轮只检查和规划，保持文件原样，等我确认方案后再制作。

看完 AI 代理给的方案，确认是否符合你的建站要求。想参考其他网站，可以把网址或截图一起发过去，加一句具体说明，比如：

参考这个网站的浅色背景、左侧导航和产品卡片。使用我的文字和图片，正文按中文长文重新排版。

AI 代理能用浏览器打开参考站。访问受限就手动补首页、正文页和手机版截图；要参考动画，再提供屏幕录像。

方案确定后，继续发这段话：

按确认的方案，在 site 目录制作网站。页面包括：首页、产品列表和正文、关于页、联系方式。使用现有资料，缺少的信息列出来等我补充。保留原始模板，在副本上修改，沿用适用的 HTML 结构。电脑和手机分别适配，重点处理中文正文和手机菜单。联系方式先使用公开邮箱和社媒链接。请配置 npm + Vite，提供以下命令：
npm run dev：开发预览
npm run build：生成上线文件
npm run preview：检查上线文件
采用多页面静态输出，网页和所需资源统一生成到 site/dist。每篇文章能独立打开和刷新，提供 404 页面。dist 只包含准备公开的网页资源，原始资料和模板包留在外面。完成后启动预览，检查页面和链接，说明测试结果与未完成项。本轮完成本地制作，正式发布等我确认。

Vite 负责本地预览和生成上线文件，具体配置由 AI 代理完成。后面命令都按这套项目结构执行。装依赖、启预览时，AI 代理可能申请操作权限，检查它准备执行的内容，在当前项目范围内授权即可。

六、打开网页，边看边改

第一版完成后，让 AI 代理启动预览，把地址发给你。自己运行也可以。

Mac 打开终端，进网站目录：

1
cd "$HOME/Desktop/my-website/site"

Windows 在文件管理器打开 site 文件夹，点地址栏，输入 cmd 回车，就在这个目录打开命令提示符。依次执行：

1
2
npm install
npm run dev

第一条装依赖，等完成再跑第二条。终端会给预览地址，通常类似 http://localhost:5173/。

复制地址在浏览器打开就能看到网页。localhost 是本机地址，供电脑预览用，对外访问的网址在部署后再绑域名。

预览期间保持终端运行，结束按 Ctrl + C。AI 代理已启动预览，可以直接打开它给的链接。

看完网页，修改意见一定要指出具体位置。比如：

  • 首页介绍区太高，缩短一些，让第一排产品卡片露出来。
  • 正文左对齐，保留目前的配色。
  • 手机上的产品标题挤成四行。调整卡片宽度和标题字号，把图片高度降一些。

每次调整一个区域，满意后再继续往下改。

Wrangler 部署终端与 Cloudflare 后台示意

七、生成上线文件，做最后一轮检查

页面调好，在 site 目录的终端按 Ctrl + C 停预览，然后执行：

1
2
npm run build
npm run preview

build 把网页整理到 site/dist 文件夹，这步叫构建。preview 用来查看构建结果，地址通常 http://localhost:4173/，以终端显示为准。

首页、产品等都能正常访问，就能进发布环节了。

上线检查可以交给 AI 代理：

请检查 site/dist 中的网站，修复以下问题：

  • 页面打不开、刷新报错、图片缺失、链接失效。
  • 示例文字、错误联系方式、手机页面溢出。
  • 浏览器脚本错误和资源加载失败。
  • 网页标题、简介和 404 页面缺失。
    确认 dist 中只有准备公开的内容，保留许可要求的署名和版权声明。联系表单如需外部服务，请说明目前是否已经接通。完成后列出检查结果，未测试的项目单独说明，等我确认后发布。

八、把网站部署到 Cloudflare

这里用 Cloudflare Workers Static Assets 托管网页，通过官方工具 Wrangler 上传文件，比较方便。

1. 安装 Wrangler

在 site 目录的终端停预览，依次执行：

1
2
npm install -D wrangler@latest
npx wrangler --version

显示版本号，说明安装完成。

2. 配置部署命令

把这段话发给 AI 代理：

请为 site 项目配置 Cloudflare Workers Static Assets。这是纯静态网站，构建输出是 site/dist。在 site 中创建或完善 wrangler.jsonc：name 使用 my-foreign-trade-site。compatibility_date 使用今天的日期。assets.directory 设置为 ./dist。为已经生成的 404.html 配置静态 404 行为。在现有 package.json 中加入 deploy 脚本：npm run build && wrangler deploy。保留已有配置，只补充所需内容。暂时只完成配置，等发布确认。部署前核对账户和项目名称；若存在同名项目，先问我怎么处理。

AI 代理会在 my-website 里的 site 文件夹创建 wrangler.jsonc。文件内容如下：

1
2
3
4
5
6
7
8
{
  "name": "my-foreign-trade-site",
  "compatibility_date": "2026-10-23",
  "assets": {
    "directory": "./dist",
    "not_found_handling": "404-page"
  }
}

里面有四项设置：

  1. name：给网站项目起名。示例 my-foreign-trade-site 可换成你的品牌名。发布后会在 Cloudflare 后台看到这个项目。首次建站取个与账户内其他项目不同的名；以后更新网站保留原名。买的域名后面单独绑。
  2. compatibility_date：设置兼容日期，确定项目采用的 Cloudflare 运行规则。首次创建让 AI 代理填当天日期；以后只更新文章、换图片，通常保持日期不变。
  3. directory：指定上传哪个文件夹。npm run build 后生成的网页、图片、样式都在 site/dist，填 ./dist 就是上传这份整理好的文件。
  4. not_found_handling：访客输错地址或打开已删文章时显示的提示。404-page 表示用网站里的 404.html 提示页。让 AI 代理确认构建后的 dist 已包含这个文件。

3. 登录账户并发布

回到 site 文件夹的终端，执行：

1
npx wrangler login

浏览器通常自动打开 Cloudflare 授权页。登录注册域名时用的账户，确认授权，返回终端。浏览器没自动开，复制终端显示的授权链接手动打开。密码和验证码在官方页填。

完成后，再执行一次：

1
npx wrangler login

这条用于查看当前登录信息，核对显示的邮箱和账户名，确认是准备放网站的账户。

4. 发布网站，取得访问链接

确认账户和项目名称后，在同一终端执行：

1
npm run deploy

deploy 脚本会先重新生成网站文件，再上传 dist 内容。构建报错直接把错误信息交给 AI 代理修，重跑这条命令。

首次发布可能提示设置 workers.dev 子域名，按提示填一个名称。部署完成，终端返回网站地址，类似：

1
https://my-foreign-trade-site.你的子域名.workers.dev

到这里，这个网址已可对外访问，网站文件由 Cloudflare 托管。

九、绑定自己的域名

网站发布后，把买的域名绑上去，访客就能通过自己的网址访问。

1. 在 Cloudflare 后台打开刚发布的网站

npm run deploy 成功后，Cloudflare 会保存上传的网站并建立项目。进入这个项目，为网站绑域名。

第一步：登录 Cloudflare，打开网站项目列表。左侧菜单找 Compute & AI，展开后选 Workers & Pages，列出当前账户下已建项目。

2. 添加自定义域

在项目页找 Custom Domains（自定义域），点 Add，输入你注册的域名（如 xxx-trading.com），按提示确认。

如果域名也是在 Cloudflare 注册的，DNS 记录会自动配好；如果是别的注册商，按 Cloudflare 提示去原注册商把 NS 或对应记录指向 Cloudflare。

3. 国内访问的备案现实

这里说句实话：如果域名最终解析到国内服务器，按要求需要备案；走 Cloudflare 境外节点一般不用备案，但国内访问速度要看实际线路。我自己的博客就是走境外托管，省了备案这一步，代价是国内部分地区速度要权衡。你按目标客户所在地选方案。

写在最后：AI 代理能干和干不了的

这趟跑下来，一个外贸品牌站从模板到 workers.dev 上线，核心操作基本都交给 AI 代理了，人只做描述需求、看页面、提修改。

它能干的：改模板、照截图从零做页面、跑 npm / Wrangler 命令、部署、绑域名、修 404 和图片缺失。

它干不了的（至少现在）：完整产品库和筛选、询盘系统落库、在线支付、多语言 SEO 架构。这些要么走路线 B（Hexo / WordPress 带 CMS），要么在 Cloudflare 上继续加 Workers、D1、Formspree 这类服务扩展。

所以这篇的定位很明确：给你一个最快把品牌站 / 落地页亮出来的方案。等你要正经收询盘、管产品，再往上加。先上线、先被看见，比纠结完美架构更重要。

自定义域名绑定 DNS 配置示意

常见问题（FAQ）

完全不会代码，真能做出来吗？
能。AI 编程代理负责写页面、跑命令、部署，你只描述需求、看页面提修改。模板和资料准备好，剩下交给它。
Cloudflare 托管真的免费吗？
免费档包含每天 10 万次请求，个人品牌站和轻量独立站基本够用；超出按量计费，单价很低。
这种站能当外贸独立站吗？
适合品牌展示、产品落地页、轻量独立站。要完整产品库、询盘系统、支付，建议走 Hexo / WordPress 等带 CMS 的路线。
模板从哪来，正版怎么算？
可以用 Envato Elements 等正版市场，也有免费开源模板和网盘分享的模板；按自己情况选，注意授权范围。
国内访问要备案吗？
域名若解析到国内服务器需要备案；走 Cloudflare 境外节点一般不用，但国内访问速度要看实际情况。