HOW - 从0到1搭建自己的博客站点（三）

如果你希望可视化管理博客内容：快速方案：使用 Notion + Vercel + Next.js?

使用 Notion + Vercel + Next.js 搭建博客的后台管理是一个非常热门且高效的方式，特别适合希望：

• 快速上线
• 无需搭后台服务
• 内容可视化管理
• 写文章像写笔记一样轻松

下面我会详细讲清楚整个方案，包括：

1. 这个方案的核心是什么？

• Notion：你写文章、组织内容的“CMS”（内容管理系统）
• Next.js：你的博客前端框架（支持静态渲染）
• Vercel：部署平台，支持自动构建、自动预览
• Notion API：用来把 Notion 内容读取到博客前端

---

Notion - The next gen of notes & docs

2. 技术流程图

你写文章（Notion 页面）↓
Next.js 获取 Notion 数据（通过 Notion API）↓
构建静态博客页面（SSG 或 ISR）↓
部署到 Vercel（免费/自动化）

---

3. 快速实现步骤（最流行的 Notion 博客方案）

我们以 notion-next-blog 为例，它是目前最完整、最受欢迎的开源方案之一。

步骤一：准备你的 Notion 内容

1. 打开 Notion，新建一个数据库（Database）
   例如：文章数据库，包含字段：

   • title：标题
   • slug：自定义路径（如：my-first-post）
   • tags：标签
   • status：发布状态（如 Published / Draft）
   • date：发布日期
   • content：正文（直接写即可）

2. 设置数据库为公开分享（Share → 公开链接）

3. 复制该数据库的 ID，你后续需要在代码里用它。

---

步骤二：搭建前端项目（Next.js）

方法 A：用别人搭好的项目（推荐）

🚀 推荐项目：
👉 https://github.com/tangly1024/NotionNext

1. Fork 或 clone 仓库
2. 安装依赖并配置 .env 文件（见下方）
3. 启动项目查看效果

你需要配置 .env.local

NOTION_PAGE_ID=你的 Notion 数据库 ID
NOTION_ACCESS_TOKEN=（可选，如果你的页面非公开）

---

步骤三：部署到 Vercel

1. 登录 vercel.com 并授权你的 GitHub
2. Import 项目 → 配置环境变量
3. 一键部署，自动绑定域名、HTTPS

---

4. 管理博客内容，只需在 Notion 编辑！

你不再需要登录 CMS 或写 Markdown 文件，而是：

• 打开 Notion，创建一条记录
• 填好标题、正文、日期等
• 自动触发 Vercel 重新构建博客页面

---

Bonus：NotionNext 的强大功能

功能	支持
标签分类	✅
搜索功能	✅
RSS 支持	✅
评论系统集成（Waline、Giscus）	✅
图片懒加载	✅
多语言切换	✅
多主题（暗黑模式）	✅
自定义导航栏	✅
响应式支持	✅

---

总结：为什么选 Notion + Next.js？

优点	说明
零成本搭建 CMS	Notion 免费，易用
内容实时可视化更新	无需重新部署
免费部署	Vercel 免费计划支持
内容写作极其方便	直接用 Notion
社区方案成熟	有很多优秀开源项目支持
响应式、性能高	支持静态生成 & CDN 加速

---

推荐项目 & 学习资料

名称	链接
NotionNext	https://github.com/tangly1024/NotionNext
Vercel	https://vercel.com
Notion API 文档	https://developers.notion.com
免费图床（图像托管）	https://imgur.com, https://picx.xpoet.cn