用AI建个人博客

约 2573 字大约 9 分钟

2026-06-24

你将用半天时间做出一个专业级个人博客网站

这个项目能帮你什么

想做个人网站，但一看到代码就头大。

你去找模板吧，免费的太丑，好看的要钱。自己学编程吧，HTML、CSS、JavaScript、部署、域名……光听这些词就想放弃。

找个外包？报价几千到几万不等，而且沟通成本比自己做还高。

说白了，个人博客这件事，以前要么花钱，要么花时间学技术。两个都不想花，那就只能放弃。

现在不一样了。

你正在看的这个网站，就是用AI做的。不是简单的"AI辅助写代码"，而是从零开始，一行行代码都是AI生成的。整个过程不需要你懂编程，你只需要会"说话"。

这不就来了嘛。这个项目教你怎么用Claude Code（或者Cursor），从零搭一个属于自己的博客网站。

你需要准备

准备什么	干嘛用的	大白话解释
Claude Code	干活的AI助手	它来写代码，你来指挥
Node.js	运行环境	AI写出来的代码需要一个地方跑
一个下午的时间	坐下来跟着做	大概3-4小时能出雏形
你的内容想法	博客写什么	主题方向、大概想放哪些文章

什么是Claude Code

Claude Code是一个AI编程助手。你在终端里跟它聊天，告诉它你想要什么，它就帮你写代码、创建文件、改bug。不需要你懂编程。想深入了解，可以看我的 Claude Code完整课程。

手把手做一遍

先看全景图，知道整个流程长什么样：

第1步：环境准备

安装Node.js

去 Node.js官网下载安装包，选LTS版本（长期支持版），一路下一步就行。

装完后打开终端，验证一下：

node -v
# 如果显示类似 v20.x.x 就说明装好了

安装Claude Code

在终端里运行：

npm install -g @anthropic-ai/claude-code

安装完后，输入 claude 启动，按照提示登录你的Anthropic账号。

详细安装教程

如果这步遇到问题，可以看我的 Claude Code环境准备章节，有截图一步步教。

第2步：告诉AI你想要什么

这一步是整个项目的核心。你怎么"说"，决定了AI怎么做。

下面是一段真实的Vibe Coding对话示例——也就是这个网站最初创建时的对话：

> 我想做一个个人博客网站，技术风格用VuePress 2，主题用vuepress-theme-plume。
>
> 我想要的效果：
> 1. 首页有一个大气的Hero横幅，写上博客名字和一句话介绍
> 2. 有一组feature卡片，展示博客的几个核心方向
> 3. 有笔记/文章区域，能按分类组织内容
> 4. 整体风格：简洁、现代、有质感
> 5. 支持中文，配色用蓝灰色系
> 6. 有深色模式
>
> 你帮我先把项目骨架搭起来，首页做出来就行。

AI收到这段话后，会开始创建项目、安装依赖、配置主题、生成首页代码。整个过程你只需要在它问"允许创建文件吗"的时候输入 y。

Vibe Coding是什么

Vibe Coding（氛围编程）就是你不写代码，你用自然语言描述你要什么"氛围"、什么效果，AI帮你实现。你只需要当"产品经理"，指挥AI干活就行。

第3步：逐步迭代

AI生成的第一版肯定不完美。这时候进入"迭代循环"。

看效果

让AI帮你启动开发服务器：

> 帮我启动开发服务器，我想在浏览器里看看效果

AI会运行启动命令，你在浏览器打开 localhost:8080 就能看到网站了。

提改进意见

看到效果后，你会觉得有些地方不对。没关系，直接跟AI说：

> 我看了效果，有几个地方想改：
> 1. 首页Hero区域的字号太大了，缩小一点
> 2. feature卡片我想做成毛玻璃效果，加一点彩色装饰条
> 3. 整体配色太蓝了，想稍微暖一点
> 4. 底部加一个footer，写上版权信息和备案号

AI会逐个帮你改。改完刷新浏览器看效果。

继续细化

满意了之后，继续加东西：

> 现在帮我加文章页。
> 我想写两类内容：
> 1. AI工具教程（放在notes/aigc/目录下）
> 2. 编程技术笔记（放在notes/tech/目录下）
> 每篇文章有标题、创建时间、侧边栏导航。

