一个使用 NextJS + Notion API 实现的,部署在 Vercel 上的静态博客系统。为Notion和所有创作者设计。
🚀 秒开,设备全适配
- 快速的页面渲染和响应式设计
- 高效编译器的快速静态页面生成
🤖 自动,无需重新部署
- 部署在免费、高速的 Vercel 平台
- 支持增量式更新,更新文章后无需重复部署
🚙 全功能,完全不操心
- 评论、搜索、标签、分类
- 订阅、网站统计
- 本地化多语言
- 服务端渲染、优秀的SEO
🎨 美观,轻松自定义
- 丰富的配置项,更支持多语言
- 使用 Tailwind CSS,轻松实现二次开发
🕸 网址美观、搜索引擎优化
- 给这个项目点个小星星 😉
- 将 这个 Notion 模板 制作副本,并分享这个页面给所有人
- Fork 这个项目
- 在
blog.config.js
配置相关选项 - (可选) 用自己的图片替换
/public
文件夹里的avatar.svg
、favicon.svg
和favicon.ico
- 在 Vercel 上部署这个项目, 设定一下环境变量:
NOTION_PAGE_ID
: 你刚刚分享出去的 Notion 页面网址中的页面 ID,通常是网址中工作区地址后的 32 位字符串NOTION_ACCESS_TOKEN
(可选): 如果你决定不分享你的数据库,你可以使用 token 来让网页从 Notion 数据库中抓取数据。你可以在你的浏览器 cookies 中找到它,名称是 `token_v2'。- Notion token 的有效期只有 180 天,请确保在 Vercel Dashboard 上手动更新,我们可能会在未来切换到官方 API 来解决这个问题。此外,如果数据库是非公开到,Notion 中的图片可能无法正常显示到网页上。
- 稍微等等就可以访问了! 简单吗?
- 生成: Next.js SSG 和 Incremental Static Regeneration
- 页面渲染: React-notion-x
- 样式: Tailwind CSS 和
@tailwindcss/jit
compiler - 评论: Gitalk,Cusdis,Utterances
- 图标:fontawesome
- 仿照 fukasawa 分支-https://github.com/tangly1024/NotionNext/tree/theme-Fukasawa
- 仿照 [youtube] 主题 分支-https://github.com/tangly1024/NotionNext/tree/themw-youtube
The MIT License.