用 ChatGPT + Cursor 30 分钟搭建个人博客完整教程

写在前面：我为什么写这篇教程

你现在看到的 joinlearn.com，就是我用 ChatGPT + Cursor 从零搭建的。整个过程，从有想法到网站上线，满打满算没超过 2 个小时。其中真正写代码（准确说是让 AI 帮我写代码）的时间，大概只有 30 分钟。

我不是专业前端开发。在搭建这个博客之前，我对 Next.js 的了解仅限于"听说过"。但这并不妨碍我做出一个功能完整、SEO 友好、加载速度飞快的博客网站。

这篇教程会把我搭建 joinlearn.com 的完整过程复原出来。你会学到的不只是"怎么搭博客"，更重要的是一套 用 AI 工具做项目的通用方法论——这个方法可以迁移到任何项目上。

为什么要自己搭博客？

你可能会问：都 2025 年了，有公众号、知乎、掘金、小红书，为什么还要自己搭博客？

我给你三个理由：

1. 完全掌控你的内容

公众号的文章说删就删，知乎的回答会被折叠，平台的算法决定了谁能看到你写的东西。而独立博客完全属于你——内容、样式、域名、数据，全部在你手里。

2. 建立不可替代的个人品牌

我见过太多程序员的简历写着"熟练使用 React"，但面试官看完毫无印象。而如果你的简历上有一个像样的个人博客，面试官打开一看：界面好看、内容专业、有技术深度——这比简历上的任何文字描述都有说服力。

一个独立博客就是你最好的作品集。

3. 搭博客本身就是最好的学习

从 0 到 1 做一个完整项目，你会接触到前端框架、CSS 样式、路由设计、SEO 优化、部署运维……这些知识点在教程里学和在实战中学完全是两种体验。

更关键的是——在 AI 时代，你可以 边做边学，让 AI 帮你生成代码，然后一行行看它写了什么、为什么这么写。这种学习效率比看视频教程高 10 倍。

你需要准备什么

在开始之前，确保你有以下几样东西：

工具	用途	是否免费
ChatGPT	需求分析、内容规划	免费版即可，Plus 更好
Cursor	代码编写	免费版有 50 次 Premium 额度
Node.js	运行项目	免费
GitHub 账号	代码托管	免费
Vercel 账号	部署上线	免费

如果你还没用过 Cursor，建议先看看我写的 Cursor AI 完全指南，对它有个基本了解再回来。

整体流程概览

整个搭建流程分为 5 步，每步大约 5-10 分钟：

Step 1: ChatGPT 需求分析（5 分钟）
    ↓
Step 2: ChatGPT 设计内容结构（5 分钟）
    ↓
Step 3: Cursor 生成项目代码（10 分钟）
    ↓
Step 4: Cursor 优化细节（5 分钟）
    ↓
Step 5: 部署到 Vercel（5 分钟）

技术栈：Next.js 15 + TypeScript + Tailwind CSS

为什么选这套技术栈？因为它是目前最流行的前端组合，Cursor 和 v0 对它的支持最好，生成的代码质量最高。

第一步：用 ChatGPT 做需求分析（5 分钟）

很多人一上来就开始写代码（或者让 AI 写代码），这是最常见的错误。正确的做法是先想清楚 你要做什么。

打开 ChatGPT，输入这样的 prompt：

我想搭建一个个人博客网站，主题是 AI 工具学习和教程。请帮我做需求分析：

1. 网站的目标用户是谁？
2. 需要哪些页面？
3. 每个页面需要什么功能？
4. 推荐什么技术栈？
5. 有没有 SEO 方面需要注意的？

我的定位：面向中文用户的 AI 学习平台，帮助普通人学会使用 AI 工具。
我的技术水平：有一点编程基础，但不是专业前端。

ChatGPT 会给你一份非常详细的需求文档。它通常会建议：

首页：品牌展示 + 精选文章 + 工具推荐
博客列表页：带分类筛选和搜索功能
文章详情页：Markdown 渲染 + 目录导航 + 相关推荐
关于页：个人介绍和联系方式
工具推荐页：AI 工具卡片式展示

我的实际经验

