第 6 讲：快速上线 MVP - 3 小时完成你的第一个网站

大家好，我是正在实战各种AI 项目的程序员晚枫。

---

🎯 完美主义是建站的最大敌人

我见过太多人卡在这一步：

• "我的Logo还没设计好，先不上线"
• "我只写了3篇文章，等写够10篇再上线"
• "首页还没调到完美，再改改……"

结果呢？3个月过去了，网站还没上线。

记住：一个上线的丑网站，比一个没上线的完美网站有价值100倍。

为什么？因为：

1. 只有上线了，Google才能开始收录（SEO需要时间积累）
2. 只有上线了，你才能收到真实用户的反馈
3. 只有上线了，你才有动力继续优化

这一讲，我教你3小时上线一个最小可用网站（MVP），先完成，再完美。

---

什么是MVP？

MVP（Minimum Viable Product）：最小可用产品

核心思想：

• 先做一个能用的版本
• 快速上线，获取反馈
• 根据反馈迭代优化

为什么先做MVP？

• ✅ 快速验证想法（你的网站定位对不对，用户说了算）
• ✅ 建立信心（看到网站上线的成就感很重要）
• ✅ 避免过度设计（80%的功能没人用）
• ✅ 早点开始积累SEO（Google收录需要3-6个月）

MVP vs 完美主义的对比

维度	完美主义	MVP思维
上线时间	2-3个月	3小时
页面数	10+	3个
文章数	10+	3-5篇
设计程度	精雕细琢	够用就行
SEO积累	0（没上线）	已开始
用户反馈	无	有真实数据
心理状态	焦虑（还没做好）	兴奋（已经上线）

---

MVP网站标准

一个MVP网站只需要：

必须的页面（3个）

1. 首页 — 介绍你是谁、做什么
2. 关于我 — 详细背景
3. 联系方式 — 让人能找到你

必须的内容（5个）

1. 一句话介绍（主标题）
2. 详细说明（副标题）
3. 你的服务/产品
4. 信任背书（案例/评价）
5. 行动号召（CTA）

可选的页面（以后再加）

• 博客/文章
• 作品集
• 服务详情页
• 常见问题
• 定价页面

---

实战：用Notion + Super搭建网站

为什么选Notion + Super？

• ✅ 最快，3小时能上线
• ✅ 零代码，会打字就行
• ✅ 成本最低
• ✅ 以后可以迁移

第一步：注册账号（10分钟）

1. 打开 notion.so，注册账号
2. 打开 super.so，注册账号
3. 在Super中绑定域名（之前注册的）

第二步：创建Notion页面（30分钟）

创建首页：

1. 新建一个Page，命名为"Home"
2. 添加以下内容：

# [你的名字] - [一句话介绍]

[副标题：详细说明你的价值]

[CTA按钮：预约咨询/查看作品/联系我]

---

## 我的服务

- 服务1：[描述]
- 服务2：[描述]
- 服务3：[描述]

---

## 成功案例

[案例1]
[案例2]
[案例3]

---

## 客户评价

> "评价内容" - 客户名

---

## 关于我

[你的背景、经历、资质]

---

## 联系方式

- 微信：[你的微信]
- 邮箱：[你的邮箱]
- 电话：[你的电话]

创建关于页面：

1. 新建Page，命名为"About"
2. 添加详细内容：
   • 个人背景（你从哪里来）
   • 工作经历（你做过什么）
   • 资质证书（你凭什么让人信任）
   • 个人照片（增加真实感）
   • 个人故事（让人记住你）

创建联系页面：

1. 新建Page，命名为"Contact"
2. 添加联系方式
3. 可以嵌入表单（用Tally或Typeform，免费）

第三步：用Super发布（30分钟）

1. 登录 super.so
2. 点击"New Site"
3. 选择你的Notion页面
4. 配置域名
5. 选择主题（选简洁的）
6. 配置导航菜单
7. 点击"Publish"

第四步：配置导航（20分钟）

在Super后台配置：

• 导航菜单：Home | About | Contact
• Footer：版权信息、社交媒体链接
• Favicon：上传你的Logo图标
• SEO：填写网站标题和描述

第五步：测试（10分钟）

1. 用电脑访问网站
2. 用手机访问网站
3. 检查所有链接
4. 检查表单是否能用
5. 检查加载速度

---

实战：用Framer搭建网站

第一步：选择模板（20分钟）

1. 打开 framer.com
2. 浏览模板库
3. 选择个人网站模板
4. 点击"Use Template"

第二步：修改内容（60分钟）

