一个使用 Next.js + Notion 实现的静态博客系统 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
craig
V2EX    分享创造

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

&nbs; craig 2021-04-27 14:09:36 +08:00 6545 次点击
这是一个创建于 1631 天前的主题,其中的信息可能已经有所发展或是发生改变。

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 和Jitcompiler
  • 评论: Gitalk

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

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

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

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

如果你的 Notion 的条目是不符合规范的,如没有 Slug,就不会自动更新,如果你手动部署日志也会报错的。
craig
    38
craig  
OP
   2021-04-28 16:01:08 +08:00
@WhiteDragon96 Page ID 错误
craig
    39
craig  
OP
   2021-04-28 16:01:37 +08:00
@djyde Hi,感谢!这两天加上~
craig
    40
craig  
OP
   2021-04-28 19:08:23 +08:00
@djyde 已添加~ 真的不错!
jabari
    41
jabari  
   2021-05-25 13:12:33 +08:00
notion 支持 api 啦
huoxingren
    42
huoxingren  
   2021-07-01 02:27:24 +08:00
@craig 想请问一下,没修改一个组件或者页面布局,都需要服务器端重新 build 嘛,重启没起效果,重新 build 好像有点麻烦啊,文章部署的增量式更新倒是的确好用。
monologue520
    43
monologue520  
   2023-08-31 14:54:42 +08:00
@craig 可以配合 netlify 来实现类似效果的
关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2979 人在线   最高记录 6679       Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 34ms UTC 13:44 PVG 21:44 LAX 06:44 JFK 09:44
Do have faith in what you're doing.
ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86