用Claude Code和免费托管，零代码也能上线个人网站

一直以来，做网站这件事，在大多数人印象里属于程序员的专属领域：要会 HTML、CSS、JavaScript，要懂服务器，还要花钱买域名、买空间。但这两年 AI 编程工具快速成熟，这个门槛正在被大幅拉低。哪怕一行代码都没写过，只要你能把自己的需求说清楚，工具就能把页面写出来；再配合免费托管平台，网站上线甚至不需要买服务器。

本文就把这套链路完整拆开，围绕 Claude Code 做网站、三种免费托管方案两条主线，从零开始演示一遍。不假定读者有编程基础，所有操作都按“新手能照着做”的标准来写。读完之后，你不仅会有一个能公开访问的网站，还能理解背后用到的关键概念，以后自己改内容、换模板也不会一脸茫然。

1. 先搞清楚：Claude Code 和免费托管分别是什么

1.1 不懂代码也能做网站，靠的是什么

传统建站流程里，最劝退的部分就是“写代码”。布局要写 HTML，样式要写 CSS，交互要写 JavaScript，任何一个环节出问题，页面都可能显示异常。

AI 编程工具出现后，这部分工作变成了“对话式协作”：你告诉工具想要什么样的页面，它帮你生成代码。Claude Code 就是这类工具中的典型代表，它运行在终端中，可以直接读取你电脑上的项目文件夹，并根据你的自然语言描述创建文件、修改内容、运行命令。你不需要精通代码语法，但需要学会把需求描述得足够具体，比如页面包含哪几个板块、主色调是什么、需要哪些交互效果。

免费托管的逻辑也很简单。网站本质上是“一组文件 + 一个能被外部访问的地址”。托管平台做的就是两件事：帮你存放这些文件，并分配一个公网域名。GitHub Pages、Vercel、Cloudflare Pages 都属于这种服务，个人使用基本不花钱，也不需要自己维护服务器。

1.2 Claude Code 是什么，能做什么

Claude Code 是由 Anthropic 推出的 AI 编程工具，与常见的聊天机器人不同，它运行在命令行环境中，可以直接与项目文件交互。你可以把它理解成一个“住在你电脑里的编程助手”：你告诉它目标，它负责写代码、建文件、甚至执行命令。

它对新手友好的点在于，你不必关心“代码该放哪个文件”“CSS 该怎么组织”，只需描述功能性的需求。例如：“做一个带导航栏和作品列表的页面”，它就能自动生成合理的项目结构。同时，它在生成代码后会给出说明，方便你大致了解每个文件的作用，这在后续修改内容时非常关键。

需要说明的是，Claude Code 需要通过 Anthropic 官方渠道登录或配置 API 密钥后使用，具体安装与认证方式建议以官方文档为准。本文的重点是使用思路和建站流程，工具本身的版本更新不会影响整体操作逻辑。

1.3 三种免费托管方案的区别

在选托管平台之前，先要明白三个平台各自的定位，这样选起来才不会纠结。

GitHub Pages 依托于 GitHub 代码仓库，适合托管纯静态网站，也就是由 HTML、CSS、JavaScript 组成的页面。它完全免费，并且没有明显的流量限制，对个人作品集、文档站、项目演示页来说非常稳定。缺点是你需要先了解一点 Git 操作，而且它只支持静态文件，不支持后端服务。

Vercel 是一个非常流行的前端部署平台，对静态网站和前端框架支持得都很好。它的优势是部署流程自动化程度高、访问速度不错，个人项目免费额度充足。如果你以后打算使用 React、Vue 这类前端框架，Vercel 的体验会更顺滑。

Cloudflare Pages 依托于 Cloudflare 的全球网络，自带 CDN 加速，免费额度比较大。它同样支持连接 Git 仓库自动部署，也可以手动上传构建产物。对追求“部署简单、访问快”的站点来说，Cloudflare Pages 是性价比很高的选择。

2. 环境准备与账号注册

2.1 电脑环境要求

做静态网站对环境要求很低，Windows、macOS、Linux 都可以。核心准备三样东西：终端、Git、Node.js。

终端是执行命令的窗口。macOS 自带“终端”应用，Windows 可以使用 PowerShell，也可以安装一个更好用的终端工具，例如 Windows Terminal。

