用 AI 搭建副业网站：从零到上线的完整记录

为什么我决定做一个副业网站

2025 年中，我在一家中型公司做后端开发，薪资还行，但总觉得收入结构太单一。万一哪天被裁，除了投简历没有任何后路。

我观察了身边做副业的同事，发现有人靠写技术博客每月能有几千块的广告收入。这让我很感兴趣——写东西本来就是我擅长的，而且内容网站一旦跑起来，是可以持续产生被动收入的。

问题是，我虽然会写后端代码，但对前端、设计、SEO 这些东西一窍不通。从零搭一个网站，按照传统方式可能要花好几个月。

后来我开始用 Claude Code，发现它能帮我把很多不擅长的环节快速搞定。这篇文章就是记录整个过程。

第一步：选方向和买域名

选方向的思路

做内容网站，方向比技术重要得多。我花了大概一周时间调研，核心逻辑是：

• 选自己有实际经验的领域，这样写出来的内容才有说服力
• 选有搜索量但竞争不算太激烈的细分领域
• 选能对接广告或者联盟营销的方向

我最终选了”开发者工具评测”这个方向。原因很简单：我每天都在用各种开发工具，有真实体验；这个领域的中文内容质量普遍不高，有机会做出差异化。

域名和服务器

域名我在 Namecheap 上买的，花了大概 70 块人民币一年。服务器用的 Vercel 免费套餐，后来流量上来之后升级到了 Pro 版，每月 20 美元。

这里有个建议：刚开始不要在基础设施上花太多钱。很多人还没写几篇文章就开始折腾服务器配置，这是本末倒置。

第二步：用 Claude Code 搭建网站框架

我选的技术栈是 Next.js + MDX，原因是：

• 静态生成速度快，SEO 友好
• MDX 写内容很方便，可以嵌入交互组件
• Vercel 部署零配置

让 AI 生成项目骨架

我给 Claude Code 的第一个指令大概是这样的：

帮我创建一个 Next.js 14 项目，使用 App Router，支持 MDX 内容。
需要以下页面：首页、文章列表页、文章详情页、关于页。
设计风格参考 Tailwind 官方文档那种简洁感。
要支持 SEO meta 标签和 sitemap 自动生成。

Claude Code 直接帮我生成了完整的项目结构，包括配置文件、布局组件、MDX 解析逻辑。整个过程大概 15 分钟，如果我自己从头写，至少要两三天。

处理样式和响应式布局

前端样式是我最头疼的部分。我把想要的效果描述给 Claude Code：

文章页面要有目录导航，在桌面端固定在右侧，移动端隐藏。
代码块要有语法高亮和一键复制按钮。
整体配色偏暖色调，适合长时间阅读。

生成的代码质量比我预期的好很多。当然也不是完美的，有些细节我手动调了调，比如移动端的间距、字体大小之类的。

关键配置文件

有几个配置是我反复调过的：

// next.config.js 里的 MDX 配置
const withMDX = createMDX({
  options: {
    remarkPlugins: [remarkGfm, remarkToc],
    rehypePlugins: [
      rehypeSlug,
      rehypeHighlight,
      rehypeAutolinkHeadings
    ],
  },
})

这些插件的组合是我试了好几次才确定的。Claude Code 帮我快速尝试不同方案，省了很多查文档的时间。

第三步：内容创作流程

我的写作流程

很多人以为用 AI 做内容就是让 AI 直接写文章。我的做法完全不同：

1. 自己先用某个工具一两周，积累真实体验
2. 列出文章大纲和核心观点
3. 用 Claude Code 帮我组织语言、补充技术细节
4. 自己通读全文，删掉所有”套话”，加入个人观点和真实数据
5. 用 Claude Code 检查技术准确性和 SEO 优化

这个流程保证了内容的真实性。读者能分辨出一篇文章是不是有真实体验的，AI 生成的套话一眼就能看出来。

内容模板

我让 Claude Code 帮我做了一套内容模板：

