notion + nextjs搭建博客

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

notion + nextjs有很多解决方案:

  • https://github.com/tangly1024/NotionNext

  • https://github.com/transitive-bullshit/nextjs-notion-starter-kit

这里,我们基于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上

a6cb6a7dd74616298c430ac4259316dc.png

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

cc6277c1a9657f570da1a9e85e914522.png

获得的url如下:

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

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

c606c44819c2ca65327f4dadfa32d3f0.png

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

a365463dafc9e02acc3abc09c29c028c.png

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

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

bfbd8f23312cd05adf84d5de56da8c47.jpeg
2b567093-8690-4455-abef-1240d6bf49b0.jpeg

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

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

d5e60ad84fdfeddc39171c4050428584.png

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/96253.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Cocos Creator3.8 项目实战(七)Listview 控件的实现和使用

滚动列表在游戏中也很常见,比如排行榜 、充值记录等,在这些场景中,都有共同的特点, 那就是:数据量大 , 结构相同。 在cocoscreator 中,没有现成的 Listview 控件, 无奈之下&#xff…

Python数据攻略-数据特征处理离散化和二值化

在数据分析和机器学习中,数据预处理是一个非常重要的步骤。一种常见的数据预处理方法是数据离散化和二值化。但是这两个词可能会让初学者感到困惑。 数据离散化:简单地说,就是将连续的数值分成几个区间,并用这些区间的标签来代替原始值。数据二值化:则是把所有数值转换为0…

Java — 堆内存、新生代、老年代 一般设置为多大内存?

置顶 学习专栏:【Java后端面试题】 1.Java面试题—基础知识、面向对象、【容器】、IO & 【设计模式】、泛型 & 异常 & 反射 & 注解、快速排序2.Java面试题—并发基础、【同步 & 互斥】、JUC & 并发容器、【线程池】、异步编程、【Lambda表达…

【JavaEE重点知识归纳】第5节:方法

目录 一:方法的概念和使用 1.什么是方法 2.方法的定义 3.方法的调用过程 4.实参和形参的关系(重点) 二:方法重载 1.方法重载概念 2.方法签名 三:递归 1.递归的概念 2.递归执行的过程分析 一:方法的概念和使…

[开源项目推荐]privateGPT使用体验和修改

文章目录 一.跑通简述二.解读ingest.py1.导入库和读取环境变量2.文档加载3.文档处理(调用文件加载函数和文本分割函数) 三.injest.py效果演示1.main函数解读2.测试 四.修改代码,使之适配多知识库需求1.修改配置文件:constants.py2…

CSS背景图片自适应大小

