nobelium + Notion 搭建博客

一个静态博客建立在Notion和Nextjs之上，部署在Vercel上。

快速入门

• 复制这个 Notion 模板，并将其公开分享

• Fork 这个项目

• 自定义 blog.config.js 文件

• (可选) 将 /public 文件夹中的 favicon.svg 和 favicon.ico 替换为您自己的图标

• 在 Vercel 上部署，设置以下环境变量：
• NOTION_PAGE_ID (必需)：您之前公开分享的 Notion 页面的 ID，通常在工作区地址后面有 32 个数字
• NOTION_ACCESS_TOKEN (可选，不推荐)：如果您决定不共享数据库，可以使用 token 让 Nobelium 从 Notion 数据库获取数据。您可以在浏览器 cookies 中找到它，名为 token_v2
• 请注意，Notion token 仅在 180 天内有效，确保在 Vercel 控制台中手动更新。我们可能会在未来切换到官方 API 来解决这个问题。此外，Notion 数据库中的图像可能无法正确渲染

• 就是这样！很简单，对吧？

常见配置：

1. 设置网页图标
💡
将/public下的替换为favicon.png 和 favicon.dark.png

2. 如何自定义新的导航连接
💡
nobelium 的作者没有在原文里写如何增加导航，但实际上是可以简单做到的。
1. 新建一个type为page的页面，即你想要新增的一级页面，并填写好slug。
2. 打开lib文件夹里的lang.js文件。
1. 在每一个语言（en, zh-CN等）的NAV里面增加你想加的导航和变量名字，可以填多个。
 
使用 nobelium + Notion 制作博客的一些 Tips：如何自定义新的导航连接
前段时间把博客迁移到了使用 nobelium + Vercel 的 Notion 上面，最大的好处就是可以利用 notion数据库的形式，来实现写完文章后，把状态改为「publish」就可以立刻发布，不需要在像 Hexo 一样安装npm，每次发文章都需要部署。而且 notion 里大部分的格式都可以在博客里使用，比如书签、表格、代码块、图片、视频等，不需要再找一个图床了。本文将告诉你，如何修改自己博客里 nobelium 的源文件，如何自定义新的导航连接，如何调整导航透明背景的模糊程度。

https://blog-issei.vercel.app/nobelium_tips

3. Vercel域名加速（参考）
Vercel域名加速 | NotionNext帮助手册
Vercel搭建的站点如何提升在大陆的访问效率

https://docs.tangly1024.com/article/vercel-accelerate

• 项目地址：
nobelium
craigary • Updated Sep 4, 2025