一个使用 Next.js + Notion 实现的静态博客系统

[craig]

Hi，大家好！

Nobelium 是一个使用 Next.js + Notion API 实现的，部署在 Vercel 上的静态博客系统。

最初设计 Nobelium 的时候，是因为找不到满意的博客主题，刚好要设计自己的网站，所以准备自己写一个。然后看到 SpencerWoo 的文章，发现可以通过第三方 API / 渲染工具来展示 Notion 页面，就果断使用 Notion 来作为数据来源了。

Notion 有也许是最好的 Headless CMS 😂，配合 Next.js 的增量部署（ ISG ），在 Notion 中更新文章，网站同步更新，无需再次部署。

Demo: https://nobelium.vercel.app

Highlights

秒开，设备全适配

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

自动，无需重新部署

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

全功能，完全不操心

• 评论、宽页面、搜索和标签
• 订阅、网站统计、Web Vital 分析……还有更多功能

美观，轻松自定义

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

网址美观、搜索引擎优化

Screenshot

Deploy

GitHub: craigary/nobelium

Technical details

• 获取: notion-client
• 生成: Next.js SSG 和 Incremental Static Regeneration
• 渲染: react-notion-x
• 样式: TailwindCSS 和 Jit compiler
• 评论: Gitalk

因为 Nobelium 最初是用于个人项目，所以会一直保持 Opinionated，在功能、样式上保持克制，确保界面的极简，干净，专注阅读体验。

欢迎大家 Fork 、Star，如果你有任何想法或建议，请在这里提出：Issues · craigary/nobelium，另外，欢迎大家来 Notion 中文社区 聊天～

[craig]

@AmiKara Gatsby 可以实现 ISG 吗？

[AmiKara]

@craig 可以的，gatsby 可以通过改变 GraphQL 链接 URL

[lijiext]

一直报错
[]( https://img.wang/image/image.5yCuX)
@craig

[uedkkk]

@craig 中文文档没看懂，切到英文就顺畅多了，直接搭出来了，十分好用

[craig]

@lijiext Notion Page ID 环境变量设置错误

[lijiext]

@craig
https://www.notion.so/19a55xxxxxea40488ce957f3eedcc258?v=f9d68c9af8424dfe87f0f6a2d77xxxxx
我以为是后面那个

[Baymaxbowen]

"支持增量式更新，更新文章后无需重复部署" 请问这个会有延迟吗，我部署成功了然后尝试在 notion 修改文章的标题，网站好像没有反应

[djyde]

Cool! 考虑用 cusdis.com 作为评论系统吗 🥰

[kassadin]

👍

[Guidoo]

已 star 已使用 牛逼

[xiayue]

@Baymaxbowen 老哥文章更新有没有延迟呀 我这也是更新了模板但是没有变化

[Baymaxbowen]

@xiayue #31 昨晚没什么反应，今天速度挺快的

[xinyana]

@xiayue 新文章，需要重新部署

[WhiteDragon96]

部署报 400 错误什么原因

[xrr2016]

赞一个👍

[xiayue]

@xinyana 感谢

[craig]

@xiayue @xinyana 更新文章不需要重新部署。

如果你的 Notion 的条目是不符合规范的，如没有 Slug，就不会自动更新，如果你手动部署日志也会报错的。

[craig]

@WhiteDragon96 Page ID 错误

[craig]

@djyde Hi，感谢！这两天加上～

[craig]

@djyde 已添加～ 真的不错！