ByteNoteByteNote
字

字节笔记本

2026年2月23日

NotionNext：使用 Next.js + Notion API 构建的静态博客系统

#开源工具

NotionNext 是一个使用 Next.js + Notion API 实现的静态博客系统，专为 Notion 用户和所有创作者设计。它支持多种部署方案，无需服务器即可零门槛搭建个人博客网站。截至目前，该项目在 GitHub 上已获得超过 11,000 stars 和 14,000+ forks，是国内最受欢迎的开源博客解决方案之一。

项目简介

NotionNext 由 tangly1024 开发维护，基于 Nobelium 项目演进而来。它充分利用 Notion 作为内容管理后台的强大功能，让创作者可以专注于写作本身，而无需关心技术细节。只需在 Notion 中撰写文章，博客网站就会自动同步更新。

核心特性

  • Notion 作为 CMS：直接使用 Notion 页面作为博客文章，支持富文本、图片、代码块等所有 Notion 格式
  • 多种部署方案：支持 Vercel、Cloudflare Pages、Docker 等多种部署方式
  • 多主题支持：内置 Next、Medium、Hexo、Fukasawa 等多种精美主题，一键切换
  • 静态生成：基于 Next.js SSG，访问速度快，SEO 友好
  • 评论系统集成：支持 Twikoo、Giscus、Gitalk、Cusdis、Utterances 等多种评论系统
  • 响应式设计：完美适配桌面、平板、手机等各种设备
  • 暗色模式：支持自动/手动切换明暗主题
  • AI 加持：充分利用 Notion AI 辅助内容创作

技术栈

快速开始

前置要求

  • Node.js >= 20
  • Notion 账号和一个公开的 Notion 页面

安装步骤

1. Fork 项目

访问 NotionNext GitHub 仓库，点击右上角 "Fork" 按钮将项目复制到自己的账号下。

2. 配置 Notion

  1. 在 Notion 中创建一个新的 Integration：

    • 访问 Notion Integrations
    • 点击 "New integration"
    • 填写名称并选择关联的工作区
    • 复制生成的 Token

  2. 将你的 Notion 页面分享给 Integration：

    • 打开你的 Notion 页面
    • 点击右上角 "Share"
    • 选择你的 Integration 并授予权限

  3. 复制页面 ID（从页面 URL 中获取）

3. 部署到 Vercel

  1. 访问 Vercel，使用 GitHub 账号登录
  2. 点击 "Add New Project"
  3. 选择你 Fork 的 NotionNext 仓库
  4. 在环境变量中添加：
    • NOTION_PAGE_ID: 你的 Notion 页面 ID
    • NOTION_ACCESS_TOKEN: 你的 Integration Token
  5. 点击 "Deploy"

4. 自定义配置

编辑 blog.config.js 文件，修改以下配置：

javascript
const BLOG = {
  // 站点信息
  TITLE: '我的博客',
  DESCRIPTION: '使用 NotionNext 搭建的个人博客',
  AUTHOR: '作者名',

  // Notion 配置
  NOTION_PAGE_ID: process.env.NOTION_PAGE_ID,

  // 主题配置
  THEME: 'next', // 可选: next, medium, hexo, fukasawa

  // 其他配置...
}

主题预览

NotionNext 提供多种精美主题，点击左下角挂件即可切换：

主题预览
Next预览
Medium预览
Hexo预览
Fukasawa预览

在线演示：https://preview.tangly1024.com/

高级配置

自定义域名

在 Vercel 项目设置中，点击 "Domains" 添加你的自定义域名，然后按照提示配置 DNS 记录。

启用评论

以 Giscus 为例：

  1. 确保仓库已开启 Discussions 功能
  2. 访问 Giscus 配置页面
  3. 填写仓库信息，生成配置代码
  4. 将配置添加到 blog.config.js：
javascript
COMMENT_GISCUS_REPO: '你的用户名/仓库名',
COMMENT_GISCUS_REPO_ID: '仓库ID',
COMMENT_GISCUS_CATEGORY: 'General',
COMMENT_GISCUS_CATEGORY_ID: '分类ID',

网站分析

支持多种分析工具：

javascript
// Google Analytics
ANALYTICS_GOOGLE_ID: 'G-XXXXXXXXXX',

// 百度统计
ANALYTICS_BAIDU_ID: '你的百度统计ID',

使用 Docker 部署

bash
# 克隆项目
git clone https://github.com/tangly1024/NotionNext.git
cd NotionNext

# 复制环境变量配置
cp .env.example .env
# 编辑 .env 文件，填入你的配置

# 构建并运行 Docker 容器
docker build -t notionnext .
docker run -p 3000:3000 --env-file .env notionnext

常见问题

Q: 文章更新后网站没有同步？ A: NotionNext 会在构建时获取最新内容。Vercel 会自动重新部署，或你可以手动触发重新部署。

Q: 如何添加自定义页面？ A: 在 Notion 中创建页面，NotionNext 会自动将其作为博客文章渲染。

Q: 支持哪些 Notion 块类型？ A: 支持大多数常用块：段落、标题、列表、代码块、引用、图片、表格、分栏等。

Q: 如何实现增量静态再生(ISR)？ A: 在 blog.config.js 中配置 NEXT_REVALIDATE_SECOND 参数。

项目资源

致谢

感谢 Craig Hart 发起的 Nobelium 项目，为 NotionNext 奠定了基础。

License

MIT License

开源工具
上一篇

Tangerine - 温暖优雅的 shadcn/ui 橙色主题

下一篇

NotionNext：使用 Next.js + Notion API 构建的静态博客系统

分享: