← 返回文章列表

READING MODE

从 0 到上线：用 Claude Code 做你的第一个个人网站（腾讯云全流程）

·15 分钟
claude-codetutorialwebsitedeploy

这篇带你从"我想做个人网站"一路走到"有一个可以发朋友圈的链接"。整条流程全程国内直连，免费部署，对新手零门槛——前面装好 Claude Code 的折腾都在这里开花结果。

预计耗时：30-60 分钟（取决于你想多少东西 + 改几次版）。
成本：Claude Code 消耗约 500K-1.5M tokens（Lite 套餐 ¥7.9 的 3% 左右，完全够），EdgeOne Pages 部署免费。

你需要什么

  • Claude Code 装好并接通腾讯云 Token Plan（没弄好看 上一篇教程）
  • 腾讯云账号（用于部署）
  • 一个浏览器（推荐 Chrome 或 Edge）
  • 半小时安静时间

就这些。不需要会 HTML/CSS，不需要 Git，不需要 npm，不需要设计软件。

第一步：启动 Claude Code，开始聊

打开终端，建个新文件夹，启动 claude：

Windows

cd $env:USERPROFILE\Desktop
mkdir my-site
cd my-site
claude

Mac

cd ~/Desktop
mkdir my-site
cd my-site
claude

出现 claude> 提示符后，不要一上来就把一堆需求倒给它——Vibe coding 的核心是让 Claude 陪你一起挖掘想法，而不是你扮演产品经理给它写详细 spec。

第一句就这样说（可以直接复制）：

> 我想做一个个人网站，但还没想清楚具体要什么。
  你来当我的搭档，通过聊天帮我挖掘出我真正想要的。
  规则：一次只问我一个问题，问完等我回答再问下一个。
  大概聊 5-6 轮之后，你总结一下方向让我确认。

这一句话把主导权交给 Claude——接下来让它带你节奏。

第二步：跟着 Claude 一问一答，把方向聊出来

Claude 会开始问你，问题大概长这样：

Claude：好，先从最基础的开始。你希望访问这个网站的人，第一眼就知道你是谁、在做什么吗？如果是，能不能用一两句话介绍你自己？

你：我是小王，独立产品设计师，最近在做 AI 相关的工具。

Claude：明白了。下一个问题：这个网站主要是给谁看的？是潜在雇主/客户、同行交流，还是只是想有个可以随便分享的个人空间？

你：主要是潜在客户看，能通过它找到我联系我。

Claude：好，那"联系方式"和"能证明你实力的东西"会是重点。下一个问题：你有没有几个觉得特别喜欢的个人网站，可以发给我参考？如果没有也没关系，描述一下风格感觉也行——比如"像杂志一样"、"像代码编辑器"、"像手绘笔记本"。

你：我喜欢 Linear 官网那种风格，很干净，有点冷冷的科技感。

……

这个过程几乎不需要你预先"想清楚"——Claude 会通过问题把你的偏好拽出来。你只要凭直觉回答就行。

如果 Claude 一次问太多

有时候 Claude 会忍不住一口气问你 3-4 个问题。直接打断它：

> 太多了，一次只问一个

如果你答不上来

坦白说：

> 不知道，你给我几个选项

Claude 会给你 3-4 个选项（比如"A. 极简白底 / B. 暖色杂志 / C. 暗色终端 / D. 复古报纸"），你挑一个就行。

第三步：让 Claude 总结方向，你确认

聊到差不多（一般 5-8 轮）时，Claude 会主动收口：

Claude：基于我们刚才的对话，我建议这个方向：

  • 风格：Linear 风的干净科技感，白底为主，配一个冷色调（比如深蓝或紫）做点缀
  • 结构：单页，从上到下三个区域——头部介绍、作品/能力证明、联系方式
  • 必备元素：你的名字 + 一句话定位、3-4 个作品卡片、邮箱和微信二维码
  • 风格细节：大留白、无衬线字体、有微妙的过渡动画但不花哨

