如何把 Claude Artifact 发布成真正的网站
Claude 在 artifact 中帮你做了一个漂亮的网站。你点击“Publish”，得到的是一个嵌在 Anthropic 界面里的 claude.site 链接。用来展示演示很棒，但它不是你的网站。下面介绍如何把 Claude 生成的页面发布成拥有自己地址的真正网站。
Claude 确实非常擅长构建网页。让它做一个落地页、作品集或单页介绍，它就会生成一个完整的 artifact，你可以在对话中实时预览。它生成的代码是自包含的：HTML、CSS 和 JavaScript 都在一个文件里，这恰好是即时托管的理想格式。
问题出在最后一步。Claude 内置的 Publish 按钮生成的链接位于 Anthropic 自己的域名下，并嵌在其界面中。你无法把它放到自己的地址上，也无法完全掌控，一看就是“Claude 演示”而不是真正的网站。如果你想要真正能用的东西，无论是企业、作品集还是项目，都需要把这段 HTML 放到真正的托管服务上。好消息是：这大约只需要一分钟。
首先，从 Claude 中取出 HTML
Claude 提供了几种从 artifact 中提取原始代码的方法，任选其一即可：
- 复制按钮：在右侧 artifact 面板中，点击右上角的复制图标，把完整代码复制到剪贴板。
- 下载按钮：找到下载图标（向下箭头），Claude 会把 artifact 保存为
.html文件到下载文件夹。 - 直接询问：输入“给我这个 artifact 的完整 HTML”，Claude 会把完整代码贴到对话中。全选并复制即可。
提示：要求输出单个 HTML 文件
如果 Claude 用 React 构建了 artifact，可以让它“把它改成一个自包含的 HTML 文件，所有 CSS 和 JavaScript 都内联”。单个 HTML 文件最容易托管：无需构建或拼装，粘贴后立即可用。
分步指南：从 Claude artifact 到在线网站
复制 artifact 的 HTML
按上文所述，使用 Claude artifact 面板中的复制或下载按钮。确认你拿到的是完整页面：它应以 <!DOCTYPE html> 开头、以 </html> 结尾。
粘贴、保存、上线
打开编辑器，粘贴 artifact 的 HTML，然后点击保存。网站会立即在你自己的地址上线，并已配置好免费的 HTTPS 证书。没有 claude.site 外壳，也没有 Anthropic 界面，只有你的页面，出现在开放的互联网上。
Claude 的 Publish 与真正的托管有什么区别？
| Claude“Publish” | 真正的托管 | |
|---|---|---|
| 地址 | claude.site/...（Anthropic 的域名） | 你自己的名称 / 域名 |
| 看起来像 | 一个 Claude 演示 | 一个真正的网站 |
| 自定义域名 | 不支持 | 支持（付费方案） |
| 联系表单、统计 | 不支持 | 支持 |
| 完全掌控 | 有限 | 是，网站属于你 |
如果只是快速给同事看个演示，Claude 的 Publish 就够了。但凡是要当作真正网站使用的东西，比如印在名片上或发给客户的页面，都应该放在拥有自己地址的正规托管上。
之后的编辑与更新
因为 artifact 是单个自包含文件，更新非常简单。想改点什么？有两种方式：直接在 Hostilo 编辑器中修改代码并保存；或者回到 Claude 提出修改，复制新版本并覆盖旧代码。无论哪种方式，线上网站都会立即更新。很多人干脆在 Claude 中不断迭代并重新粘贴，这是最快的循环。
额外技巧：让 Claude（或你的 AI 智能体）替你发布
如果你经常使用 Claude，可以完全跳过复制粘贴：把 https://hostilo.app/mcp 添加为自定义连接器，登录后对 Claude 说“把这个发布为 my-page”（详见文档）。如果你使用 Cursor 或 Windsurf，还有另一种免动手的方式。Hostilo 提供面向 AI 智能体的 API，你的助手可以代你发布和更新网站：生成 API 密钥交给智能体，它就会直接部署，你完全不用打开控制面板。对大多数人来说复制粘贴已经足够，但如果你常年在 AI 编程工具里工作，这能让流程彻底闭环。
