AI·系统·创造·人将如何自处

10 分钟设计出你的个人网站

8分钟阅读

10 分钟设计出你的个人网站

目标：今天晚上 · 你能拿到一个自己的网站地址（类似 你的用户名.github.io/my-site）· 发给妈妈看。

不是学”怎么做网站”——是让你第一次亲身体验：“我对 AI 说一句话 → 它动了我电脑上的文件 → 互联网上真的就有了东西”。

你会得到什么

  • 一个实际能访问的个人主页（哪怕只有一段自我介绍 + 你的微信二维码）
  • 一次”我对 AI 说话 → 它改了我的文件 → 网上有内容了”的真实触感
  • 一个你 10 分钟前根本想不到自己今晚能做到的事

这件事的价值，不在于网站本身——很多免费模板也能搭个主页。价值在于你第一次体验到”Claude Code 能替你动手”。读完 ChatGPT vs Claude Code 的那些抽象描述，这页是它的实证。

最少要准备的

  1. Claude Code 已装好 · 见 Mac-从零装好
  2. 一个 GitHub 账号 · 5 分钟注册 · 免费 · 官网 https://github.com
  3. 想好一个网站名字 · 随便起 · 跑通第一版后再纠结名字

不需要会写代码、不需要懂 HTML、不需要提前装什么 Astro / Hugo。Claude 会替你装。

10 分钟步骤

1 · 建一个文件夹

桌面上新建一个叫 my-site 的文件夹。就这样，别想多。

2 · 用 VSCode 打开它

拖进 VSCode 窗口 · 或者 File → Open Folder 选这个文件夹。

VSCode 右下角或侧边栏会有 Claude Code 的唤起按钮（装好扩展后自动出现）。按它，或者在 VSCode 终端里输 claude 回车。

3 · 对 Claude 说第一句话

复制下面这句，按你的情况改几个字，发给 Claude：

帮我在这个文件夹里搭一个最简单的个人网站。主页只要一段自我介绍（“你好，我叫 XX，我是 YY”）+ 我的联系方式。框架你来选——要最快能发到 GitHub Pages 上那种。然后教我怎么 push 到 GitHub，用 gh 命令行。

Claude 大概率会选 Astro 或 Hugo 或 Quartz（都是静态站生成器，GitHub Pages 免费托管它们）。不用担心选哪个——让它选，它会按”最少依赖 + 最快发布”挑。

4 · 看着它动手

接下来 Claude 会：

  • 自动建 package.json / astro.config.mjs 或类似的配置文件
  • 写 src/pages/index.astro（首页）
  • 跑 npm install（装依赖 · 它会问你要不要，按 y）
  • 跑 npm run dev（本地预览 · 你浏览器打开 http://localhost:4321 之类的地址能看到网站了）

这一步完成后你已经有一个能本地访问的网站。还差”发到网上别人能看”。

5 · 告诉 Claude 发布

继续说：

好 · 现在帮我发到 GitHub Pages。我还没 gh auth login 过。

Claude 会告诉你：

  1. gh auth login · 跟着提示按回车（它会让你选 HTTPS / SSH，选 HTTPS 最简单 · 会开浏览器让你授权）
  2. gh repo create my-site --public --source=. --push · 建远程仓库 + 推代码
  3. 去 GitHub 仓库页 · Settings → Pages → Source 选 GitHub Actions（Astro / Hugo 的 workflow 文件 Claude 已经自动写好）

等 1-2 分钟，GitHub 构建完，地址就是：

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

打开。发给妈妈。

你会遇到的 3 个坑

坑 1 · gh auth login 卡在浏览器授权

浏览器会跳转到 GitHub 让你授权 → 授权完它会跳回一个像是失败的页面 · 别慌 · 回 VSCode 终端看，那边已经显示 “Logged in as XXX” 就成了。

坑 2 · GitHub Pages 地址打开是 404

两种情况：

  • 构建还没完：去仓库 Actions 标签页看，有个黄圈圈转表示在构建 · 等它变绿
  • Source 设置错了：Settings → Pages → Source 必须选 GitHub Actions，不是 Deploy from a branch

两种都解决不了 → 截图丢给 Claude，它会看出是哪里不对。

坑 3 · 自己动手改了一下，现在打不开了

别删文件别重装。

git status      # 看改了啥
git diff        # 看改了什么内容
git restore .   # 全部回退到上次 commit

忘了命令？直接问 Claude “我刚改坏了，回退”——它会教你更精准的回退办法。

再升一级（明天再说）

跑通第一版之后，你可以继续对 Claude 说：

  • 换好看点的模板 · “这个太简陋了 · 帮我挑一个 Astro 的免费 portfolio 模板套进来”
  • 加作品页 · “我在 ~/Documents/作品/ 有一堆 md 文件 · 帮我读一遍 · 自动生成一个作品列表页”
  • 绑自己的域名 · 你的名字.com 这种 · 需要花钱买域名 · 见 index
  • 加博客 · Astro / Hugo 自带博客功能 · 说一句 “加个 blog 页，按时间倒序列 md 文章” 就行

为什么这是第一个任务

大多数 AI 教程第一节讲的都是”Hello World”——在终端打印一行字。没人看得到，没有成就感。

这一章（2 · 今晚跑通第一次）选”搭个人网站”作为第一个任务，因为它：

  • 立刻有输出 · 不是一段终端文字 · 是一个 URL，能发给任何人
  • 涉及真实文件操作 · Claude 替你建文件 / 写代码 / 跑命令 · 你感受到”它真的在动我的电脑”
  • 失败也不可怕 · 删掉文件夹重来就行 · 不会影响你任何别的东西
  • 明天能继续优化 · 这个网站可以一直长大 · 今晚只是起点

读十篇”Claude Code 介绍”文章，不如今晚亲手搭一个。

延伸

  • 装好 Claude Code 但还没装好 → Mac-从零装好
  • 没选好模型 → 选哪个模型
  • 想搞懂背后术语（Astro / GitHub Pages / npm …）→ index
  • 跑通了想做下一件事 → index
  • 想看别人真实搭过什么 → index

官方来源

命令和截图以 Claude Code 2026-04 版本为准 · 如 GitHub / gh CLI 界面有变化，截图给 Claude 让它识别新版本。

AI 学者 2026-04-21 · 第一个”有成就感”任务 · IA v4

关系图谱

反向链接