English | 简体中文

Vibe Vibe

Vibe Vibe —— 人人都能学会的 AI 编程（Vibe Coding）指南

面向零编程基础学习者的 AI 辅助编程系统化教程，从「我有一个想法」到「我做出了一个产品」，让人人都能成为 Builder。

点击以访问教程主页：www.vibevibe.cn

核心理念

践行 OpenAI 联合创始人 Andrej Karpathy 提出的 Vibe Coding 理念——从 Coder 到 Commander：通过自然语言与 AI 对话，让编程从"写代码"转变为"对话式创作"。

"完全沉浸于编程的'氛围'中，忘记代码的存在。"

快速开始

📖 在线阅读：www.vibevibe.cn

私有化部署

如果你想在本地或内网环境部署本教程站点，仓库已经提供了可直接使用的 Dockerfile 和 docker-compose.yml：

docker compose up -d --build

默认访问地址为 http://localhost:1024。

更完整的部署方式、静态文件部署方案和离线环境注意事项，请查看部署指南。

教程定位

国内首个系统化的 Vibe Coding 开源教程，分为四大板块：

• 为什么需要这份教程？ Vibe Coding 已成为全球趋势（越来越多的创业公司大部分代码由 AI 辅助生成），但国内学习资源碎片化严重，缺乏系统化、零基础友好、包含完整进阶路径的教程。

• 适合人群：编程零基础者、大学生、创业者、传统程序员、职场人士，任何想用 AI 快速实现想法、提升工作效率或学习新范式的人。

进阶版预告：在线 IDE + Skills

我们即将推出在线开发环境，无需本地配置环境，打开浏览器即可开始学习：

• 云端 IDE —— 内置完整的 Node.js 24、Python、Docker 等开发环境
• 50+ AI Skills —— 预装丰富的 AI 辅助技能包，覆盖开发全流程
• 开箱即用 —— 无需安装任何软件，登录即可开始编程实践

让学习门槛降到最低，敬请期待！

学习产出

贡献者名单

目录

本教程分为四大板块，采用渐进式学习路径设计（点击展开详细目录）：

基础篇目录
│
├── 写在最前面
│   └── 找到你的位置
│
├── 第1章：觉醒 —— 为什么现在是编程最好的时代
│   ├── 1.1 编程已死，编程永生：从 Coder 到 Commander
│   ├── 1.2 核心概念：Vibe Coding 与 Spec Coding 详解
│   ├── 1.3 破除迷信：不懂英文、数学不好也能写代码吗？
│   ├── 1.4 工具初探：Cursor、Windsurf、Bolt.new 与 Replit 选型指南
│   └── 1.5 Hello World：你的第一个 3 分钟 AI 网页
│
├── 第2章：心法 —— 像产品经理一样思考
│   ├── 2.1 拒绝功能堆砌：为什么你的 AI 写不出复杂的 App？
│   ├── 2.2 MVP 思维：如何设计一个"能跑的最小版本"
│   ├── 2.3 灵魂三问：用户是谁？痛点在哪？为何用你？
│   └── 2.4 实战演练：拆解一个"背单词软件"的想法
│
├── 第3章：技法 —— 与 AI 对话的艺术
│   ├── 3.1 提示词工程基础：Context is King
│   ├── 3.2 用户旅程地图：把想法变成 AI 能懂的路径
│   ├── 3.3 编写第一份 PRD：让 AI 不再胡编乱造
│   └── 3.4 功能优先级 P0/P1/P2：学会对 AI 说"这个先不做"
│
├── 第4章：实战 —— 从 0 到 1 开发个人工具
│   ├── 4.1 环境准备：无需命令行的开发环境搭建
│   ├── 4.2 第一轮：生成静态页面 —— 先看"脸"
│   ├── 4.3 第二轮：注入逻辑与交互 —— 再长"脑"
│   ├── 4.4 第三轮：数据存储基础
│   └── 4.5 Debug 指南：当 AI 报错时，如何用 AI 修复 AI
│
├── 第5章：精进 —— 从"能用"到"好用"
│   ├── 5.1 后悔药：代码改崩了怎么办
│   ├── 5.2 见世面：把网页发到互联网上
│   ├── 5.3 护城河：AI 时代的安全意识
│   ├── 5.4 再进化：项目的持续迭代与优化
│   ├── 5.5 知边界：Vibe Coding 的能与不能
│   └── 5.6 启程前：本章总结与进阶预告
│
├── 结语：给未来的你
│
├── 下部预告：Vibe Coding 全栈实战教程
│
└── 附录
    ├── A. Prompt 速查清单
    ├── B. 常见错误与解决方案速查表
    ├── C. 术语表（中英对照）
    ├── D. 工具对比速查表
    └── E. 项目 idea 清单

