使用notion+nobelium+vercel+cusdis搭建博客

使用notion+nobelium+vercel+cusdis搭建博客

Tags
Published
Published July 5, 2022
Author
我的第一篇文章是2020年时候写的,通过hugo+vps自建博客。
人懒起来是真的懒,自从vps的ip被炸了以后,一直都提不起劲来部署到新的vps上。即使后来ip出狱了也没再写过文章了。
现在用notion写文章,然后自动部署到vercel上。希望换种方式能让自己继续写起来。
 

0. 使用到的工具

  • notion:进行文章的编写
  • nobelium:访问notion,采集文章生成静态页面
  • vercel:部署nobelium并提供静态页面访问。部署自建的cusdis。
  • railway:部署一个postgresql,作为自建的cusdis评论数据库。
 

1. 设置notion

先把nobelium的notion页面模板复制过来
notion image
把这个notion页面设置为公开
notion image
删除别的文章,只保留一篇
notion image
后续可以随便修改文章,但是我开始遇到如果使用全部文章,部署的时候会出错。只保留一篇文章就没事。
 

2. 部署nobelium

fork一下nobelium
notion image
 
去到自己fork的nobelium仓库,点击 blog.config.js 进行自定义修改
notion image
可以修改
  • title:浏览器网页标签里显示的文字
  • author:你的名字
  • email:你的email,不想写的话可以留空
  • description:描述
  • lang:网站选项显示的语言
  • sortByDate:文章按照日期排序
 
都修改好以后就可以保存了。注意不要选点第二个,那个是会通知到原作者的。
notion image
 
接着是把nobelium部署到vercel。
 
在vercel中登录,可以通过github账号登录。
 
导入fork的nobelium项目
notion image
notion image
 
 
打开notion里设置为公开的那个页面
notion image
这一部分就是 NOTION_PAGE_ID
填入 NOTION_PAGE_ID
notion image
填好以后点击deploy,等待部署完成。
 
点一下这里,可以看到博客已经部署完成啦。
notion image
 
 
如果你有自己的域名,可以设置使用自己的域名来访问。
notion image
去到自己域名的dns服务商那里,添加一条cname记录,就是转发到vercel这个域名。
notion image
 
notion image
 

3. [可选]添加cusdis评论系统

cusdis目前是免费提供服务的,可以使用cusdis提供的服务,也可以选择自建。
notion image
 
读者通过cusdis发表的留言会经过你的审核以后才会显示在博客文章下面。
notion image
 

3.1 使用cusdis提供的服务

使用cusdis服务非常方便,先注册账号,https://cusdis.com/,然后添加自己的博客地址
获得app-id:
notion image
复制这个 data-app-id ,填入到nobelium的 blog.config.js 中:
notion image
provider中填cusdis,appId中填你的data-app-id,保存修改。
vercel重新部署以后就能在文章底部看到cusdis了。
 

3.2 自建cusdis

cusdis使用nextjs编写,因此也可以非常方便地部署在vercel上。
不过这次的部署需要点额外操作,cusdis需要一个postgresql数据库来存放评论数据,我们可以使用railway免费提供的postgresql数据库。
 
先注册登录railway,https://railway.app/dashboard
点击new project,选择 provision PostgreSQL,即可创建一个数据库。
notion image
把这个连接数据库的url复制下来,待会在vercel部署cusdis会用到。
 
