NotionNext

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

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

亮点 ✨

🚀  秒开，设备全适配

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

🤖  自动，无需重新部署

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

🚙  全功能，完全不操心

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

🎨  美观，轻松自定义

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

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

快速起步

• 给这个项目点个小星星 😉
• 将 这个 Notion 模板 制作副本，并分享这个页面给所有人
• Fork 这个项目
• 在 blog.config.js 配置相关选项，更多关于配置的说明，请移步NotionNext文档
• (可选) 用自己的图片替换 /public 文件夹里的 avatar.jpg、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 中的图片可能无法正常显示到网页上。
• 稍微等等就可以访问了！ 简单吗?

快速开发

yarn # 安装依赖

yarn run dev # 本地开发

yarn run build # 本地打包编译

yarn run start # 本地启动NextJS服务

引用技术

• 生成: 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
  fukasawa截图

  
• 仿照 [youtube] 主题 分支-https://github.com/tangly1024/NotionNext/tree/themw-youtube
  youtube截图

  

License

The MIT License.