就这样，一轮一轮地对话。从首页→文章页→导航→样式细节，每一步都跟AI说清楚你要什么。

Context Engineering实战

跟AI聊到后面，对话会很长。这时候你要注意"上下文管理"：

一个话题聊完，用 /compact 压缩对话
大的改动开新对话
重要的决策让AI记到项目记忆文件里（CLAUDE.md）这就是Context Engineering——让AI在正确的上下文里干活。我的Claude Code课程里有专门一章讲这个。

第4步：部署上线

网站做完了，怎么让别人看到？

免费方案（推荐新手）

平台	优点	缺点
Vercel	一键部署，免费域名	需要GitHub账号
Netlify	同上，操作简单	同上
GitHub Pages	完全免费	只能放静态站

告诉AI你想用哪个平台：

> 我想把这个网站部署到Vercel上，帮我配置好部署需要的文件，
> 然后告诉我怎么操作。

AI会帮你生成部署配置文件，然后一步步告诉你怎么操作。

自有服务器方案

如果你有自己的服务器（比如阿里云、腾讯云），告诉AI：

> 我有一台阿里云服务器，IP是xxx.xxx.xxx.xxx，
> 帮我把网站部署上去。用Nginx做web服务器。
> 告诉我每一步怎么操作。

AI会给你完整的部署步骤。

效果对比

对比项	以前找模板/外包	用AI做
成本	免费的丑，好看的几百到几千	只需要AI的使用费（几十块）
时间	找模板1天，定制开发1-2周	半天出雏形，2-3天完善
定制化	模板长什么样就什么样	你说了算，想要什么效果就说什么效果
改起来	改个字都要找设计师	跟AI说一句话就行
学到的东西	啥也没学到	顺便理解了网站是怎么运行的
成就感	"这是我买的"	"这是我做的！"

进阶变种

基础博客做完了，还可以继续加功能。每个功能跟AI说一句话就能开始做：

加评论系统

> 帮我给博客加一个评论功能，用Giscus（基于GitHub Discussions）。
> 读者可以用GitHub账号评论。

加搜索功能

> 帮我给博客加一个全站搜索功能，
> 用户输入关键词就能找到相关文章。

加数据分析

> 帮我接入Google Analytics或百度统计，
> 我想看看每天有多少人访问、看了哪些文章。

加邮件订阅

> 我想在博客底部加一个邮件订阅入口，
> 读者留邮箱就能收到我更新文章的通知。

做成其他类型的网站

同样的方法，你可以做：

在线简历/作品集网站
知识库/Wiki
产品展示页
小型商城

只要跟AI说清楚你要什么，它都能帮你做。

想系统学Claude Code

这个项目只是入门。如果你想真正掌握用AI做各种东西的能力，建议看我的 Claude Code完整课程，从安装到高阶技巧，14章搞定。

常见问题

Q1：我完全不懂编程，真的能做出来吗？

能。这个网站就是一个活生生的例子。你不需要懂代码，你只需要会描述你想要什么。AI负责写代码，你负责提需求。

Q2：AI写的代码我不懂，出bug了怎么办？

直接把报错信息复制给AI，它自己会修。你甚至不需要看懂报错说的是什么。AI会告诉你"这里出了什么问题，我帮你改好了"。

Q3：做出来的网站性能怎么样？

VuePress生成的网站是静态站，性能非常好。加载速度快、SEO友好。你不需要担心性能问题，框架本身已经优化得很好了。

Q4：以后想改内容怎么办？

两种方式。简单的改动（改文字、加文章），直接跟AI说就行。如果你想自己改，AI会告诉你哪个文件改哪一行。慢慢你就会看懂一些了。

Q5：需要花钱吗？

AI使用费：Claude Code需要Anthropic API或Claude Pro/Max订阅。部署：有免费方案可选。域名：可选可不选，用免费域名也行。整体成本远低于找人做。

小结

要点	一句话总结
核心方法	Vibe Coding——你说效果，AI写代码
工具选择	Claude Code或Cursor，都能做
关键能力	会描述需求比会写代码更重要
迭代是王道	第一版不完美很正常，一轮轮改
想深入学	Claude Code课程14章，从入门到精通

学到了？更多AI实战项目在知识星球，每周更新 → 加入星球