Git 是版本管理工具，也是把代码推送到 GitHub、Vercel、Cloudflare Pages 的基础。新手不需要理解 Git 的内部原理，只需要学会 clone、add、commit、push 这几个命令即可。安装方式可以到 Git 官网下载对应系统的安装包，一路默认安装。安装完成后，在终端里执行下面的命令验证：

git --version

如果输出了git version 2.x.x之类的信息，说明安装成功。

Node.js 和 npm 也是常用工具。Claude Code 通常通过 npm 安装，而 Vercel、Cloudflare 的命令行工具同样依赖 Node.js。安装时建议选择 LTS 长期支持版本。

node -v npm -v

两条命令都有版本输出，说明环境就绪。版本号不需要和任何教程完全一致，只要能用即可。

2.2 安装 Claude Code

在终端中执行下面这条命令，即可全局安装 Claude Code：

npm install -g @anthropic-ai/claude-code

安装完成后，输入：

claude

如果是第一次使用，终端会引导你完成登录或 API 密钥配置。这里需要注意，不同时期的认证方式可能有调整，按终端提示操作即可。配置完成后，再输入claude就能进入交互界面，此时你可以直接输入自然语言指令。

为了避免干扰，进入交互界面后可以先输入/help查看常用命令，不需要记住太多，后面文章只需要用到最基本的“直接对话”能力。

2.3 注册需要用到的三个平台账号

如果决定三种托管方案都尝试，需要准备三个平台的账号。GitHub 是必须先有的，因为 Vercel 和 Cloudflare Pages 都可以直接导入 GitHub 仓库，代码有了一个统一的中转站。

注册 GitHub 时，打开 GitHub 官网，点击 Sign up，输入邮箱、密码、用户名。注册完成后，建议顺手开启双重认证，防止账号被盗。Vercel 和 Cloudflare Pages 都可以用 GitHub 账号一键登录，不用额外填写复杂资料，登录后分别完成邮箱验证即可。

这里有一个实用建议：三个平台最好使用同一个邮箱注册，后续管理账号时会更省心。

3. 用 Claude Code 做出你的第一个网站

3.1 初始化项目目录

先创建一个专门存放项目的文件夹。打开终端，执行：

mkdir my-portfolio cd my-portfolio

然后进入 Claude Code：

claude

Claude Code 会识别到你当前所在的目录就是工作目录，后续生成的文件都会放在这里。这一步很重要，因为 AI 工具只能在你允许的目录中读写文件，目录一乱，后面部署时路径就容易出错。

3.2 向 Claude Code 描述你的网站需求

接下来就是核心环节：用自然语言描述需求。不要只丢一句“帮我做个网站”，信息越具体，生成结果越接近预期。建议从页面结构、视觉风格、技术栈、文件组织四个角度来描述。

下面是一个可以直接复制参考的需求描述：

请帮我创建一个个人作品集网站，具体要求如下： 1. 技术支持使用原生 HTML + CSS + JavaScript，不引入任何额外框架； 2. 页面包含导航栏、首页横幅（Hero 区域）、关于我、作品展示、联系方式五个部分； 3. 导航栏固定在页面顶部，点击菜单可以平滑滚动到对应板块； 4. 作品展示区域使用卡片网格布局，至少放 6 个示例作品； 5. 页面在手机上正常显示，窄屏时导航菜单自动折叠； 6. 配色以深蓝色和白色为主，整体风格简洁干净； 7. 项目文件结构为 index.html、style.css、script.js 三个文件； 8. 不要使用任何外部图片资源，用占位文字代替。

把这段文字粘贴到 Claude Code 的输入框中并按回车，它会开始创建文件、写代码。整个过程中你基本不需要干预，唯一要做的是等它运行结束后确认文件是否生成。

3.3 理解 Claude Code 生成的文件

按照上面的需求，最终项目结构通常是这样的：

my-portfolio/ ├── README.md ├── index.html ├── script.js └── style.css

这里需要理解三个核心文件的分工：

index.html是网站的骨架，负责定义页面结构和内容。比如导航栏里有哪几个菜单、每个板块展示什么文字。它的特点是“描述内容”，不负责页面长什么样。

style.css是网站的皮肤，负责颜色、间距、字体、布局等视觉表现。想改背景色、调整卡片圆角、让导航栏吸顶，都操作这个文件。

