★ FEATURED ARTICLE 一直以来做网站这件事在大多数人印象里属于程序员的专属领域要会 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 是性价比很高的选择。托管方案适合场景免费域名格式核心特点GitHub Pages纯静态网站、个人主页、项目文档用户名.github.io/仓库名完全免费稳定需要了解 GitVercel静态网站、前端框架项目项目名.vercel.app自动化程度高前端生态好Cloudflare Pages静态网站、需要 CDN 加速的站点项目名.pages.dev免费额度大全球节点多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 Codenpm 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 CodeclaudeClaude 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如果提示没有 python3Windows 用户可以尝试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 选择 OtherBuild 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 选择 NoneBuild command 留空Build output directory 留空。因为纯 HTML 项目不需要编译直接把仓库根目录发布即可。保存并部署后Cloudflare Pages 会分配一个形如my-portfolio.pages.dev的地址。Cloudflare Pages 有一个优势免费版每个项目都包含较大的请求次数个人博客、作品集这类站点几乎不会触达上限。以后推送新代码同样会自动重新部署。到这里同一个网站已经上线到了三个平台。你可以分别打开三个地址会发现页面内容完全一致只是域名不同。这也是现代免费托管方案最方便的地方本质上是同一份代码部署到不同的“服务器”上平台负责提供访问入口。5. 常见问题与排查清单第一次接触这套流程大概率会在某个环节卡住。下面把最高频的问题整理成一张排查表问题现象常见原因解决思路推送到 GitHub 时报权限错误本地未配置 SSH Key 或未使用个人访问令牌使用 HTTPS 方式推送时密码输入个人访问令牌或配置 SSH KeyGitHub Pages 访问显示 404仓库设置中未选择 main 分支或部署尚未完成到 Settings → Pages 检查分支设置等待 1-2 分钟页面能打开但图片/样式丢失CSS 或图片资源路径引用错误检查 HTML 中 link 和 img 的路径使用相对路径Vercel 部署失败项目类型识别错误或文件大小写不一致Framework Preset 手动选择 Other检查文件名大小写Cloudflare Pages 连接仓库后找不到代码仓库授权未开启或选错了分支重新连接 GitHub确认授权仓库范围检查分支名线上页面内容没更新本地代码没有推送或平台构建失败确认 git push 成功并查看平台的构建日志除了表格里的问题还有一个新手经常遇到的坑在本地双击 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 或三个托管平台的过程中遇到没有覆盖到的报错也欢迎在评论区描述你的操作步骤和报错信息我会在这里继续补充排查方案。
阅读完成 · 觉得有帮助？