1. 修改文字内容（用AI生成的文案）
2. 替换图片（用Unsplash免费图片）
3. 调整配色（用之前生成的配色方案）
4. 添加Logo（用Canva生成的）

Framer快捷操作：

• 按住Option拖动 = 复制元素
• 双击文字 = 编辑
• 右键 = 更多选项
• Cmd+Z = 撤销

第三步：配置域名（20分钟）

1. 进入Settings → Domains
2. 添加你的域名
3. 按提示配置DNS

第四步：发布（10分钟）

1. 点击右上角"Publish"
2. 选择域名
3. 确认发布

---

实战：用WordPress搭建网站

第一步：安装WordPress（30分钟）

1. 登录主机控制面板
2. 找到"一键安装WordPress"
3. 填写网站信息
4. 完成安装

第二步：选择主题（30分钟）

1. 登录WordPress后台
2. 外观 → 主题 → 添加
3. 搜索"Astra"或"OceanWP"（都免费，速度快）
4. 安装并激活

第三步：导入模板（30分钟）

1. 安装"Starter Templates"插件
2. 选择一个个人网站模板
3. 导入完整网站

第四步：修改内容（60分钟）

1. 用Elementor编辑器修改页面
2. 替换文字和图片
3. 配置导航菜单
4. 安装必要插件（Yoast SEO、WPForms Lite）

WordPress必装插件清单（只装这些，别多装）：

• Yoast SEO — SEO优化
• WPForms Lite — 联系表单
• WP Super Cache — 速度优化
• UpdraftPlus — 自动备份
• Wordfence — 安全防护

第五步：发布（10分钟）

1. 检查所有页面
2. 设置 → 常规 → 取消"建议搜索引擎不索引本站"
3. 确认无误后发布

---

上线检查清单

网站上线前，检查以下项目：

内容检查

• 没有错别字
• 所有链接都能用
• 图片能正常显示
• 表单能正常提交
• CTA按钮清晰可见

技术检查

• 电脑访问正常
• 手机访问正常
• 页面加载速度快（3秒内）
• HTTPS已启用
• Favicon已设置
• 404页面已设置

SEO检查

• 页面标题已设置
• 页面描述已设置
• 已提交Google Search Console
• 网站地图已生成
• robots.txt已配置

---

避坑指南：上线阶段的5个陷阱

陷阱1：忘记取消"搜索引擎不索引"

❌ WordPress默认勾选了"建议搜索引擎不索引本站"

✅ 上线后立即取消！否则Google永远找不到你

陷阱2：不设HTTPS

❌ 网站用http://，浏览器显示"不安全"

✅ 大部分主机提供免费SSL证书，一定要开

陷阱3：忘记测试移动端

❌ 电脑上看着很好，手机上一团糟

✅ 每个页面都在手机上测试一遍

陷阱4：表单收不到邮件

❌ 用户填了表单，你却收不到通知

✅ 先自己提交一次表单，确认能收到邮件

陷阱5：没有备份方案

❌ 网站挂了，什么都没了

✅ 设置自动备份（UpdraftPlus或主机自带备份）

---

本讲作业

作业1：完成MVP网站

按照本讲教程，用你选择的工具搭建网站。

时间要求：3-4小时内完成

作业2：提交网站链接

在学习群分享你的网站链接，获取反馈。

作业3：记录问题

记录搭建过程中遇到的问题，在群里提问。

---

下一步

👉 [第七讲：AI内容创作](/course/AI 相关/人民邮电出版社/ads/openclaw/personal-website/第 7 讲-AI 内容创作/)

网站上线后，需要持续更新内容。在下一讲中，我们会学习：

• 用AI写文章
• 用AI生成图片
• 用AI制作视频

---

💬 加入学习交流群

扫码加入学习群，分享你的网站链接，获取老师和同学的反馈。

👉 点击加入交流群

---

恭喜！你已经完成了第一个网站。记住：完成比完美重要。先上线，再慢慢优化。

我的python-office网站第一版丑得我自己都不想看，但它上线了。3个月后才慢慢改到现在的样子。

---

💬 联系我

平台	账号/链接
微信	扫码加好友
微博	@程序员晚枫
知乎	@程序员晚枫
抖音	@程序员晚枫
小红书	@程序员晚枫
B 站	Python 自动化办公社区

主营业务：AI 编程培训、企业内训、技术咨询

🎓 AI 编程实战课程

想系统学习 AI 编程？程序员晚枫的 AI 编程实战课 帮你从零上手！

• 👉 课程报名：点击这里报名，前3讲免费试听
• 👉 免费试看：B站免费试看前3讲，先看看适不适合自己