当初搭 joinlearn.com 的时候，ChatGPT 还额外建议我加一个"学习路径"功能——把分散的教程串成有顺序的学习路线。这个建议非常好，我后来确实加上了。

所以别小看需求分析这一步。ChatGPT 在这个环节的价值不只是帮你整理思路，它还能给你一些你自己想不到的好点子。

第二步：用 ChatGPT 设计内容结构（5 分钟）

需求分析做完，接下来让 ChatGPT 帮你设计数据结构。这一步决定了你的博客文章怎么组织。

基于上面的需求分析，请帮我设计博客文章的 TypeScript 类型定义。需要包含：
- 文章基本信息（标题、描述、作者、日期）
- 分类和标签系统
- 阅读时间
- 是否精选
- Markdown 格式的正文内容

另外，请帮我规划文章分类体系，要适合 AI 工具教程类博客。

ChatGPT 会生成类似这样的代码：

export interface BlogPost {
  slug: string          // URL 路径标识
  title: string         // 文章标题
  description: string   // 摘要描述
  content: string       // Markdown 正文
  category: string      // 分类
  tags: string[]        // 标签
  author: string        // 作者
  publishedAt: string   // 发布日期
  readingTime: string   // 阅读时间
  featured?: boolean    // 是否精选
}

以及分类体系建议：

export const blogCategories = [
  "全部",
  "AI 工具教程",
  "AI 绘画",
  "自动化",
  "开发环境",
  "项目实战",
  "思考心得",
]

为什么这一步很重要？

因为数据结构决定了后面所有页面的设计。如果结构设计得好，后面加功能、改样式都很轻松。如果一开始设计得不好，后面改起来非常痛苦。

我在搭 joinlearn.com 时，最开始没有加 featured 字段。后来想在首页显示精选文章时，不得不回头改数据结构——虽然有 Cursor 帮忙，但还是多花了 15 分钟。所以 提前想好 比回头改要划算得多。

第三步：用 Cursor 生成项目代码（10 分钟）

这一步是核心。打开 Cursor，按 Cmd+I（Mac）或 Ctrl+I（Windows）唤出 Composer。

3.1 创建项目骨架

先在 Composer 里输入：

帮我创建一个 Next.js 15 项目，使用 App Router + TypeScript + Tailwind CSS。
项目结构如下：
- src/app/page.tsx - 首页
- src/app/blog/page.tsx - 博客列表页
- src/app/blog/[slug]/page.tsx - 文章详情页
- src/app/about/page.tsx - 关于页
- src/data/blog.ts - 博客数据文件
- src/components/ - 组件目录

设计风格：暗色系，科技感，类似 Vercel 官网的简洁风格。
主色调：蓝紫色渐变。

Cursor Composer 会自动创建所有文件。你会看到它在编辑器里一个个文件地创建和编辑——这种感觉真的很神奇，就像看一个全栈工程师在你面前全速开发。

3.2 生成首页

接下来，在 Composer 里细化首页设计：

优化首页 page.tsx：
1. 顶部 Hero 区域：标题"用 AI 学习 AI"，副标题描述网站定位
2. 精选文章区：展示 featured 为 true 的文章卡片
3. 工具推荐区：卡片式展示 5-6 个推荐的 AI 工具
4. 底部 CTA：引导用户开始学习

所有内容用中文。
用 Tailwind CSS 的渐变和动画效果。
卡片要有 hover 效果。
响应式设计，移动端适配。

3.3 生成博客列表页

优化博客列表页 blog/page.tsx：
1. 顶部有分类标签筛选栏（全部/AI 工具教程/AI 绘画/自动化/开发环境/项目实战/思考心得）
2. 文章用卡片形式展示，每个卡片显示标题、描述、分类、日期、阅读时间
3. 点击卡片跳转到文章详情页
4. 响应式：桌面端 3 列，平板 2 列，手机 1 列

3.4 生成文章详情页

优化文章详情页 blog/[slug]/page.tsx：
1. 顶部显示文章标题、作者、日期、分类、阅读时间
2. 正文用 Markdown 渲染，支持代码高亮
3. 右侧（桌面端）显示文章目录
4. 底部显示相关文章推荐
5. 生成 SEO 需要的 metadata