在vercel上new project,导入cusdis
填入这些环境变量
notion image
  • USERNAME :用于登录的用户名。如果你需要用到邮箱提醒功能,这里填你的邮箱地址。不用担心,后台可以设置别名,不会直接显示你这个邮箱。
  • PASSWORD :用于登录的密码
  • DB_URL :railway那里的数据库连接,(类似于 postgresql://johndoe:randompassword@localhost:5432/mydb)
  • JWT_SECRET :随便输入一段数字字符
点击部署等待完成。
 
部署完以后,还需要填两个环境变量,两个环境变量都填vercel分配给我们的域名。
notion image
notion image
NEXTAUTH_URL HOST
 
重新部署一下,点开就能进行登录了。
notion image
notion image
自建cusdis要在 blog.config.js 中要填入这三个:
notion image
保存修改后,等待vercel重新部署,刷新一下文章就能看到cusdis了。
 

3.3 [可选]配置自建cusdis的邮箱提醒功能

https://cusdis.com/doc#/features/notification,在cusdis文档里有详细的gmail、qq邮箱、163邮箱的设置方式。
我使用的是gmail,仅介绍gmail的配置过程。
 
先给你的谷歌账号生成一个一次性密码:https://myaccount.google.com/security
notion image
把这个一次性密码复制下来
 
填入环境变量:
notion image
SMTP_HOST=smtp.gmail.com SMTP_PORT=465 SMTP_SECURE=true SMTP_USER=your gmail email SMTP_PASSWORD=<app password> SMTP_SENDER=your gmail email
重新部署cusdis。
去cusdis后台设置一下:
notion image
然后在文章下面回复一条留言,测试是否成功收到提醒邮件。
提醒邮件是自己的邮箱发送给自己的。
注意一次性密码只能用一次,用过一次后要重新设置一个。
 
notion image
如果这里的免登陆通过留言的连接是错误的,是因为你 HOST 环境变量没填好,请检查下是否没填,或者填错了vercel分配给你的域名。

4. 编写文章

notion image

完成

之后只要在notion中修改了文章,博客网站也会自动更新内容。
修改了github里fork的nobelium项目,vercel也会自动重新进行部署。
真的太方便啦!全程不需要操作任何命令行,点鼠标就能进行部署。比两年hugo的方案可方便太多了。
自己部署最麻烦还是要做运维工作,而且修改完还要在git里面commit一下,多多少少还是会消磨不少耐性的。
 
 

参考

Notion建站 | Vercel+Nobelium搭建独立站 | TANGLY's BLOG
如果你在使用 Notion 记录一些知识/生活,通过 Nobelium 构建一个博客网站是一个不错的分享内容的方式。 本文将介绍通过 Nobelium 项目将个人博客托管到 Vercel,再绑定个人域名的操作过程。 如果你按照本文操作,那么最后能够收获外观不错的个人博客,并且你可以在 Notion 上撰写你的博客,内容会自动同步到个人博客中。 Nobelium :一个将Notion 做为CMS的静态博客项目,它具有以下特点: 快速的页面渲染和响应式设计 高效编译器的快速静态页面生成 部署在免费、高速的 Vercel 平台 支持增量式更新,更新文章后无需重复部署 评论、宽页面、搜索和标签 订阅、网站统计、Web Vital 分析...... 还有更多功能待你发现 丰富的配置项,更支持多语言 使用 Tailwind CSS,轻松实现二次开发 Vercel :一项对开源项目免费的托管服务。Vercel 是一项集部署发布、服务托管、证书部署等等为一体的自动化的托管服务器。 Vercel 面向开源项目是免费的(意味着其实你不需要花费任何钱); Vercel 能够自动将开发模式下的代码「转变」为可以对外提供服务的网页(意味着上手成本比较低); Vercel 做的非常好,功能完善到你无需知道太多专业知识,就可以部署独立域名、带安全证书的网站。 Notion: 这款产品究竟有多好用,无需我在此赘言。个人比较喜欢 block 的排版方式,有一种样式尽在掌握的感觉。 虽然 Notion 自己也有页面分享功能,但是限制较多: 因此直接拿 Notion 分享页面做个人 blog 站点有些勉强。 如果你熟悉各种开源项目,那么其实 Nobelium 的 README 已经详细介绍了具体部署的步骤,如果你只是普通的 Notion 用户,那么可以跟着以下步骤进行: 1.
Notion建站 | Vercel+Nobelium搭建独立站 | TANGLY's BLOG