V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
craig
V2EX  ›  分享创造

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

  craig · 214 天前 · 3932 次点击
这是一个创建于 214 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

Nobelium

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 中文社区 聊天~

42 条回复    2021-07-01 02:27:24 +08:00
Baboonowen
    1
Baboonowen   214 天前
好顶赞 😆
aeanmfn432
    2
aeanmfn432   214 天前 via Android
绑定
huoxingren
    3
huoxingren   214 天前
Next.js 的增量部署( ISG )可以给个文档链接嘛,官网没找到
xinyana
    5
xinyana   214 天前 via Android
非常棒,star 一个
huoxingren
    6
huoxingren   214 天前
@craig 感谢感谢
xinyana
    7
xinyana   214 天前
加个分类,文章页再来个"相关文章",那就太棒了
craig
    8
craig   214 天前 via Android
@xinyana 感谢,但目前已经有 Tag 来做筛选了,再增加分类意义不大。相关文章的话…可以考虑下文章末尾增加上一篇、下一篇。
thulof
    9
thulof   214 天前
赞楼主!
ryV60s
    10
ryV60s   214 天前
点进文章,点击返回直接返回列表页顶部了,这一块体验很差。还不如 Chrome 的回退。
xinyana
    11
xinyana   214 天前
@craig #8 好,这样保持简洁 99.9 分
craig
    12
craig   214 天前 via Android
@ryV60s 其实最初是点击返回上一个页面,但如果你是直接访问了一篇文章,就没有上一级了,这时候就无效了。所以就直接回到了首页…感觉我之后还是改回去吧。
uedkkk
    13
uedkkk   214 天前
怎么弄啊,小白都没看懂怎么部署
tediorelee
    14
tediorelee   214 天前
马了
h404bi
    15
h404bi   214 天前
很好。可惜 Notion 一直没有一个跟 Markdown Footnotes 等效的功能,严重依赖这个表示只能点个赞。
craig
    16
craig   214 天前 via Android
@uedkkk 加油!
craig
    17
craig   214 天前
@h404bi 很遗憾,现在没有办法实现,而且渲染的内容是直接走 react-notion-x 的,除了样式外不会二次处理。
AmiKara
    18
AmiKara   213 天前 via iPhone
Gatsby 岂不是更香😂
craig
    19
craig   213 天前
@AmiKara 不香,

1. Gatsby 是一个纯静态页面的生成器,但是 Nobelium 的 RSS 是需要实时返回的,只靠静态页面做不到。
2. Gatsby 没有 ISG 功能,更新 Notion 页面后,网站不会更新,需要再次部署。
3. 我不会用 Gatsby 啊 😂
AmiKara
    20
AmiKara   213 天前 via iPhone
@craig RSS 部分没有太多了解,但是 Gatsby 插件把你其他提到的问题全都解决了
craig
    21
craig   213 天前
@AmiKara Gatsby 可以实现 ISG 吗?
AmiKara
    22
AmiKara   213 天前
@craig 可以的,gatsby 可以通过改变 GraphQL 链接 URL
lijiext
    23
lijiext   213 天前
一直报错
[![imagea571bde88c0df96c.png]( https://img.maocdn.cn/img/2021/04/27/imagea571bde88c0df96c.png)]( https://img.wang/image/image.5yCuX)
@craig
uedkkk
    24
uedkkk   213 天前
@craig 中文文档没看懂,切到英文就顺畅多了,直接搭出来了,十分好用
craig
    25
craig   213 天前
@lijiext Notion Page ID 环境变量设置错误
Baymaxbowen
    27
Baymaxbowen   213 天前
"支持增量式更新,更新文章后无需重复部署" 请问这个会有延迟吗,我部署成功了然后尝试在 notion 修改文章的标题,网站好像没有反应
djyde
    28
djyde   213 天前
Cool! 考虑用 cusdis.com 作为评论系统吗 🥰
kassadin
    29
kassadin   213 天前
👍
Guidoo
    30
Guidoo   213 天前
已 star 已使用 牛逼
xiayue
    31
xiayue   213 天前
@Baymaxbowen 老哥文章更新有没有延迟呀 我这也是更新了模板但是没有变化
Baymaxbowen
    32
Baymaxbowen   213 天前
@xiayue #31 昨晚没什么反应,今天速度挺快的
xinyana
    33
xinyana   213 天前 via Android
@xiayue 新文章,需要重新部署
xrr2016
    35
xrr2016   213 天前
赞一个👍
xiayue
    36
xiayue   213 天前
@xinyana 感谢
craig
    37
craig   213 天前
@xiayue @xinyana 更新文章不需要重新部署。

如果你的 Notion 的条目是不符合规范的,如没有 Slug,就不会自动更新,如果你手动部署日志也会报错的。
craig
    38
craig   213 天前
@WhiteDragon96 Page ID 错误
craig
    39
craig   213 天前
@djyde Hi,感谢!这两天加上~
craig
    40
craig   212 天前
@djyde 已添加~ 真的不错!
jabari
    41
jabari   186 天前
notion 支持 api 啦
huoxingren
    42
huoxingren   149 天前
@craig 想请问一下,没修改一个组件或者页面布局,都需要服务器端重新 build 嘛,重启没起效果,重新 build 好像有点麻烦啊,文章部署的增量式更新倒是的确好用。
关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   2345 人在线   最高记录 5497   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 27ms · UTC 09:42 · PVG 17:42 · LAX 01:42 · JFK 04:42
♥ Do have faith in what you're doing.