每一步，Cursor 都会生成完整的代码。你要做的就是看一眼生成结果，觉得 OK 就点 Accept，不满意就再给一个修改指令。

这一步的关键技巧

分步给指令：不要试图一次性让 AI 做所有事情。分成小步骤，每步做一件事，这样生成质量最高。
描述要具体：与其说"做个好看的首页"，不如说"参考 Vercel 官网风格，暗色背景，蓝紫色渐变，卡片有 hover 放大效果"。
出了问题直接说：比如"首页卡片间距太大了，改成 gap-6"或者"文章列表页的搜索功能没做，请加上"。Cursor 理解自然语言的能力很强。

第四步：用 Cursor 优化细节（5 分钟）

代码骨架生成后，通常需要调整一些细节。以下是我搭建 joinlearn.com 时遇到的几个典型问题和解决方式：

4.1 修复 Markdown 渲染样式

生成的 Markdown 渲染器通常样式比较素。在 Composer 里输入：

Markdown 渲染的样式需要优化：
- 标题字号层级要更明显
- 代码块需要暗色背景和语法高亮
- 表格需要边框和斑马纹
- 链接要有颜色区分
- 列表的缩进和间距调整

4.2 添加导航栏

添加一个固定在顶部的导航栏：
- 左侧 logo 和网站名
- 右侧导航链接：首页、博客、工具推荐、关于
- 移动端变成汉堡菜单
- 半透明毛玻璃效果

4.3 SEO 优化

为整个项目添加 SEO 优化：
- 每个页面的 metadata（title、description）
- 文章页的 Open Graph 标签
- sitemap.xml 自动生成
- robots.txt
- 结构化数据（JSON-LD）

4.4 常见坑和解法

在这一步，你可能会遇到一些问题。以下是我踩过的坑：

问题	原因	解法
样式没生效	Tailwind 配置没包含所有文件路径	检查 tailwind.config.ts 的 content 配置
图片不显示	Next.js 需要配置外部图片域名	在 next.config.js 里加 images.domains
代码块没有高亮	缺少语法高亮库	让 Cursor 安装 rehype-highlight
构建报错	TypeScript 类型问题	直接把报错信息贴给 Cursor 让它修
暗色模式有闪烁	SSR 和客户端状态不同步	使用 next-themes 库处理

遇到报错不要慌——直接复制终端里的报错信息，贴到 Cursor Composer 里，让它帮你修。我搭 joinlearn.com 的时候大概遇到了 7-8 个报错，全部都是 Cursor 帮我修的，平均每个修复时间不到 1 分钟。

第五步：部署到 Vercel（5 分钟）

代码写完，最后一步是让全世界都能访问你的博客。

5.1 推送到 GitHub

在 Cursor 的终端里执行：

git init
git add .
git commit -m "init: personal blog"
git remote add origin https://github.com/你的用户名/你的仓库名.git
git push -u origin main

5.2 在 Vercel 上部署

打开 vercel.com，用 GitHub 账号登录
点击 "Import Project"
选择你刚刚推送的仓库
Framework Preset 选 "Next.js"
其他保持默认，点击 "Deploy"
等 1-2 分钟，部署完成

Vercel 会给你一个 xxx.vercel.app 的免费域名。如果你有自己的域名，可以在 Vercel 的 Settings > Domains 里绑定。

5.3 配置自定义域名（可选）

我买了 joinlearn.com 这个域名，在阿里云的域名控制台把 DNS 解析指向 Vercel 提供的地址。整个过程大概 5 分钟，等 DNS 生效大概 10-30 分钟。

部署后还需要做什么？

博客上线只是第一步。接下来你需要：

1. 持续写内容

一个没有内容的博客不会有人来看。建议每周至少发一篇文章。内容不用特别长，800-2000 字就够了，关键是要对读者有用。

2. 做 SEO 优化

每篇文章要有独立的 title 和 description
URL 结构要干净（/blog/article-slug 而不是 /blog?id=123）
提交 sitemap 到 Google Search Console
页面加载速度要快（Vercel + Next.js 天然就快）