在CSS中,如果你想让背景图片自适应元素的大小,你可以使用background-size属性。以下是一些示例: 如果你想让背景图片完全填充元素,但不保持原始比例,可以使用cover值: .element {background-image: url(y…

Elasticsearch:ES|QL 查询语言简介

警告:此功能处于技术预览阶段,可能会在未来版本中更改或删除。 Elastic 将尽最大努力解决任何问题,但技术预览版中的功能不受官方 GA 功能的支持 SLA 的约束。在目前的 Elastic Stack 8.10 中此功能还没有提供。 Elasticsearch 查询语言 (ES|…

IntelliJ IDEA 常用快捷键

目录 一、IDEA 常用快捷键 1 通用型 2 提高编写速度 3 类结构、查找和查看源码 4 查找、替换与关闭 5 调整格式 二、Debug快捷键 三、查看快捷键 1、已知快捷键操作名,未知快捷键 2、已知快捷键,不知道对应的操作名 3、自定义快捷键 4、使用…

pip命令大全

pip --version 查看已经安装了的pip版本 pip install -U pip 升级pip pip install --upgrade pip 升级pip pip list 或 pip freeze 查看当前已经安装好了包及版本 pip list -o 查看需要被升级的包 pip install package_name(包名) 下载安装包 pip install matplotlib3.4.…

MyBatisPlus(十一)包含查询:in

说明 包含查询&#xff0c;对应SQL语句中的 in 语句&#xff0c;查询参数包含在入参列表之内的数据。 in Testvoid inNonEmptyList() {// 非空列表&#xff0c;作为参数List<Integer> ages Stream.of(18, 20, 22).collect(Collectors.toList());in(ages);}Testvoid in…

[强网杯 2022]factor有感

可直接私信&#xff0b;Q 3431550587 此题记录主要是他运用了几个新看见的攻击思路和拜读了一篇论文&#xff0c;所以写写。题目源码&#xff1a; #encoding:utf-8 from Crypto.Util.number import * from gmpy2 import * from random import randint from flag import flagd…

[编程思想录]无锁之CAS

一、背景 解决线程并发产生的问题,除了锁,volatile等关键字之外,在特定的情景下为了提高代码运行的效率,为了摆脱“锁”这个独占式的编程方式之外,还有另外一个原子类的概念。 在java.util.concurrent.atomic包下有Java提供的线程安全的原子类,比如AtomicInteger。而这些…

list中符合 多条件中筛选符合条件的值

//查找身高在1.8米及以上的男生 // List<SsxlwdBean> boys list.stream().filter(s->s.getGender() && s.getHeight() > 1.8).collect(Collectors.toList()); xlseachitem list.stream().filter(list->list.xlname.contains(Upstrquery)||list.xlbm.…

AGI之MFM:《多模态基础模型:从专家到通用助手》翻译与解读之视觉理解、视觉生成

​AGI之MFM&#xff1a;《Multimodal Foundation Models: From Specialists to General-Purpose Assistants多模态基础模型&#xff1a;从专家到通用助手》翻译与解读之视觉理解、视觉生成 目录 相关文章 AGI之MFM&#xff1a;《Multimodal Foundation Models: From Speciali…

【Docker内容大集合】Docker从认识到实践再到底层原理大汇总

前言 那么这里博主先安利一些干货满满的专栏了&#xff01; 首先是博主的高质量博客的汇总&#xff0c;这个专栏里面的博客&#xff0c;都是博主最最用心写的一部分&#xff0c;干货满满&#xff0c;希望对大家有帮助。 高质量博客汇总https://blog.csdn.net/yu_cblog/categ…

硬盘损坏不能用怎么办?

硬盘是电脑的核心&#xff0c;如果硬盘出现了问题&#xff0c;那么整台电脑都会受到影响&#xff0c;电脑中的数据也会丢失。那么面对硬盘损坏时我们该如何解决呢&#xff1f;本文今天用5种简单的方法帮您解决&#xff01; 1、硬盘连接是否松动 当电脑的硬盘突然表现出无法识别…

代码随想录训练营二刷第四十八天 | 139.单词拆分 背包问题总结

代码随想录训练营二刷第四十八天 | 139.单词拆分 背包问题总结 一、139.单词拆分 题目链接&#xff1a;https://leetcode.cn/problems/word-break/ 思路&#xff1a;单词拼字符串&#xff0c;完全背包。定义dp[i]&#xff0c;为true表示可以拆分为一或多个单词。可能会出现ab…

Python学习之——测试环境路径的工程示例

Python学习之——测试环境路径的工程示例 Python环境路径几点小结一个工程示例 Python环境路径 参考&#xff1a; Python模块导入与路径管理 1.对于一个纯Python工程, 在 import模块时&#xff0c;Python解释器的搜索顺序是先搜索built-in模块&#xff0c;然后搜索 sys.path这…

Python标准库中内置装饰器@staticmethod@classmethod

装饰器是Python中强大而灵活的功能&#xff0c;用于修改或增强函数或方法的行为。装饰器本质上是一个函数&#xff0c;它接受另一个函数作为参数&#xff0c;并返回一个新的函数&#xff0c;通常用于在不修改原始函数代码的情况下添加额外的功能或行为。这种技术称为元编程&…

stm32之手动创建keil工程--HAL库

用CubeMx创建了好多stm32的工程&#xff0c;这里记录下手动创建keil工程的过程。 一、准备工作 1.1、下载对应的HAL库&#xff0c; 这里使用的是stm32f103c8t6, 下载地址stm32HAL库 在页面中输入对应型号点击进行二级页面进行下载 1.2、准备工程 各文件夹下具体操作如下&am…