如何使用 Vibe Coding 快速开发个人博客

前言

在 AI 时代，编程已经不再是少数人的专利。通过 Vibe Coding（氛围编程）—— 即让 AI 理解你的意图并生成代码的方式，任何人都可以快速搭建自己的项目。

本文将介绍如何使用我的开源模板，在 几小时内 完成一个现代化的个人博客系统。

技术栈

本博客采用以下技术栈：

  • SvelteKit - 现代 Web 应用框架，轻量且高性能
  • Tailwind CSS - 实用优先的 CSS 框架
  • mdsvex - 在 Svelte 中使用 Markdown
  • TypeScript - 类型安全的 JavaScript
  • shadcn-svelte - 可复用的 UI 组件库

使用模板快速开始

1. 克隆模板

git clone https://github.com/r0n92uya0/sv-starter.git my-blog
cd my-blog

2. 安装依赖

pnpm install

3. 启动开发服务器

pnpm dev

访问 http://localhost:5173，你的博客已经运行起来了！

配置 AI 辅助开发

Claude Code 配置

  1. 安装 Claude Code：

    npm install -g @anthropic-ai/claude

  2. 配置 API Key：

    export ANTHROPIC_API_KEY="your-api-key"

  3. 在项目根目录运行：

    claude

MiniMax 配置

MiniMax 是国内优秀的 AI 大模型，性价比极高：

  1. 获取 API Key：访问 MiniMax 开放平台

  2. 配置环境变量：

    export MINIMAX_API_KEY="your-api-key"

  3. 在 Claude Code 中配置 MiniMax 作为模型提供商

常用命令速查

命令说明
pnpm dev启动开发服务器
pnpm build构建生产版本
pnpm preview预览生产构建
pnpm lint代码检查

添加新文章

在 src/routes/post/ 下创建目录：

src/routes/post/my-first-post/
└── +page.md

文件顶部添加 frontmatter：

---
title: 我的第一篇文章
description: 这是一篇文章的描述
date: 2026-01-31
tags: [标签1, 标签2]
---

# 正文内容

部署

项目已配置好 adapter-auto，支持 Vercel、Netlify 等平台：

pnpm build

推送到 GitHub，连接 Vercel 即可自动部署。

结语

好吧，这篇博客也是 Claude Code 写的。

Vibe Coding 的核心思想是：把繁琐的实现交给 AI，把创意和决策留给自己。

如果你也有想法想要实现，不妨让 AI 帮你一把！

首发于 2026-01-31