3. 迭代升级

博客搭好之后，可以逐步加功能：

RSS 订阅
评论系统（Giscus）
访问统计（Umami 或 Google Analytics）
邮件订阅
暗色/亮色模式切换

每次加功能都可以用 Cursor 帮你搞定，基本上描述清楚需求就行。

我搭建 joinlearn.com 的真实时间线

分享一下我的实际时间花费，给你一个参考：

阶段	时间	做了什么
需求分析	8 分钟	和 ChatGPT 聊了 3 轮，确定了页面结构和功能
数据结构设计	5 分钟	ChatGPT 生成了 TypeScript 类型和分类体系
Cursor 生成主体代码	15 分钟	首页、博客列表、文章详情、关于页
细节调整	12 分钟	导航栏、移动端适配、Markdown 样式
修复报错	8 分钟	7 个构建错误，全部贴给 Cursor 解决
第一批内容	45 分钟	用 ChatGPT 辅助写了 5 篇文章
部署上线	4 分钟	推 GitHub + Vercel 部署 + 绑定域名
总计	约 97 分钟	从零到上线

注意：纯搭建（不含写内容）的时间确实只有 30 分钟左右。写内容是另外的时间投入。

这个项目教会了我什么

搭建 joinlearn.com 的过程让我深刻体会到 AI 时代做项目的新模式：

人负责"做什么"，AI 负责"怎么做"：你需要清楚自己要什么，但不需要知道每一行代码怎么写。
拆解能力比编码能力更重要：把一个大任务拆成 5-10 个小步骤，每步给 AI 一个清晰的指令——这是 AI 时代最核心的能力。
先做，再学，在做中学：我不是学完 Next.js 再搭博客的，而是搭的过程中自然就学会了。

如果你对 AI 辅助编程的学习路径感兴趣，推荐看看我写的 AI 如何改变自学编程。

进阶技巧

用 v0 加速 UI 设计

如果你对 UI 设计不太有感觉，可以先用 v0 生成页面原型。v0 是 Vercel 出品的 AI UI 生成工具，输入自然语言描述就能生成 React + Tailwind 代码。

我的工作流是这样的：

v0 生成 UI 原型 → 导出代码 → 粘贴到 Cursor → 用 Cursor 修改和集成

这种方式特别适合设计感不强的开发者。

用 ChatGPT 批量生成内容

博客内容可以借助 ChatGPT 提高效率。但注意：不要让 AI 完全代写。好的做法是：

自己写大纲和核心观点
让 ChatGPT 帮你扩展和润色
自己检查并加入个人经验和真实案例
最终的内容应该是 70% 你的想法 + 30% AI 的润色

FAQ

Q: 完全不会编程可以跟着做吗？

可以。这篇教程的所有步骤都是给 AI 下指令，不需要你手写任何代码。但建议你花 10 分钟了解一下 HTML、CSS、JavaScript 的基本概念，这样看 AI 生成的代码不会完全一头雾水。

Q: 博客一定要用 Next.js 吗？

不一定。你也可以用 Astro、Hugo、Hexo 等其他框架。但 Next.js 的好处是 Cursor 和 v0 对它的支持最好，而且 Vercel 部署最方便。

Q: 部署到 Vercel 有费用吗？

个人使用完全免费。Vercel 的 Hobby 方案每月有 100GB 带宽和足够的构建额度，对于个人博客绰绰有余。

Q: 我可以后面再换设计风格吗？

当然可以。这也是 Cursor 的优势——你随时可以打开 Composer 说"把整个网站的设计风格改成极简白色系"，它会帮你批量修改。

总结

在 AI 时代，搭建个人博客已经从一个"技术活"变成了一个"创意活"。你需要的不是会写代码，而是知道自己要什么、能清楚地表达需求。

ChatGPT 帮你想清楚要做什么，Cursor 帮你把想法变成代码，Vercel 帮你一键上线——整个流程流畅得像在写一篇文章。

如果你已经读到这里，我强烈建议你现在就开始动手。别等到"准备好了"再开始——在 AI 时代，边做边学才是最高效的学习方式。