这个方向你觉得对不对？有想调整的地方吗？

你可以：

  • 直接 "好，开始" → 进下一步
  • 调整：比如"把紫色改成绿色" / "加一个博客区域"
  • 推翻重来：比如"太冷了，换成更温暖手写一点的感觉"

第四步：给技术约束，让它开始写

方向确认后，再提技术要求——现在才是把"不要用 npm、要单文件、不要 Google Fonts"这些塞给它的时候：

> 好，开始写吧。注意几个技术约束：
>
> 1. 全部代码写在一个 index.html 里，CSS 和 JS 都内联
> 2. 不要用 React/Vue/Next.js 或任何 npm 依赖
> 3. 不要用 Google Fonts（国内慢），用系统字体栈
> 4. 图片用 emoji 或占位方块代替，我之后自己换
> 5. 手机和桌面都要好看
>
> 写完告诉我文件在哪里怎么打开。

Claude 会调 Write 工具写一个 index.html 出来，大概 5-15 秒。

为什么坚持"单文件纯 HTML"：

  • ✅ 不用跑 npm install（避开 90% 的 blocker）
  • ✅ 不用 npm run dev（双击就能看）
  • ✅ 部署不需要构建，直接传上去
  • ✅ 对方也能把文件下载本地打开看

这是新手最省心的路径。以后想加博客、多页面、动态内容，再升级到 Astro/Next.js 就行。

第五步：在浏览器里看效果

文件生成后，直接让系统帮你打开：

Windows

start index.html

Mac

open index.html

浏览器会打开你的网站。地址栏显示 file:///... 开头——这是本地文件直接渲染，没有 server。这也是为什么"单文件纯 HTML"这么香：0 启动步骤。

如果看起来就是你想要的，太棒了，直接跳第七步部署。多半你会想调整几处。

第六步：迭代到满意

看着效果告诉 Claude 要改什么。关键原则：一次只改一个点。

好的迭代示例：

> 标题字体再大 20%，颜色换成 #2d3748

（Claude 改完）

> 中间那个作品区域的卡片，移动端看的时候太挤了，间距调大一点

（Claude 改完）

> 底部加一个微信二维码的占位方块，100x100px，文字说"扫码加微信"

不好的迭代（token 大黑洞）：

> 把标题变大、颜色换深蓝、中间卡片改成横排、底部加个二维码、再加个暗色模式切换、字体换成衬线、导航改成吸顶……

后者看起来效率高，其实 Claude 会搞错至少 2 项，然后你改来改去更费 token 还可能越改越乱。

省 token 的三个小技巧

  1. 完成一个大版本就 /clear——清空对话历史，重新贴一次 index.html 给 Claude（"这是当前的完整代码，下面继续改"），避免每次都带几十轮旧上下文
  2. 别让 Claude 读别的文件——你就一个 index.html，用不着它 grep 整个项目
  3. 明确告诉它改哪一段——"把 .hero 那一块的 CSS 改成 ..."比"把顶部变好看"省很多 token

一般来说，一次成型 + 5-10 轮迭代 ≈ 1M tokens，Lite 套餐的 3% 左右，放心改。

第七步：部署到 EdgeOne Pages

改到你满意，接下来让别人也能访问。腾讯云的 EdgeOne Pages 是免费的静态托管服务，自带的 .edgeone.app 子域名国内直连、不需要 ICP 备案——完美适合这个场景。

7.1 打开 EdgeOne Pages 控制台

用你的腾讯云账号登录：

👉 console.cloud.tencent.com/edgeone/pages

第一次进来会看到「立即开通」按钮，点一下。免费的，不扣钱。

7.2 最快路径：本地直接上传

因为你的网站就是一个 index.html，最省事的方式是直接上传：

  1. 点左上角「新建项目」
  2. 选「直接上传」或「本地上传」（EdgeOne 新版界面按钮叫法可能略有不同）
  3. 把你的 index.html 所在文件夹整个打包成 zip（Windows 右键"发送到压缩文件夹"，Mac 右键"压缩"）
  4. 拖到上传框里
  5. 项目名填一个英文名（比如 xiaowang-site），这个会出现在网址里
  6. 点「开始部署」