进阶篇目录
│
├── 第1章：环境搭建、代码形态与包管理器
├── 第2章：开发工具与 AI 调教
├── 第3章：PRD 与文档驱动开发
├── 第4章：开发常识与技术栈
├── 第5章：代码运行状态与构建原理
├── 第6章：界面（UI）与交互（UX）
├── 第7章：环境变量与安全机制
├── 第8章：数据持久化与数据库
├── 第9章：功能测试流程与自动化脚本
├── 第10章：Localhost 与公网访问
├── 第11章：Git 版本控制与跨平台协作
├── 第12章：无服务器部署与 CI/CD 自动化
├── 第13章：域名解析原理与网络接入
├── 第14章：云服务器运维与项目部署
├── 第15章：SEO、分享与数据统计
└── 第16章：用户反馈与产品迭代

实践篇目录
│
├── 基础板块（按人群分类）
│   ├── 文科生/商科生项目 —— 内容创作、数据展示类
│   ├── 理工科学生项目 —— 算法可视化、数据处理类
│   └── 职场人士项目 —— 工作流自动化、效率提升类
│
└── 进阶板块（基于 Sean's Stories 系列）
    ├── 核心技能 —— 上线应用、数据库、后端部署、用户认证
    ├── AI Agent 开发 —— RAG、向量数据库、MCP 集成
    ├── 全栈项目实战 —— SaaS、地图应用、移动应用
    └── 工具与效率 —— n8n、GitHub 工作流、React/TS 进阶

优质文章篇目录
│
├── 知名公司博客 —— OpenAI、Anthropic、Vercel 等技术博客
├── 优质播客 —— AI、开发者、创业者相关播客推荐
├── 研究报告 —— AI 发展报告、开发者调查、行业趋势
├── 优质 Newsletter —— 值得订阅的技术周刊
└── 开发者社区 —— Discord、Twitter、GitHub 优质资源

参与贡献

• 如果你发现了一些问题，可以提Issue进行反馈，如果提完没有人回复你可以联系保姆团队的同学进行反馈跟进~
• 如果你想参与贡献本项目，可以提Pull request，如果提完没有人回复你可以联系保姆团队的同学进行反馈跟进~
• 如果你对 Datawhale 很感兴趣并想要发起一个新的项目，请按照Datawhale开源项目指南进行操作即可~

关注我们

扫描下方二维码关注公众号：Datawhale

Star History

LICENSE

index

title: 部署指南 description: VibeVibe 教程私有化部署指南

私有化部署指南

::: warning 快速更新中 本教程正处于快速更新期，部署后可能很快有新版本发布。建议定期拉取最新代码并重新构建以获取最新内容。 :::

本指南介绍如何在企业内部网络环境中私有化部署 VibeVibe 教程网站。

项目概述

VibeVibe 是基于 VitePress 构建的静态网站，完全独立运行，无需外部 API 调用。这意味着私有化部署非常简单——只需要将构建产物部署到您内部的服务器即可。

技术栈

部署方式

方式一：直接部署静态文件（推荐）

这是最简单的方式，适合大多数场景。

# 1. 克隆项目
git clone https://github.com/datawhalechina/vibe-vibe.git
cd vibe-vibe

# 2. 安装依赖
pnpm install

# 3. 构建静态网站
pnpm build

# 4. 构建产物位于 docs/.vitepress/dist 目录
# 将整个 dist 文件夹复制到您的 Web 服务器即可

构建完成后，docs/.vitepress/dist 目录包含所有静态文件，您可以将其部署到：

