不会写代码也能做网站：Claude Code + 三种免费托管实测

很多人以为做个网站必须会写代码。实际上，只要会用自然语言描述需求，一个终端里的AI编程助手就能帮你生成完整的网页文件。真正卡住多数人的，不是「做不出来」，而是「怎么放上网让别人看到」——本地双击打开好好的页面，发给朋友却打不开，问题往往出在地址栏最前面那几个字符上。

这篇内容来自一位B站UP主的实操演示：用 Claude Code 做一张周末聚会邀请页，再分别走通三种免费托管方案。下面把整个流程拆开讲清楚，包括每条路的官方规则、免费额度，以及一个10秒钟就能做完的上线自检。

第一步：用大白话让 Claude Code 生成网页

Claude Code 是装在终端里的AI编程助手，你提需求，它负责写文件。UP主选择「邀请页」作为练手项目，理由是它天生就要发给别人——发不出去就失去了意义，正好拿来练习上线流程。

提需求要说清四件事

面向 Claude Code 的提示词需要覆盖：做什么、有什么内容、用什么技术、做成什么样子。演示中的具体要求是：周末聚会邀请页，包含活动名称、时间、地点、倒计时，下方一个「我要来」按钮，点击后显示感谢。

其中两句是专门为上线准备的：

• 只用 HTML、CSS 和 JavaScript——这样产出的是纯静态网页，不需要后台，三种托管方案都支持，最省事。
• 首页文件命名为 index.html——托管平台打开你的网址时，默认寻找的就是这个名字。GitHub 官方文档对此有明确说明，找不到就会返回 404。

回车之后，Claude Code 会请求创建文件的权限，同意即可。完成后文件夹里出现三个文件，双击 index.html，倒计时开始走动，点击按钮弹出感谢语。对按钮颜色不满意，在终端里用大白话提一句，刷新页面就能看到变化。

为什么本地打开不算「上线」

看一眼地址栏，最前面是 file:///，后面跟着你电脑里的路径。这说明网页只是躺在你书桌上的一件作品，只有坐在这台电脑前的人才看得到。把地址发给朋友，对方电脑上根本没有这个文件，自然打不开。

要让人看到，得把文件搬到一个24小时在线、任何人都能访问的地方——这就是托管，而托管平台分配给你的那个网址，就是你的门牌。

file:// 协议与 http(s):// 协议的本质区别

file:// 是浏览器用来访问本地磁盘文件的协议，它后面跟的是你电脑上的绝对路径，例如 file:///Users/你的名字/Desktop/invite/index.html。这个地址只在你的电脑上有效，因为文件只存在于你的硬盘里。当朋友在微信里点开这个链接时，他的浏览器会尝试在他自己的电脑上寻找同一个路径，自然找不到，于是显示「无法打开网页」或空白页。

http:// 和 https:// 则是网络协议，它们指向的是互联网上某台服务器的某个资源。托管平台做的事情，就是把你的文件上传到他们的服务器，并分配一个公网可访问的 URL。这样任何人只要联网，就能通过这个 URL 请求到你的文件。https 比 http 多了一层加密，现代托管平台默认都提供 https。

理解这一点，就能明白为什么「本地双击打开正常」不等于「别人能访问」——前者是本地文件读取，后者是网络请求，两者走的是完全不同的路径。

地址栏里的秘密：file 协议与 http 协议的区别

这是整个流程里最容易被忽略的认知点。file:// 协议指向的是本地磁盘上的文件，https:// 协议指向的是网络上的一台服务器。朋友打不开你的页面，不是他网络有问题，而是他的设备上不存在你提到的那个文件路径。

理解这一点之后，后面三条托管路线的选择逻辑就清楚了：它们本质上都是在帮你把文件搬到公共服务器上，并分配一个可访问的网址。区别在于操作复杂度、免费额度，以及是否支持自动更新。

三条免费托管路线，怎么选

UP主把三条路摆在了一起，并给出明确的挑选建议：只想最快放上网，选 Cloudflare 拖文件夹；想改完文件网址自动更新，用 Cloudflare 的 Git 方式或 GitHub Pages；网站要存名单、要后台、要一个常驻程序，才轮到自己的服务器。

Cloudflare：拖文件夹最快，Workers 是新方向

登录 Cloudflare 控制台，左侧找到 Workers 和 Pages，创建应用，选择拖放文件，填一个项目名，把放着 index.html 的文件夹拖进去，部署完成。网址就是项目名加 pages.dev 后缀。官方页面写明免费开始、不需要信用卡。

拖放上传的限制是：最多1000个文件，单个文件不超过25MB。一张邀请页几个文件，远远用不完。但有一个坑要提前知道：用拖文件夹建的项目，以后不能改成 Git 自动部署，想要自动更新得重新建一个。

另一个变化值得注意：Cloudflare 的老产品叫 Pages，但官方文档页首现在写着 Workers 覆盖了 Pages 的大部分用途，新项目建议从 Workers 开始。Pages 并未下线，拖文件夹的做法依然可用。走 Workers 路线的话，核心是一条 wrangler deploy 命令，你也可以直接让 Claude Code 照官方静态网站指南把当前文件夹部署上去——登录 Cloudflare 账号那一步需要你自己在终端按提示完成。部署成功后终端会给出一个 workers.dev 结尾的网址，手机打开能看到邀请页就是成功了。

免费额度方面，官方 Workers 文档写明：访问静态文件免费且不限量，一个站最多2万个文件，单文件25MB。接入 Git 自动部署后，每次推送算一次构建，免费档每月500次。

静态网站与静态托管

