如何发布用 ChatGPT 或 Claude 做的网站
要发布 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 上的一个仓库获取您的网站,仓库就像是存放文件的文件夹。
- 创建一个 GitHub 账户。在右上角选择 New repository。
- 给它起一个简短的名字,把可见性设为 Public,打开 Add README,点击 Create repository。
- 在文件列表上方打开 Add file 菜单,选择 Upload files,拖入
index.html和您的图片,然后点击 Commit changes。
任何人都能看到公开仓库,而 HTML 页面本来也对每位访问者可见。所以千万不要在里面放密码或 API 密钥。
4. 订购服务器
从 Next.js VPS 页面或 Coolify VPS 页面订购。两者都自带 Coolify 部署面板。纯 HTML 网站没有构建步骤,所以不需要 Next.js 那么多的内存,您可以在 Coolify 页面选择较小的配置。付款后,在您的 Seturack 面板中从我的服务器打开服务器,等概览标签页上的应用一行显示已就绪。
5. 在面板中部署
- 在概览标签页上,打开面板地址链接,用邮箱和密码两行的内容登录 Coolify。
- 在 Projects 页面打开 My first project 和 production,然后点击 New resource。这些名称是 Coolify 界面中的原文。
- 选择 Public Git Repository,输入您的 GitHub 仓库的地址,点击 Check repository。
- 在 Build pack 下选择 Static,让 Base Directory 保持为
/,点击 Continue。这个选项会原样发布文件,不做构建。 - 点击 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,但您还需要服务器端代码来使用它。到了那个阶段,请转到我们的应用部署指南。
评论0
暂无评论
成为第一个分享想法的人。
请登录或注册后发表评论。