4.1 项目实战：个人博客网站

难度：⭐ | 预计时间：30 分钟 | 技术栈：HTML + CSS + JS

学习目标

• 用一句话让 Claude Code 生成一个完整的个人博客
• 掌握基本对话和文件创建流程
• 学会迭代修改：换主题颜色、改布局、加动画
• 完成部署到 GitHub Pages 的全流程

---

项目需求

一个美观的个人博客网站，包含：

• 首页（个人介绍 + 文章列表）
• 文章详情页
• 关于页面
• 响应式布局（手机也能看）

第一步：一句话生成项目

打开终端，进入你的工作目录，启动 Claude Code：

claude

然后输入你的第一个需求：

帮我用纯 HTML + CSS + JavaScript 创建一个个人博客网站。
要求：
- 简约现代的设计风格，深色主题
- 首页展示个人简介和最近文章列表
- 点击文章可以查看详情
- 顶部有导航栏，包含"首页"和"关于"
- 响应式布局，手机端也要好看

提示

第一次和 Claude Code 交互，不需要想太多，把你想要的效果描述清楚就行。它会自动帮你创建文件夹、写 HTML、写 CSS、写 JS。

第二步：迭代修改

看到初始效果后，你可以继续提需求：

把导航栏的背景色改成渐变色，从 #667eea 到 #764ba2

给文章卡片加上鼠标悬浮的上浮动画效果

在首页底部加一个"联系我"的区域，包含 GitHub 和邮箱链接

每次修改，Claude Code 都会精确地只改需要改的文件，不会乱动其他地方。

第三步：部署到 GitHub Pages

帮我把这个博客部署到 GitHub Pages。我的 GitHub 用户名是 [你的用户名]。
请帮我：
1. 初始化 git 仓库
2. 创建 .gitignore
3. 提交所有文件
4. 告诉我接下来需要在 GitHub 上做什么

学到了什么

完成这个项目后，你已经掌握了：

• [x] 用自然语言描述需求，让 AI 生成完整项目
• [x] 迭代式开发：不满意就继续提需求
• [x] 文件操作：Claude Code 如何创建和修改文件
• [x] 部署流程：从本地到线上

信息

这是最简单的入门项目，目的是让你熟悉 Claude Code 的基本工作模式。如果你顺利完成了，恭喜！你已经比大部分人走得更远了。