---
title: "工具名称评测"
date: "发布日期"
category: "分类"
tags: ["标签1", "标签2"]
description: "SEO 描述"
---

## 这个工具解决什么问题
## 我的使用场景
## 优点（附具体例子）
## 缺点（真话实说）
## 和同类工具对比
## 适合什么人用
## 总结与建议

有了模板，每篇文章的写作时间从一天缩短到了三四个小时。

第四步：SEO 优化

技术层面的 SEO

Claude Code 在 SEO 技术优化上帮了大忙：

• 自动生成 sitemap.xml 和 robots.txt
• 每篇文章自动生成 Open Graph 标签
• 图片自动压缩和 lazy loading
• 结构化数据标记

// 自动生成文章的结构化数据
function generateArticleSchema(article: Article) {
  return {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: article.title,
    datePublished: article.date,
    author: {
      '@type': 'Person',
      name: '作者名',
    },
    description: article.description,
  }
}

内容层面的 SEO

这部分更重要。我的做法是：

• 每篇文章针对一个具体的长尾关键词
• 标题包含关键词但要自然，不要堆砌
• 文章开头 200 字内要包含核心关键词
• 内链策略：相关文章互相链接

Google Search Console 的数据显示，大概上线两个月后开始有自然流量，第四个月日均 UV 到了 500 左右。

第五步：部署和自动化

Vercel 部署流程

部署流程非常简单：

1. 代码推到 GitHub
2. Vercel 关联仓库，自动构建部署
3. 绑定自定义域名
4. 配置 SSL 证书（Vercel 自动处理）

整个过程不到 10 分钟。

自动化脚本

我用 Claude Code 写了几个自动化脚本：

• 文章发布脚本：自动处理图片、生成摘要、提交到 Google 索引
• 数据监控脚本：每天自动抓取 Google Analytics 数据，生成周报
• 备份脚本：每周自动备份内容到另一个 Git 仓库

这些脚本加起来大概 500 行代码，Claude Code 帮我写了初版，我根据实际需要调整了一些逻辑。

真实数据分享

网站上线六个月后的数据：

• 文章数量：42 篇
• 日均 UV：约 1200
• 月均 AdSense 收入：约 2800 元
• 月均联盟营销收入：约 1500 元
• 每周投入时间：约 8 小时

这个收入不算多，但考虑到是被动收入，而且还在增长，我觉得很值。

踩过的坑

坑一：过度依赖 AI 生成内容

刚开始我试过让 AI 直接写整篇文章，结果 Google 收录很慢，排名也上不去。后来改成自己写核心内容、AI 辅助优化，效果好了很多。

坑二：技术选型过度复杂

一开始我想用 Headless CMS、微服务架构，Claude Code 也能帮我搭。但后来发现 MDX 文件 + Git 就够了，简单才是最好的。

坑三：忽视页面加载速度

有一次加了太多第三方脚本，页面加载时间到了 5 秒。Claude Code 帮我做了性能审计，删掉了不必要的依赖，最终优化到 1.5 秒以内。

坑四：不重视移动端体验

Google Analytics 显示 60% 以上的访问来自移动端。一开始我只在电脑上测试，很多排版问题在手机上才发现。后来养成了每篇文章发布前在手机上预览的习惯。

给想做副业网站的人的建议

1. 先选方向再动手写代码，方向错了一切白搭
2. 用 AI 加速开发但不要让 AI 代替你思考
3. 内容质量永远是第一位的，技术只是手段
4. 坚持更新，前三个月可能看不到效果，但要扛住
5. 关注数据，用数据指导内容方向的调整
6. 不要追求完美，先上线再迭代

总结

用 Claude Code 搭建副业网站，最大的价值不是让你省了写代码的时间，而是让你能把精力集中在最重要的事情上——创造有价值的内容。

技术门槛已经不是问题了。真正决定你能不能成功的，是你对某个领域的理解深度和持续输出的能力。

AI 是工具，不是答案。用好这个工具，路会走得快一些。