博客

教程、指南和产品动态。

开发者

如何发布用 ChatGPT 或 Claude 做的网站

2 11月 2026 2 分钟阅读
分享此文章

要发布 ChatGPT 或 Claude 为您写的网站,请把代码保存在一个名为 index.html 的文件中,把该文件上传到 GitHub,然后在服务器上的 Coolify 面板中选择这个仓库并部署。您的网站会出现在一个公开的 HTTPS 地址上,如果有自己的域名,还可以绑定。本指南假设这是您第一次操作,从头开始讲解每一个阶段。

首先,确认您手上有什么。在聊天中写出来的网站,通常是一个不需要构建的单个 HTML 文件,本指南讲的就是这种。如果回复中提到了 npm install、package.json 或 Next.js,那您拿到的是一个应用,我们的编程工具指南更适合您。

1. 要求生成单个文件

在聊天中发送下面这句话,这样就不用同时处理多个文件:

Give me this site as one index.html file. Keep the CSS and JavaScript inside that file. If you use images, tell me their file names.

2. 把文件保存到您的电脑上

  • ChatGPT:代码通常以代码块的形式出现在聊天中,请复制这个代码块。如果看到下载按钮,也可以用它。
  • Claude:网站常常以 artifact 的形式在聊天旁边打开。Anthropic 的文档介绍了 artifact 顶部用于查看、复制或下载代码的控件。用模板制作的设计带有 Export,可以给您独立的 HTML 或 .zip。

如果您复制了代码,请把它粘贴到文本编辑器中,保存为 index.html。在 Windows 记事本中,请把文件类型设为“所有文件”,否则文件名会以 .txt 结尾。在 Mac 的“文本编辑”中,请先切换到纯文本。双击这个文件,您的网站应该会在浏览器中打开。图片请放在同一个文件夹里。

3. 把文件上传到 GitHub

服务器从 GitHub 上的一个仓库获取您的网站,仓库就像是存放文件的文件夹。

  1. 创建一个 GitHub 账户。在右上角选择 New repository。
  2. 给它起一个简短的名字,把可见性设为 Public,打开 Add README,点击 Create repository。
  3. 在文件列表上方打开 Add file 菜单,选择 Upload files,拖入 index.html 和您的图片,然后点击 Commit changes。

任何人都能看到公开仓库,而 HTML 页面本来也对每位访问者可见。所以千万不要在里面放密码或 API 密钥。

4. 订购服务器

从 Next.js VPS 页面或 Coolify VPS 页面订购。两者都自带 Coolify 部署面板。纯 HTML 网站没有构建步骤,所以不需要 Next.js 那么多的内存,您可以在 Coolify 页面选择较小的配置。付款后,在您的 Seturack 面板中从我的服务器打开服务器,等概览标签页上的应用一行显示已就绪。

5. 在面板中部署

  1. 在概览标签页上,打开面板地址链接,用邮箱和密码两行的内容登录 Coolify。
  2. 在 Projects 页面打开 My first project 和 production,然后点击 New resource。这些名称是 Coolify 界面中的原文。
  3. 选择 Public Git Repository,输入您的 GitHub 仓库的地址,点击 Check repository。
  4. 在 Build pack 下选择 Static,让 Base Directory 保持为 /,点击 Continue。这个选项会原样发布文件,不做构建。
  5. 点击 Deploy。完成后,在 Domains 页面打开 HTTPS 地址。

就这样,您的网站上线了。root 权限在您手里,如果愿意,也可以全部在面板中管理。

编程工具可以替您完成

如果您打算经常修改网站,Claude Code 或 Cursor 这样的编程工具会让事情更轻松。在工具中打开存放 index.html 的文件夹,复制您的 Seturack 面板中的粘贴到您的 AI 工具一行并粘贴进去。工具会创建仓库、部署网站,并把地址交给您。详情见我们的编程工具指南。ChatGPT 和 Claude 的聊天窗口无法向服务器发送命令,所以不要把那段文字粘贴到那里。

值得了解的四件事

  • 表单:纯 HTML 的联系表单自己无法发送邮件。要接收消息,必须连接表单服务或服务器端代码。
  • 账户和支付:登录、存储记录和支付都需要服务器端代码和数据库。到了那一步,您的网站就成了应用。
  • 文件名:服务器区分大小写。如果代码里写的是 logo.png,而文件是 Logo.PNG,图片就不会显示。
  • 备份:每日备份已包含在价格中,而您网站的主副本保存在 GitHub 上。

常见问题

简单的 HTML 网站需要多少 RAM?

没有构建时,网站本身要求很低,所以下限由 Coolify 决定。它的文档要求至少 2 个核心和 2 GB RAM。Next.js 选项因为构建而推荐更多:至少 4 GB RAM、2 vCore 和 40 GB 磁盘。

每月费用是多少?

Next.js 选项推荐的最低配置每月约 $6(含增值税),在土耳其以外以美元付款。更小的配置见价格页面。每日备份已包含在价格中,流量不限。域名是另外的费用,需要您在别处购买。

如何绑定我自己的域名?

在您的域名服务商处把 A 记录指向服务器的 IP 地址。在 Coolify 的 Domains 页面点击 Add domain,输入带 https 的域名,保存并点击 Redeploy。证书会自动签发。我们的域名文章讲解了 A 记录。

以后如何更新网站?

向 ChatGPT 或 Claude 提出修改要求,把新的 index.html 以相同的名称上传到 GitHub,然后在 Coolify 中点击 Redeploy。要在每次上传时都发布,请在 GitHub 上添加应用 Webhooks 页面中的地址,具体见我们的 Next.js 指南。

我需要数据库吗?

纯 HTML 网站不需要。要存储访问者数据,可以在同一台服务器的 Coolify 中创建 PostgreSQL,但您还需要服务器端代码来使用它。到了那个阶段,请转到我们的应用部署指南。

Seturack 上的现成方案: Next.js, Coolify.

评论0

暂无评论

成为第一个分享想法的人。

参与讨论

请登录或注册后发表评论。

不错过任何文章

通过电子邮件接收我们最新的教程、指南和产品资讯。

您已订阅我们的电子通讯。