静态网站是指不需要服务器端程序动态生成内容的网站，通常由 HTML、CSS、JavaScript 和图片等静态文件组成。浏览器请求哪个文件，服务器就返回哪个文件，不需要数据库或后端逻辑。邀请页、作品集、说明文档都是典型的静态网站。

静态托管的优势是简单、快速、便宜（甚至免费），因为服务器只需要返回文件，不需要运行程序。Cloudflare Pages、GitHub Pages、Netlify 等都是静态托管服务。

与之相对的是动态网站，需要服务器运行 PHP、Node.js、Python 等程序来生成页面或处理表单，这就得用自己的服务器或云主机。文章里说「要存数据、要后台才上自己的服务器」，指的就是动态需求。

GitHub Pages：仓库必须公开

官方快速开始步骤很短：右上角新建仓库，仓库名写成「你的用户名.github.io」，把 index.html 等文件放进去；然后进仓库设置，左侧找到 Pages，发布来源选「从分支部署」，再选放文件的分支，稍等片刻网址就能打开。

三件事必须提前知道：

1. 免费账号使用 GitHub Pages，仓库必须是公开的。任何人都能看到你的文件，密码、密钥一个字都不能放进去。
2. 官方使用限制：站点不超过1GB，每月软带宽100GB，每小时软构建10次。邀请页、作品集、说明文档远远用不到。
3. 用途限制写得很直接：不允许当免费网上商店，不用于以商业交易为主的网站，也不要传密码、信用卡号等敏感信息。个人主页、项目说明完全没问题，想做网店就得换地方。

在这个环节，Claude Code 可以帮你整理文件、写说明、把文件推送到仓库，但推送时要用你自己的 GitHub 账号。

顺带一提，Cloudflare 也能接 GitHub 仓库，每次推送新版本自动重新发布——想要「改完自动更新」，这是两家共同的好处。

Git 与 GitHub 的基本概念

Git 是一个版本控制系统，用来记录文件的每次修改，方便回滚和协作。GitHub 是一个基于 Git 的代码托管平台，你可以把本地文件夹变成一个「仓库」（repository），然后推送到 GitHub 的服务器上。

对于托管网页来说，Git 的好处是：每次你修改文件并推送（push）到 GitHub，GitHub Pages 会自动重新发布最新版本，网址不变。这就是「自动更新」的原理。

如果你之前没用过 Git，Claude Code 可以帮你执行 git init、git add、git commit 等命令，但推送到 GitHub 时需要你登录自己的账号（通常通过浏览器授权或输入 token）。仓库公开意味着任何人都能浏览你的代码，所以切记不要提交密码、API 密钥等敏感信息。

自己的服务器：自由最大，也最费事

邀请页这类静态网页其实用不着它，上服务器反而是给自己加活。它的价值在另一头：网站要存数据（比如报名名单）、要有后台、要一个一直跑的程序时，才轮到它。

以甲骨文免费机器为例，官方页面写的是新账号送300美元试用金，30天内使用；30天后不做任何操作，Always Free 部分继续免费，其中包含两台 AMD 小机器（各八分之一核、1GB内存），以及 ARM 额度每月1500核小时、9000GB小时，折下来大约相当于一台两核12GB的机器常开。代价是注册要填银行卡，系统更新、防火墙、端口都得自己管。

一个10秒的上线自检

页面部署完，Claude Code 说「完成了」，但你自己点一遍比信它一句话踏实。这套检查能发现大多数问题：

• 换网络打开：手机关掉 WiFi，用流量输入网址，这才是朋友看到的样子，而不是你电脑里的缓存。
• 换浏览器或无痕窗口再打开一遍。
• 把每个按钮都点一遍：倒计时走不走，「我要来」有没有反应。

• 检查有没有私人信息：公开网页任何人右键就能看到源码，真实手机号、家庭住址、各种密钥都不要写进页面。邀请页需要联系方式，放一个专门给活动用的。你也可以直接让 Claude Code 检查当前文件夹里有没有密码、密钥或个人信息被写进网页文件。

如果打开是404，多半是 index.html 没放在所选文件夹的最外层，把它挪出来重新部署一次即可。以后改内容，对 Claude Code 说一句，改完再发布：拖文件夹的重新拖一次，用命令的再跑一次，接了仓库的推送新版本就自动更新。

404 错误的常见原因

404 表示服务器找不到请求的资源。在静态托管中，最常见的原因是首页文件没有命名为 index.html，或者它没有放在你指定的发布目录的根层级。托管平台在收到对根网址的请求时，会默认寻找 index.html；如果找不到，就返回 404。

另一种可能是文件路径大小写不一致：Index.html 和 index.html 在大多数 Linux 服务器上是两个不同的文件。此外，如果你用了子文件夹，确保链接路径正确。

排查时，先确认 index.html 就在你上传的文件夹最外层，然后检查文件名是否全小写。如果仍然 404，可以查看托管平台的控制台是否有部署错误提示。

成本提醒：托管免费，工具不免费

三条路里托管本身都是免费的，但 Claude Code 不是。官方快速开始页写得很清楚，使用它需要 Claude 的订阅或 Console 账号。已经在用的朋友可以直接往下走；没订阅的话，工具成本要先算进去。

另外，平台赠送的 pages.dev 或 workers.dev 网址能用，但更像一块临时门牌。想长期用、想印在名片上，换成自己的域名更体面。Cloudflare Pages 免费档一个项目最多可绑100个自定义域名——怎么拿到便宜甚至免费的域名，是另一个话题了。

三条路合并成一句话：最快上线选 Cloudflare 拖文件夹；想要官方推荐的新做法和自动更新选 Workers；只做非商业小网页选 GitHub Pages（仓库公开）；要存数据、跑后台才上自己的服务器。平台额度和规则会变，实际部署前建议对着官方页面再核一遍数字。