📖 NotionNext 项目介绍与部署教程@

🌟 项目简介

NotionNext 是一个使用 Next.js + Notion API 实现的静态博客系统，专为 Notion 用户与创作者 设计。
它的特点是 零门槛建站：只需一个 Notion 数据库，就能生成一个完整的博客网站。

✨ 核心特点

  • 🚀 多种部署方式：支持 Vercel、Zeabur、Docker、自建服务器等。
  • 📝 内容管理：直接在 Notion 中写作，自动同步到网站。
  • 🎨 多主题支持：内置 NEXT、Medium、Hexo、Fukasawa 等主题，可自由切换。
  • 💬 评论系统：支持 Twikoo、Giscus、Gitalk、Cusdis、Utterances。
  • 📊 SEO 优化：内置 sitemap、RSS、OG 标签，利于搜索引擎收录。
  • 🔧 高度可定制：通过 blog.config.js 或环境变量配置站点信息。

🚀 部署教程

1. 准备工作

  • 一个 Notion 账号，并创建一个数据库作为博客内容源。
  • 获取 Notion API Token 和数据库 ID。
  • 一个 GitHub 账号（用于托管代码和部署）。

2. 部署到 Vercel（推荐）

  1. Fork 项目仓库：NotionNext
  2. 登录 Vercel，导入该仓库。

  3. 在 Vercel 项目设置中添加环境变量：

    • NOTION_PAGE_ID：你的 Notion 数据库 ID
    • NOTION_TOKEN：你的 Notion API Token（可选，公开数据库无需）
    • 其他可选变量见 .env.example
  4. 点击 Deploy，几分钟后即可访问你的网站。

3. Docker 部署


# 克隆项目

git clone https://github.com/tangly1024/NotionNext.git
cd NotionNext

# 构建镜像

docker build -t notionnext .

# 运行容器

docker run -d -p 3000:3000 
-e NOTION_PAGE_ID=你的数据库ID 
-e NOTION_TOKEN=你的Token 
notionnext





访问 `http://服务器IP:3000` 即可。

### 4. 自建服务器部署

克隆项目

git clone https://github.com/tangly1024/NotionNext.git cd NotionNext

安装依赖

npm install

构建

npm run build

启动

npm run start

🔧 常见配置

  • 修改 blog.config.js 来设置站点标题、描述、主题、评论系统等。
  • 使用 vercel.json 或 next.config.js 进行高级配置。
  • 支持自定义域名，绑定到 Vercel 或 Nginx 反向代理。

📊 总结

  • ​适合人群​：Notion 用户、独立博客作者、开发者。
  • ​优势​：零门槛、自动化、可扩展。
  • ​推荐部署​：Vercel（简单快速，支持自动更新）。

👉 一句话：在 Notion 写作，在 Web 展示，NotionNext 让博客搭建像写笔记一样简单。