使用Notion搭建Blog
使用Notion搭建Blog

使用Notion搭建Blog

Tags
notion
blog
vercel
Created time
Mar 19, 2022 05:47 AM

背景

最近又想重新搭个blog了,之前用的是hexo建在自己的服务器上面,但是在更新blog的时候需要手动更新,略显麻烦。
刚好现在在使用Notion记录一些东西,所以在想要是Blog能直接在Notion里面写好就可以自动发布就好了。

方案

Notion 分享链接

第一种方法就是直接使用Notion的分享功能,拥有博客的基本属性,但是Notion在国内的访问速度比较慢,哪天被墙了也不一定。

react-notion-x

经过一番搜索,找到了另外一种可行的办法。通过读取将notion分享页面的数据,重新渲染成一个新的网页,再将这个网页作为自己的blog。(网页相关的知识我不太了解,说错了请指正。)react-notion-x就是这样的一个库,并且几乎支持Notion的所有block类型,作为博客使用是足够给的,渲染得到的页面也和Notion相差无几。
但是由于对前端知识实在不了解,(后端咱也不太了解)无法自行将react-notion-x用起来。nextjs-notion-starter-kit是同一个作者的另外一个repo,里面使用react-notion-x作为基础,可以非常简单快速搭建起一个blog。具体使用方法可以看下面这个知乎回答。
如何使用 Notion 制作个人网站?
使用 Notion 来搭建个人网站,真的不难,适合零基础毫无技术基础的人,就想我,自己瞎探索就学会了哈哈哈哈。 我这个搭建个人博客的方法基于 Notion + Next.js + Vercel ,千万不要因为看到这些不懂的单词,就被吓到了。 相比之前我介绍的使用 Hexo 搭建博客的方式,这个方法完全免费,不需要购买服务器,还可以不租用域名,可以随时随地发布内容,不局限于安装了 Git 的电脑,折腾起来也相对比较容易。 简要说说这三个工具承担的角色: Notion:用作博客内容管理工具,Notion 在这里承担服务器或数据库的角色。Next.js:一个框架,一种在服务器端渲染的技术,弄不懂也没关系,因为我也不懂 ‍♂️,但即便不懂,我也顺利地用 Notion 搭建出博客了。Vercel:一个免费的前端部署平台,支持增量式更新,更新文章后无需重复部署。 使用这个方法搭建博客之前,请先确保你分别注册了 GitHub 和 Notion 账号。 我搭建的 Notion 博客是在一个 GitHub 项目「nextjs-notion-starter-kit」上二次改造而来的,这个项目用到了前面说到的两个工具:Notion 和 Next.js。 这位作者搭建的博客效果如下图: 博客顶部的封面图是动态的,可用鼠标进行交互,感兴趣的可以前往他的博客参观: https:// transitivebullsh.it/ GitHub 项目「nextjs-notion-starter-kit」地址: 先打开这个项目的 GitHub 页面,点击右上角的「fork」,将其复制到自己的仓库中。 将原先的项目 fork 一份到自己的仓库,我们才能对项目进行编辑,点击 site.config.js 进入配置文件页面。 这个配置页面是从之前的项目复制过来的,因此它的配置还是之前的作者留下的信息。 点击右上角的编辑按钮,进入编辑状态,这里我们需要修改的信息有: rootNotionPageId:这是用于编辑/管理内容的
如何使用 Notion 制作个人网站?
网站可以托管在Vercel上面,也可以架设在自己的服务器上面,我图省心,就直接用Vercel了。
搭建好的blog可以直接在Notion里面编辑内容,并且不也用手动更新,十分方便。

TODO

Notion是自带评论系统的,但是react-notion-x渲染后是没有评论系统的,因此后续准备加一个简单的评论系统。