我如何在服务器上搭一个双语 AI 教程站（纯静态站点，附踩坑）

使用云服务器环境：宝塔面板(稳定版)v10.0.2-LTS、Nginx 1.31.2

近些年，AI 慢慢走进我们的生活，极大便利了我们去建设自己想要的代码工程。制作网站就是其中一个。

接下来我会以新手的方式一一教你们如何使用 AI 让它给你写一个网站。

一、准备事项

以下是需要用到的东西：1.一个好用的 AI 工具；2.一个云服务器；3.拥有一个自己的域名

二、域名

因为后面需要所以先介绍这个

推荐 Cloudflare，网站：https://www.cloudflare.com/ 仅推荐

登录 Cloudflare 之后，把域名放进这里

然后搜索框搜索 DNS

进入后点击这个添加

1 处填自己想要的前缀，2 处填自己云服务器的公网地址

最后点 Save 就可以了。

三、Trae 的使用

首先是 AI 工具，我因为环境原因选择使用 Trae，如果你的条件允许你可以使用其他好的 AI 工具。

以下是 Trae 设计的办法，如果没需要可以跳过这些步骤，选 Code 模式设计。

在这里你可以选择本地或者云端。目前只有本地才可以使用自己的模型。

输入自己的需求。

生成完后点击这里找源代码

代码都在这里第二个文件夹，第一个不是

选择下载全部后删掉 .trae 就可以了

注意这个需要反复修改，AI 很难一次性满足你的所有需求。

四、宝塔面板，部署网站

完成后把文件放进云服务器里，自己找一个地方放下。

之后左侧选「网站」点击。

点「添加站点」完成后就可以创建。

添加站点时填好信息，注意根目录的运行目录指向 dist。一开始从 Cloudflare 添加的域名放进域名栏，注意 PHP 版本别选 Node 项目，选「纯静态」，照片上的只是说明一下界面长什么样。

然后需要构建前端一下，不然就会像上图这样：

去往终端：

cd 你文件的地址
npm install
npm run build

还需要申请证书 SSL，选 Let’s Encrypt， 不然会报错显示不安全像这样：

注意：有一部分坑因为不同环境，所以可能不一样这里就不一一展示了。