全部文章
AI 编程AI面包君
实战项目一：用 AI 搭一个个人博客（Next.js + Markdown）
目标： 用 AI 从零搭一个个人博客，支持 Markdown 写文章、自动部署、自定义域名。
2026-06-02约 5 分钟
这是 AI 编程实战项目系列的第一篇。
目标： 用 AI 从零搭一个个人博客，支持 Markdown 写文章、自动部署、自定义域名。
你不需要写一行代码。 你需要的是：描述需求的能力 + 审查产出的眼光 + 一台能上网的电脑。
🎯 这个博客长什么样？
首页：文章列表，按时间排列
文章页：Markdown 渲染，支持代码高亮
关于页：你的个人介绍
响应式：手机和电脑都好看
暗色模式：自动跟随系统
部署在 Vercel：免费、自动 HTTPS、绑定自定义域名
🛠️ 准备工作（30 分钟）
1. 安装必要工具
# Node.js（AI 编程的基础环境）
# 去 https://nodejs.org 下载 LTS 版本，安装
# Claude Code（如果你用终端 AI 编程）
# 或 Cursor（如果你用 IDE）
# 或直接在浏览器用 Bolt/Lovable（最简单）
2. 注册账号
| 服务 | 做什么 | 费用 |
|---|---|---|
| GitHub | 存代码 | 免费 |
| Vercel | 部署网站 | 免费额度够用 |
| 域名（可选） | 自定义网址 | 几十块/年 |
💻 Step 1：让 AI 创建项目（5 分钟）
打开 Claude Code（或 Cursor、Bolt），输入：
帮我创建一个 Next.js 个人博客项目。
要求：
1. 使用 Next.js 14 + TypeScript + Tailwind CSS
2. 文章用 Markdown 文件存储，放在 /content/posts/ 目录下
3. 首页显示文章列表（标题、日期、摘要），按日期倒序
4. 点击文章标题进入文章详情页
5. Markdown 支持：代码高亮、图片、表格、引用
6. 有一个"关于"页面
7. 支持暗色模式（跟随系统）
8. 响应式设计（手机和电脑都好用）
9. 简洁现代的设计风格
项目名叫 "my-blog"，先初始化项目结构。
AI 会：
- 用
create-next-app创建项目 - 安装依赖（Tailwind CSS、Markdown 解析库等）
- 创建基础页面结构
📝 Step 2：让 AI 写核心功能（15 分钟）
2.1 Markdown 文章读取
帮我实现：
1. 读取 /content/posts/ 目录下的所有 .md 文件
2. 解析每个文件的 frontmatter（标题、日期、标签、摘要）
3. 返回所有文章列表，按日期倒序排列
2.2 首页
帮我实现首页：
1. 顶部：博客标题 + 简短介绍 + 导航（首页、关于）
2. 文章列表：每篇文章显示标题、日期、标签、摘要
3. 列表上方显示文章总数
4. 点击文章卡片跳转到文章详情页
5. 如果没有文章，显示"还没有文章，敬请期待"
2.3 文章详情页
帮我实现文章详情页：
1. 显示文章标题、日期、标签
2. 正文用 Markdown 渲染，代码块支持语法高亮
3. 底部有"返回首页"链接
4. 页面标题（title 标签）设为文章标题
2.4 关于页面
帮我创建一个关于页面：
1. 个人介绍区域
2. 社交链接（GitHub、Twitter、邮箱）
3. 可以放一张头像
4. 内容从 /content/about.md 读取
2.5 暗色模式
帮我加上暗色模式：
1. 默认跟随系统（prefers-color-scheme）
2. 导航栏有一个切换按钮（太阳/月亮图标）
3. 选择手动切换后，记住用户的选择（localStorage）
4. Tailwind 的 dark: 前缀实现样式切换
🎨 Step 3：调整样式（10 分钟）
帮我调整一下整体样式：
1. 主色调：蓝色系（#2563eb）
2. 字体：系统默认字体栈
3. 首页文章卡片：白色背景、圆角、阴影、hover 时轻微上浮
4. 文章详情页：最大宽度 720px、居中、行高舒适
5. 代码块：深色背景（#1e1e1e）、圆角、有复制按钮
6. 整体留白充足，阅读体验好
📰 Step 4：创建第一篇示例文章（5 分钟）
在 /content/posts/ 下创建 hello-world.md：
---
title: "Hello World：我的第一篇博客"
date: "2026-06-02"
tags: ["随笔", "技术"]
description: "这是我的第一篇博客文章，聊聊为什么要建这个博客。"
---
## 为什么要建这个博客？
一直想有一个自己的地方，记录学习和思考。
现在有了 AI 的帮助，从想法到上线只用了几个小时。
## 这个博客有什么？
- 📝 用 Markdown 写文章
- 🎨 简洁干净的阅读体验
- 🌙 暗色模式
- 📱 手机也能看
## 接下来写什么？
我会在这里分享我的 AI 编程学习过程、做产品的思考，以及一些有趣的技术探索。
敬请期待！
🚀 Step 5：部署上线（10 分钟）
5.1 推到 GitHub
帮我把项目推送到 GitHub：
1. 初始化 Git 仓库
2. 创建 .gitignore（排除 node_modules、.next 等）
3. 提交所有文件
4. 推送到 GitHub（需要先在 GitHub 创建仓库）
5.2 部署到 Vercel
1. 去 vercel.com，用 GitHub 账号登录
2. 点 "New Project" → 选择你的博客仓库
3. 直接点 "Deploy"
4. 等 2 分钟 → 部署完成！
5. Vercel 会给你一个 xxx.vercel.app 的域名
5.3 绑定自定义域名（可选）
1. 在 Vercel 项目设置 → Domains → 添加你的域名
2. 去域名管理后台，添加 Vercel 给的 DNS 记录
3. 等几分钟 → 你的博客可以通过自定义域名访问了！
🔄 Step 6：日常写文章流程
以后每次写新文章：
1. 在 /content/posts/ 下创建 xxx.md
2. 用 Markdown 写文章
3. git add → git commit → git push
4. Vercel 自动检测到新提交 → 自动部署
5. 1 分钟后，博客上就能看到新文章了
你只需要写 Markdown，不需要碰代码。
🎯 扩展方向
这个博客可以继续扩展：
| 扩展 | 让 AI 帮你做什么 |
|---|---|
| 评论系统 | 接入 Giscus（基于 GitHub Discussions，免费） |
| RSS 订阅 | AI 帮你生成 RSS feed |
| 标签页 | 按标签筛选文章 |
| 搜索 | 前端全文搜索 |
| SEO 优化 | sitemap、meta 标签、结构化数据 |
| 阅读统计 | 接入 Google Analytics 或 Umami |
| AI 摘要 | 每篇文章自动生成 AI 摘要 |
每个扩展都是一句话的事——"帮我加上 XX 功能"。
💡 总结
- 用 AI 搭个人博客 = 5 步，总共不到 1 小时
- 你全程不写代码：描述需求 → AI 实现 → 你审查 → 上线
- 工具栈：Next.js + Tailwind CSS + Vercel = 免费 + 现代
- 部署后写文章只需：写 Markdown → git push → 自动更新
- 每个扩展功能都是一句话让 AI 搞定
下篇预告：实战项目二——用 AI 做一个微信机器人
面包君 🍞 比你多懂一点的朋友