script.js是网站的交互逻辑，负责菜单点击折叠、动态生成作品卡片、平滑滚动等行为。想让页面“动起来”，改的就是它。

你不用现在就学会写这三类代码，但建议用文本编辑器打开index.html，找到“关于我”和“联系方式”两个板块，把里面占位的名字、介绍、邮箱替换成自己的内容。这一步能帮你快速理解“代码如何对应页面内容”。

3.4 本地预览与调整

代码改完后，先本地预览，确认页面效果。在项目目录下执行：

python3 -m http.server 8080

如果提示没有 python3，Windows 用户可以尝试：

npx serve

然后用浏览器访问http://localhost:8080，就能看到网站的本地效果。预览时重点检查导航栏是否能点击跳转、鼠标滚轮能否正常滚动、手机尺寸下菜单是否折叠。

如果发现某个板块的位置不合理，回到 Claude Code，继续用自然语言描述修改需求，例如：“把作品展示目录放到关于我前面”“导航栏太高了，高度改成 50px”。Claude Code 会修改对应文件，刷新浏览器即可看到变化。

3.5 把项目提交到 Git 仓库

网站在本地做完之后，需要先把代码推送到 GitHub，后续三个托管平台才能读取到这份代码。

首先在 GitHub 网站上创建一个空白仓库，仓库名可以取my-portfolio，不要勾选“使用 README 初始化”，因为我们本地已经有文件了。创建完成后，回到终端，先退出 Claude Code 的交互界面，然后在项目目录依次执行：

git init git add . git commit -m "完成个人作品集网站初版" git branch -M main git remote add origin https://github.com/你的用户名/my-portfolio.git git push -u origin main

把命令中的“你的用户名”替换成真实的 GitHub 用户名。首次推送时如果提示认证，需要在 GitHub 设置中生成一个个人访问令牌（Personal Access Token）作为密码，或者提前配置好 SSH Key。

推送成功后，GitHub 仓库页就能看到刚上传的三个文件。到这一步，代码已经完成了“本地 → 云端”的搬运，接下来只需要处理好托管配置。

4. 免费托管三种方案逐一实操

4.1 GitHub Pages：适合静态网站，零成本发布

GitHub Pages 是三种方案里与 Git 绑定最深的一个，适合已经按前面流程把代码推送到 GitHub 的场景。

进入 GitHub 仓库页面，点击顶部菜单的 Settings，然后在左侧菜单里找到 Pages。在 Build and deployment 区域，将 Source 选为“Deploy from a branch”，Branch 选为main，目录选择/root，点击 Save。

保存后，页面顶部会出现一条提示，告诉你网站已经发布，并给出一个访问地址。格式通常是：

https://你的用户名.github.io/my-portfolio/

注意，如果仓库名是你的用户名.github.io，则访问地址是https://你的用户名.github.io/；如果仓库名是普通项目名，就需要带上项目名路径。初次部署一般需要等待 1 到 2 分钟，刷新地址直到页面显示出来即可。

GitHub Pages 的维护方式也很简单：以后每次修改完本地代码，执行git add .、git commit、git push三步，GitHub Pages 会自动重新生成线上版本，无需再进入后台操作。

4.2 Vercel：自动构建，前端开发者常用

如果你希望部署过程再省心一点，推荐试试 Vercel。它支持直接用 GitHub 账号登录，并且能自动识别项目类型。

打开 Vercel 官网，点击登录，选择 Continue with GitHub，授权后进入控制台。点击 Add New Project，然后 Import 你刚刚推送的my-portfolio仓库。Vercel 会自动检测项目类型。对于纯静态网站，Framework Preset 选择 Other，Build Command 保持空白，Output Directory 保持空白。这个配置的含义是：项目不需要额外构建步骤，直接把整个目录作为网站内容发布。

配置完成点击 Deploy，等待大约一分钟，Vercel 会生成一个形如my-portfolio.vercel.app的地址，点击即可访问线上网站。

Vercel 对后续开发流程有很好的支持：之后每往 GitHub 推送一次代码，Vercel 会自动触发重新部署，不用手动点任何按钮，体验很顺滑。

4.3 Cloudflare Pages：全球 CDN，免费额度充足

Cloudflare Pages 同样支持连接 GitHub 仓库自动部署，同时自带全球 CDN 加速，国内访问速度通常也不错。