• Nginx：直接指向 dist 目录
• Apache：配置 DocumentRoot
• IIS：将 dist 目录设为网站根目录
• 对象存储：上传到 OSS/S3 并配置静态网站托管
• 任何静态文件托管服务

方式二：使用 Docker（推荐）

Docker 方式最简单——容器内已集成 Nginx，一条命令即可启动：

# Dockerfile
FROM node:24-alpine AS builder

WORKDIR /app

# 安装 pnpm
RUN npm install -g pnpm

# 复制 package.json 和 lock 文件
COPY package.json pnpm-lock.yaml ./

# 安装依赖
RUN pnpm install --frozen-lockfile

# 复制项目文件
COPY . .

# 构建
RUN pnpm build

# 使用 Nginx 提供静态文件服务
FROM nginx:alpine
COPY --from=builder /app/docs/.vitepress/dist /usr/share/nginx/html
EXPOSE 80

# 构建镜像
docker build -t vibevibe-docs .

# 运行容器（访问 http://localhost:8080）
docker run -d -p 8080:80 vibevibe-docs

优势：容器内已集成 Nginx，无需额外配置，一条命令启动服务。

方式三：使用 EdgeOne Pages（腾讯云）

如果您使用腾讯云 EdgeOne Pages，可以一键部署：

1. 在 EdgeOne 控制台创建静态网站
2. 配置 GitHub 仓库自动同步
3. 每次推送代码自动重新构建

方式四：本地预览

构建后可以在本地预览：

pnpm preview
# 访问 http://localhost:4173

离线环境注意事项

由于是静态网站，私有化部署后完全离线运行，不需要互联网连接。

可能需要处理的离线资源

1. Giscus 评论系统（如使用）：
   • 需要互联网连接才能加载
   • 建议：在私有环境部署时禁用或自建评论系统

1. 图片资源：
   • 当前使用 GitHub raw 链接
   • 建议：将图片下载到本地 docs/public/ 目录

1. 外部 CDN：
   • 当前可能使用了 CDN 资源
   • 建议：构建时将资源内联或使用内部镜像

离线构建步骤

完全离线环境下的构建步骤：

# 1. 在有网络的机器上下载项目
git clone https://github.com/datawhalechina/vibe-vibe.git

# 2. 打包项目（包含 node_modules）
tar czf vibe-vibe.tar.gz vibe-vibe/

# 3. 传输到离线服务器并解压
tar xzf vibe-vibe.tar.gz

# 4. 如果 node_modules 不完整，需要重新安装
cd vibe-vibe
# 使用本地 npm 源或离线安装包

常见问题

Q: 需要数据库吗？

不需要。VibeVibe 是纯静态网站，所有内容都是 Markdown 文件预渲染生成的。

Q: 需要配置域名吗？

不需要。您可以使用内网 IP 地址访问，如 http://192.168.1.100:8080。

Q: 支持搜索功能吗？

支持。VitePress 内置的客户端搜索功能完全离线可用。

Q: 如何更新内容？

# 1. 拉取最新代码
git pull

# 2. 重新构建
pnpm build

# 3. 替换 dist 目录即可

Q: 构建失败怎么办？

# 清理缓存重新构建
rm -rf node_modules docs/.vitepress/cache
pnpm install
pnpm build

私有化部署建议

安全加固

1. 移除评论功能：在配置中禁用 Giscus
2. 内网部署：仅在公司内网访问，不暴露到公网
3. 访问控制：配置 Nginx 基本认证或集成公司 SSO

内容定制

如果需要定制教程内容（如添加公司内部案例），可以直接修改 Markdown 文件后重新构建。

联系支持

如遇到部署问题，请：

1. 查看本文档的常见问题部分
2. 在 GitHub 提 Issue：datawhalechina/vibe-vibe

许可证

本项目采用 CC BY-NC-SA 4.0（署名-非商业性使用-相同方式共享 4.0）许可协议。

许可证摘要

• ✅ 允许：复制、分发、修改、创作衍生作品
• ✅ 条件：须署名原作者、非商业用途、以相同方式共享
• ❌ 禁止：商业用途

私有化部署的许可证含义

在私有化部署场景下：

完整许可证文本请参阅：Creative Commons BY-NC-SA 4.0