Notion：配合使用 Next.js 搭建低成本博客

date
Mar 10, 2025
AI 摘要
使用 Notion 作为内容管理系统，结合 Next.js 和 Nobelium 搭建低成本博客，支持快速部署、实时更新和丰富的功能配置，适合希望简化运维的用户。步骤包括配置 Notion、部署到 Netlify 或 Vercel，并优化 SEO。
slug
build-blog-with-nextjs-and-notion-cms
status
Published
tags
blog
front-end
summary
使用 Notion 作为内容管理系统，结合 Next.js 和 Nobelium 搭建低成本博客，支持快速部署、实时更新和丰富的功能配置，适合希望简化运维的用户。步骤包括配置 Notion、部署到 Netlify 或 Vercel，并优化 SEO。
type
Post
之前搭建过不少类型的博客，但是总有不少的麻烦之处。
比如 hugo、hexo 搭建的静态博客，需要提交新的 markdown 内容到项目仓库，然后将 build 的内容提交才能更新博客；内容中的图片存储可以使用一些第三方的图片存储服务，不过处理起来也稍显麻烦。
而类似 wordpress 的一些博客方案，需要有自己的服务器，要求有一定的运维基础，还需要有配置主题和各种插件进行优化的经验。
总而言之，上面的方案还是稍显麻烦，不想有太多的服务端运维，在博客内容撰写上也越简便越好。

Notion内容 CMS 博客优点

偶然发现了 notion 作为内容 cms 的这种博客方案：
1、比如可以选择 nextjs 框架的博客主题，可以使用 Netlify、vercel 这类平台部署项目。
2、notion 上更新内容，提交后博客即可以更新；notion 上图片也有 cdn 的优化，不需要再使用第三方的图片存储服务。
博客代码即可以自己进行源代码上优化，还可以结合 GitHub actions 进行定时部署，内容管理也比较纯粹和方便，比较符合我当前的诉求。

博客系统Nobelium介绍

首先选择了 Notion 作为内容生产后，就需要找一个基于 Notion 的博客系统，将内容渲染成站点，这里选择 nobelium 这种举例。
notion image
Nobelium介绍，一个基于 Notion 和 Next.js 构建的静态博客，可以部署到 Netlify、vercel 这类平台。
🚀 快速且响应式
  • 页面渲染速度快，设计响应式
  • 使用高效编译器实现快速静态生成
🤖 即时部署
  • 在 Vercel 上几分钟内完成部署
  • 支持增量再生，更新 Notion 内容后无需重新部署
🚙 功能齐全
  • 支持评论、全宽页面、快速搜索和标签过滤
  • 提供 RSS、分析、Web 性能指标等更多功能
🎨 易于定制
  • 丰富的配置选项，支持英文和中文界面
  • 使用 Tailwind CSS 构建，便于个性化定制
🕸 美观的 URL 和 SEO 友好

博客搭建步骤

1、Notion 配置

打开 Nobelium 仓库，复制 这个 Notion 模板，并将其设置为公开分享。
notion image
 
获取 Notion 上 NOTION_PAGE_ID 和 NOTION_ACCESS_TOKEN 这两个值，后续部署的时候需要。
NOTION_PAGE_ID：
notion image
NOTION_ACCESS_TOKEN：
在 Notion 设置“链接”→ “开发或者管理集成”中，创建新的集成，获取内部集成密钥。
notion image

2、部署

在 github 中Fork 这个项目，可以进行根据自己博客名字等修改相应配置：
  • 自定义 blog.config.js
  • 将 /public 文件夹中的 favicon.svg 和 favicon.ico 替换为你自己的图标
在 Netlify 或者 Vercel 平台上进行部署，设置环境变量
  • NOTION_PAGE_ID： 你之前公开分享的 Notion 页面 ID，通常在你的工作区地址后有 32 位数字
  • NOTION_ACCESS_TOKEN : 之前创建的 notion access token。

3、完成部署

随后可以在相应配置里，配置你的域名等等。
在项目代码中blog.config.js中，配置博客 TDK 等，以及 google analytics 追踪代码，gitalk, utterances, cusdis 等评论配置等等。。
虽然在 Notion 发布内容之后实时更新，但是为了优化 SEO 和网站速度，内容更新之后最好还是重新 build 部署。然后就有了需要定时触发 Netlify 部署本博客站点这样的需求。可以参见之前这一篇文章，有详细通过 Github Actions自动执行 Netlify 部署。

参考资料

✨ 信鑫 Blog_使用 Vercel + Notion 搭建低成本博客[Remix 版本]
✨github：craigary/nobelium
 

© CodeXun 2025