一个使用 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 中文社区 聊天～

[Baboonowen]

好顶赞 😆

[aeanmfn432]

绑定

[huoxingren]

Next.js 的增量部署（ ISG ）可以给个文档链接嘛，官网没找到

[craig]

@huoxingren 在这里： https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration

[xinyana]

非常棒，star 一个

[huoxingren]

@craig 感谢感谢

[xinyana]

加个分类,文章页再来个"相关文章",那就太棒了

[craig]

@xinyana 感谢，但目前已经有 Tag 来做筛选了，再增加分类意义不大。相关文章的话…可以考虑下文章末尾增加上一篇、下一篇。

[thulof]

赞楼主！

[ryV60s]

点进文章，点击返回直接返回列表页顶部了，这一块体验很差。还不如 Chrome 的回退。

[xinyana]

@craig #8 好,这样保持简洁 99.9 分

[craig]

@ryV60s 其实最初是点击返回上一个页面，但如果你是直接访问了一篇文章，就没有上一级了，这时候就无效了。所以就直接回到了首页…感觉我之后还是改回去吧。

[uedkkk]

怎么弄啊，小白都没看懂怎么部署

[tediorelee]

马了

[h404bi]

很好。可惜 Notion 一直没有一个跟 Markdown Footnotes 等效的功能，严重依赖这个表示只能点个赞。

[craig]

@uedkkk 加油！

[craig]

@h404bi 很遗憾，现在没有办法实现，而且渲染的内容是直接走 react-notion-x 的，除了样式外不会二次处理。

[AmiKara]

Gatsby 岂不是更香😂

[craig]

@AmiKara 不香，

1. Gatsby 是一个纯静态页面的生成器，但是 Nobelium 的 RSS 是需要实时返回的，只靠静态页面做不到。
2. Gatsby 没有 ISG 功能，更新 Notion 页面后，网站不会更新，需要再次部署。
3. 我不会用 Gatsby 啊 😂

[AmiKara]

@craig RSS 部分没有太多了解，但是 Gatsby 插件把你其他提到的问题全都解决了