大概 20-40 秒，部署完成。你会看到主域名类似：

https://xiaowang-site.edgeone.app

这就是你的网站。点一下能直接打开，复制链接发朋友。

以后想改内容？在 Claude Code 里改完 index.html，再打包一次 zip 上传进同一个项目即可（EdgeOne 支持"更新部署"）。

7.3 绑自己的域名（可选）

默认的 xxx.edgeone.app 已经够分享。想用自己的域名（yourname.com）：

  • 只用海外节点（国内访问稍慢但免备案）：项目设置里加域名，按提示加 CNAME 记录，完事
  • 要国内节点加速（国内秒开）：域名必须 ICP 备案（腾讯云、阿里云都能办，免费但需要 1-2 周审核）

强烈建议先用默认子域名玩一段时间，决定要不要长期维护再考虑备案。

第八步：分享 🎉

复制 https://xxx.edgeone.app 这个链接，发到：

  • 朋友圈 / 微博
  • 简历上
  • 求职信里
  • 个人签名

国内朋友点开秒加载，自动 HTTPS，看起来很专业。

可能遇到的坑和怎么处理

打开 index.html 浏览器显示空白

HTML 里有 JS 报错。浏览器按 F12 打开开发者工具，看 Console 红字。把错误贴给 Claude：

> 浏览器控制台报这个错：[贴错误]。帮我修

字体看起来怪怪的，或加载很慢

多半是 Claude 偷偷加了 Google Fonts。让它换：

> 把所有 Google Fonts 引用换成系统字体栈，
  用 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif

移动端看起来乱七八糟

> 在手机浏览器上看这个网页，[描述哪里不对]。帮我加响应式样式

如果 Claude 忘了加 viewport meta 标签，提醒它：

> 确保 head 里有 <meta name="viewport" content="width=device-width, initial-scale=1">

EdgeOne 部署成功但打开是 404

输出目录填错了。如果你是压缩 zip 上传的，zip 里应该直接有 index.html（不是嵌套一层文件夹）。重新打包：进入到有 index.html 的那一层，全选文件再压缩。

EdgeOne 部署日志报"构建失败"

纯 HTML 项目的话，构建命令应该留空。如果有默认值（比如 npm run build），手动删掉。

Claude 问你要不要 npm install 之类

明确拒绝：

> 不要引入任何 npm 依赖，继续用纯 HTML/CSS/JS 单文件

token 用得比预期快

检查几点：

  • 有没有让 Claude 读无关的大文件？
  • 有没有定期 /clear？
  • 有没有开着一堆 MCP？每个 MCP 的工具描述都在吃 token

Lite 套餐做完一个网站如果还超过 30%，大概率有浪费。

下一步：什么时候该"升级"

单文件纯 HTML 虽然简单，但有天花板。什么时候值得换成 Astro/Next.js？

  • 要加博客（多篇文章，希望自动生成列表页）→ Astro 或 Next.js
  • 要接真数据（比如从 API 拉作品列表）→ Next.js
  • 页面超过 5 个（单文件维护开始乱）→ 拆分
  • 要做真的交互功能（评论、搜索、登录）→ 全栈框架

否则，单文件就是最优解——Airbnb 早期官网、很多爆款独立开发者的个人站都是几百行 HTML 的原教旨主义派。

三句话总结

  1. 和 Claude 聊 10 分钟找方向、生成花 5 分钟、迭代看心情、部署花 5 分钟——全流程 30-60 分钟能搞完
  2. 纯 HTML 单文件是新手最省心路线——跳过所有 npm/node 相关的坑
  3. EdgeOne Pages 默认子域名国内直连免备案——拿到链接立刻能发给朋友

祝你做出一个自己看着也喜欢的小网站。