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

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

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

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

  • nobelium
  • notion
  • Next
  • 部署
    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
    @huoxingren 在这里： https://nextjs.org/docs/basic-features/data-fetching#incremental-static-regeneration
    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
    @craig
    https://www.notion.so/19a55xxxxxea40488ce957f3eedcc258?v=f9d68c9af8424dfe87f0f6a2d77xxxxx
    我以为是后面那个
    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
    部署报 400 错误什么原因
    ![]( https://raw.githubusercontent.com/WhiteDragon96/ImgCloud/main/data/img20210428140757.png)
    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   ·   实用小工具   ·   891 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 21:34 · PVG 05:34 · LAX 13:34 · JFK 16:34
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.