3 小时做出你的第一个个人主页

跟着做 3 小时，做出一个能放进作品集的个人主页。Astro + Tailwind，零基础友好。

蔚蓝 · 学习与实践继续探索 ↗
此页目录

目标：3 小时内做出一个能放到 GitHub + 能挂到自己域名的个人主页。不学语法，只跑流程。

你会做出什么

mysite/
├── src/pages/index.astro     # 首页
├── src/pages/projects.astro  # 作品集
├── src/pages/about.astro     # 关于我
├── public/avatar.jpg
└── package.json

最终效果：响应式、有暗黑模式、3 个页面。

准备

  1. 装好工具（详见 装工具） —— Node 22+ / Git / Claude Code

  2. 建项目目录

    Terminal window
    mkdir mysite && cd mysite
    git init
    claude

  3. 打开 Claude Code 后说：

    我想做一个个人主页，技术栈用 Astro + Tailwind。
    包含三个页面：首页、作品集、关于我。
    要有暗黑模式、响应式。
    先帮我初始化项目骨架，有不清楚的先问我。

第 1 小时：骨架

让 Claude 跑 pnpm create astro@latest，选 minimal 模板。然后告诉它：

- 加上 @astrojs/tailwind
- 把首页改成 hero 居中布局，标题"你的名字 · Lead AI · Build everything"
- 加一个 navbar，三个链接：首页 / 作品集 / 关于我

15 分钟后你会有一个能跑的骨架。

第 2 小时：填内容

把你真实的内容喂给 Claude：

  • 一段自我介绍（200 字以内）
  • 3 个你做过的项目（哪怕是学校作业）
  • 一张头像
按这些内容把三个页面填好。
作品集做卡片网格，每张卡是 项目名 + 一句话描述 + 截图。
关于我做一个长文版本，分 4 段：现在在做什么 / 过去经历 / 喜欢什么 / 怎么找我。

第 3 小时：润色

- 加 favicon
- 加 meta 标签做好 SEO
- 加暗黑模式切换按钮（不要用 cookie，用 localStorage）
- 检查移动端是否好看

接下来

把它 push 到 GitHub，然后看 部署上线 把它挂到公网。

部署上线

EdgeOne / Vercel 任你选

持续迭代

上线之后才是开始

合集目录

  1. AI 十分钟帮我做出一张海报（你的第一次 build）
  2. 新手最常见的 7 个翻车点（以及怎么爬出来）
  3. 怎么跟 AI 说话：提需求的 3 个心法
  4. 注册并用上你的第一个 AI（国内外都能用）
  5. AI 到底能帮你干什么？带你看 10 个真实例子
  6. 3 小时做出你的第一个个人主页
  7. 个人飞轮 · 六个齿轮的开源版本
  8. 上线之后才是开始 · 第一周该看什么
  9. Prompt 心法 · 给文科生的 3 条
  10. 装上你的第一个 AI 工具（Claude Code / Cursor 二选一）
  11. 30 分钟装好 Claude Code
  12. 用 EdgeOne Pages 把网站推到公网
  13. 这站是给谁的，怎么用
  14. 什么是 vibe coding：不写代码，怎么做出软件