NotionNext

一个使用 NextJS + Notion API 实现的，部署在 Vercel 上的静态博客系统。为Notion和所有创作者设计。

演示地址：https://tangly1024.com/

亮点 ✨

🚀  秒开，设备全适配

• 快速的页面渲染和响应式设计
• 高效编译器的快速静态页面生成

🤖  自动，无需重新部署

• 部署在免费、高速的 Vercel 平台
• 支持增量式更新，更新文章后无需重复部署

🚙  全功能，完全不操心

• 评论、搜索、标签、分类
• 订阅、网站统计
• 本地化多语言
• 服务端渲染、优秀的SEO

🎨  美观，轻松自定义

• 丰富的配置项，更支持多语言
• 使用 Tailwind CSS，轻松实现二次开发

🕸  网址美观、搜索引擎优化

• 更多特性、欢迎移步我的博客查看

主题样式

目前提供了4种主题 ，只需修改/themes/index.js文件即可实现切换。

// export * from './Empty' //  空模板
// export * from './NEXT'
// export * from './Fukasawa'
// export * from './Hexo'
export * from './Medium'

主题截图	预览地址
	notion-next.tangly1024.com
	notion-medium.tangly1024.com
	notion-hexo.tangly1024.com
	notion-fukasawa.tangly1024.com

更新日志

请移步 更新文档查看

快速起步

• 给这个项目点个小星星 😉

• 将 这个 Notion 模板 制作副本，并分享这个页面给所有人

• Fork 这个项目

• (可选) 用自己的图片替换 /public 文件夹里的 avatar.jpg、favicon.svg 和 favicon.ico

• 在 Vercel 上部署这个项目, 设定一下环境变量：

  • NOTION_PAGE_ID: 你刚刚分享出去的 Notion 页面网址中的页面 ID，通常是网址中工作区地址后的 32 位字符串

• 在 blog.config.js 配置相关选项，更多关于配置的说明，请移步NotionNext文档

• 稍微等等就可以访问了！ 简单吗?

快速开发

yarn # 安装依赖
yarn run dev # 本地开发
yarn run build # 本地打包编译
yarn run start # 本地启动NextJS服务

引用技术

• 框架: Next.js
• 渲染: React-notion-x
• 样式: Tailwind CSS 和 @tailwindcss/jit compiler
• 评论: Gitalk, Cusdis, Utterances
• 图标：fontawesome

License

The MIT License.