外贸独立站不会写代码？我用 AI 编程代理从模板到上线搭了一遍

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

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

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

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

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

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

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

一、准备工作

这次采用静态网站方案，适合个人主页、作品集和文章展示。页面制作好后上传到 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 打开「终端」，分别执行：

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

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

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

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

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

• Cloudflare：cloudflare.com
• Envato：elements.envato.com
• 免费网站模板：https://pan.quark.cn/s/dbf13e77e6fb

二、在 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：工作室、企业展示

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

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

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

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

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

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

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

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

介绍、经历、产品数据用自己的真实资料。缺少的内容让 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 打开终端，进网站目录：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

八、把网站部署到 Cloudflare

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

1. 安装 Wrangler

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

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

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. 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 文件夹的终端，执行：

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

完成后，再执行一次：

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

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

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

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

首次发布可能提示设置 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 这类服务扩展。

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