登录 Cloudflare Dashboard，进入左侧菜单的 Workers & Pages，然后点击 Pages 选项卡，选择 Create a project，再点击 Connect to Git，授权 GitHub 后选择my-portfolio仓库。

在构建配置页面，Framework preset 选择 None，Build command 留空，Build output directory 留空。因为纯 HTML 项目不需要编译，直接把仓库根目录发布即可。保存并部署后，Cloudflare Pages 会分配一个形如my-portfolio.pages.dev的地址。

Cloudflare Pages 有一个优势：免费版每个项目都包含较大的请求次数，个人博客、作品集这类站点几乎不会触达上限。以后推送新代码，同样会自动重新部署。

到这里，同一个网站已经上线到了三个平台。你可以分别打开三个地址，会发现页面内容完全一致，只是域名不同。这也是现代免费托管方案最方便的地方：本质上是同一份代码，部署到不同的“服务器”上，平台负责提供访问入口。

5. 常见问题与排查清单

第一次接触这套流程，大概率会在某个环节卡住。下面把最高频的问题整理成一张排查表：

除了表格里的问题，还有一个新手经常遇到的坑：在本地双击 index.html 打开时页面正常，发布到线上后样式就丢了。这通常是 HTML 里使用了本地绝对路径导致的。记住一个原则：网站中引用任何资源的路径都要写成相对路径，例如style.css而不是C:\用户\xxx\style.css。

如果线上页面和本地预览差异很大，优先检查文件大小写。Linux 服务器严格区分大小写，Style.css和style.css是两个不同的文件；macOS 和 Windows 本地不区分大小写，可能看不出问题，一上线就暴露了。

6. 工程建议与上线注意事项

第一次网站上线后，很容易陷入“做完就完事”的状态。但长期维护一个小网站，一些基础习惯越早建立越省心。

第一，目录结构尽量固定。小网站建议保持index.html、style.css、script.js这种扁平结构；如果以后内容变多，可以增加assets/目录存放图片，增加pages/目录存放子页面。命名统一、层级清晰，修改时就不会出现“找不到文件”的窘境。

第二，使用 Git 记录每个版本。哪怕是一个人的小项目，也建议每次修改后都执行一次提交，Commit 信息写清楚，例如“修复移动端导航样式”“新增作品卡片”。这样一旦改坏了，可以轻松回退到之前的版本。

第三，不要把密钥和隐私写进代码。Claude Code 生成的网页是公开内容，任何访问者都看得到源码。邮箱、电话、密码、API Key 都不要写在 HTML 或 JavaScript 文件里。如果以后对接第三方服务，密钥应放在托管平台的 Environment Variables 中。

第四，了解免费方案的限制。GitHub Pages 不支持动后端程序，Vercel 免费版有月度构建时间限制，Cloudflare Pages 对单文件大小有上限。对个人网站来说这些限制通常影响不大，但心里要有数，避免上线后突然无法构建。

第五，自定义域名可以延后但值得了解。三个平台默认分配的域名都是带平台标识的子域名，想让网站看起来更正式，可以购买一个独立域名，然后分别到三个平台的控制台绑定。这一步需要修改 DNS 记录，建议用“CNAME 指向平台域名”的方式完成。

7. 总结与下一步学习路线

从“脑海里有一个想法”到“网站能被人访问”，中间真正动手的环节只有三件事：用自然语言让 Claude Code 生成代码，把代码推送到 GitHub，在托管平台上点击部署。这三个动作在整篇文章里已经完整演示过，你可以任选一种托管方式把网站跑起来，也可以三个平台都试一遍，对比访问速度和控制台操作习惯。

如果你已经成功部署了第一个站点，下一步可以尝试更有挑战的改动：让 Claude Code 给网站增加一个暗色模式切换按钮、把作品卡片改成点击可跳转的链接、或者为站点写一个简单的博客文章列表。每次改动都会推送到 GitHub，托管平台自动更新，周而复始，你对“网站是怎么跑起来的”就会理解得越来越深。

如果这篇文章对你有帮助，建议收藏备用，等到真正建站时对照着操作。如果你在使用 Claude Code 或三个托管平台的过程中遇到没有覆盖到的报错，也欢迎在评论区描述你的操作步骤和报错信息，我会在这里继续补充排查方案。