nobelium + Notion 搭建博客
date
Sep 4, 2025 04:22 PM
slug
nobelium-notion-blog-setup
summary
使用Notion和Next.js构建的静态博客，部署在Vercel上。快速入门包括复制Notion模板、Fork项目、定制配置文件、替换图标，并在Vercel上设置环境变量。提供了常见配置的指导，包括网页图标设置、导航链接自定义和Vercel域名加速的参考链接。
status
Published
type
Post
tags
Notion
Nobelium
一个静态博客建立在Notion和Nextjs之上，部署在Vercel上。
🚀 快速且响应迅速
- 快速的页面渲染和响应式设计
- 借助高效编译器实现快速静态生成
🤖 即刻部署
- 几分钟内即可在Vercel上完成部署
- 增量再生，更新Notion中的内容后无需重新部署
🚙 功能齐全
- 评论、全宽页面、快速搜索和标签筛选
- RSS、数据分析、网页性能指标……以及更多功能
🎨 易于自定义
- 丰富的配置选项，支持中英文界面
- 基于Tailwind CSS构建，便于自定义
🕸 美观的URL和SEO友好
一、项目地址：
二、快速开始
- 复制官方提供的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 数据库中的图像可能无法正确渲染
三、常见配置：
配置文件说明：
3.1 设置网页图标
将
/public目录下的替换为favicon.png 和 favicon.dark.png3.2 如何自定义新的导航连接
nobelium 的作者没有在原文里写如何增加导航，但实际上是可以简单做到的。
- 新建一个
type为page的页面，即你想要新增的一级页面，并填写好slug。
- 打开
lib文件夹里的lang.js文件，在每一个语言（en, zh-CN等）的NAV里面增加你想加的导航和变量名字，可以填多个。
3. 打开
components文件夹里的Header.js文件，按以下格式新增想要加的导航。链接填写之前天好的/slug，或者任意站外的链接也可以。3.3 如何调整导航透明背景的模糊程度
打开
styles文件夹里的globals.css，找到以下部分，大概在71行。3.4 CSS样式调整
代码块主题
使用 nobelium + Notion 制作博客的一些 Tips：如何自定义新的导航连接
- Vercel域名加速（参考）
