notion + nextjs搭建博客

SaaS可以通过博客来获得SEO流量,之前我自己在nextjs上,基于MarkDown + Cloudfare来构建博客,很快我就了解到更优雅的方案:notion + nextjs搭建博客,之前搭建了过,没有记录,这次刚好又要弄,打算记录一下。

notion + nextjs有很多解决方案:

这里,我们基于nextjs-notion-starter-kit来搭建blog,为了方便,以kit来表示这个项目。

首先,我们找到项目中提供的notion default page:https://transitive-bs.notion.site/transitive-bs/Next-js-Notion-Starter-Kit-Template-7875426197cf461698809def95960ebf

因为项目会基于notion docs的结构进行适配,所以一般都会提供。

我们打开后,点击【Duplicate】,将这个notion page复制到自己的notion上

复制后,将notion page share出来,并复制share url,如下图:

获得的url如下:

go 复制代码
https://glowing-kip-bf2.notion.site/Next-js-Notion-Starter-Kit-Template-0f3b6xxxxxxxxxxxxxxxxxxxxxxxx91a?pvs=4

将0f3b6xxxxxxxxxxxxxxxxxxxxxxxx91a复制出来,然后放到kit项目的site.config.ts中,赋值给rootNotionPageId,如下图:

然后,本地先运行一下项目,看看效果,然后就是修改配置,比如将twitter修改成自己的之类的。

当然,使用的过程中,你也会发现一些问题,比如图片无法访问或视频无法访问,这是因为notion升级改变了上传后,图片、视频等资源的保存规则而导致的。(我看到一个做notion to blog 这类SaaS产品的twitter 大V 在issue中狂问问题。notion的变化,影响到他SaaS正常功能了)

目前本文中提到的NotionNext、nextjs-notion-starter-kit的最新版都解决了图片问题,但今天发现,视频还是无法正常加载。
2b567093-8690-4455-abef-1240d6bf49b0.jpeg

其主要原因是,视频对应的url还是公网无法访问的url。

我无意深入研究notion变化带来限制的原因,也不想去细看项目代码,从代码层面找解决方案,浏览了相关项目的issue后,也没发现有人讨论。就尝试了一下曲线救国的方案,我将视频放到youtube,然后再嵌入到notion中,从而实现视频的播放,效果不错。

最后就是上线,因为是nextjs开发的,所以直接vercel上线则可。

至此,一个免费的博客系统就搭建好了,你可以基于notion免费写文章,上传图片、视频等内容,帮你的SaaS获得SEO流量,而这一切是免费的,不需要花钱买图床、服务器等东西。喔~老伙计,域名还是要花钱的。

相关推荐
Justinyh6 天前
Notion同步到CSDN + 构建Obsidian本地博客系统指南
python·csdn·图床·notion·obsidian·文档同步·piclist
那些免费的砖6 天前
Isle-Editor (岛屿编辑器) - 免费开源 Web 富文本编辑器,也支持 Notion 块编辑、MarkDown 语法,官方支持 Vue3 开箱即用
前端·编辑器·notion
不会kao代码的小王1 个月前
突破局域网限制,Websocket 服务远程访问cpolar新方案
notion
执笔人1 个月前
notion模版 | 小胡的第二大脑[特殊字符]-介绍
notion
hunteritself2 个月前
DeepSeek 登《自然》封面,OpenAI 推出 GPT-5-Codex,Notion Agent 首亮相!| AI Weekly 9.15-9.21
前端·人工智能·chrome·gpt·深度学习·notion
且行好事莫问前程5 个月前
AFFiNE开源知识管理和协作平台的部署,替代Notion不是梦~
笔记·开源·notion·affine
Just_Paranoid6 个月前
华为云Flexus+DeepSeek征文|基于Dify构建解析网页写入Notion笔记工作流
华为云·notion·dify·deepseek·firecrawl·flexusx
HEY_FLYINGPIG6 个月前
小白如何在cursor中使用mcp服务——以使用notion的api为例
notion
子非鱼@Itfuture8 个月前
notion访问慢notion卡顿怎么办,提升notion加载速度
notion
没事学点编程小知识9 个月前
Notion的AI布局:Notion Mail即将上线
人工智能·notion