博客的迁移和重整

slug

2023-041

status

Published

寻找

今年的 2 月，我曾因为服务器的原因将博客从 Typecho 迁移到了 Notion，并通过 Super.so 驱动。老实讲，整体并不是非常满意，主要是以下三点：

Super.so 还没有为博客提供 RSS 订阅。无奈之下最开始使用的是用 rss.com 制作的订阅源，发现并不稳定而且不能输出全文；又换成了 fetchrss.com，只能在部分 RSS 阅读器中可以查看全文；最后，看到了 DIYgod 大佬的新项目链上开源博客 xLog，这才解决了 RSS 的问题。

Super.so 也没有集成评论功能。虽然我的博客评论并不多，但总还是有的。即便是我找到了 Tally，也还是因为读者使用门槛过高而受到过批评。

Super.so 更适合构建简单的网站，而不适合于博客。利用 Notion + Super.so 来做 CMS 很合适，可如果单纯做博客，尤其是内容一多起来，页面管理复杂、混乱的问题就暴露出来。

所以，我又开始寻找与 Notion 更匹配的博客驱动服务。

利用 Notion 建站的项目有很多，经过筛选之后我挑出来 4 个，分别是 Feather.so，Notablog，NotionNext 和 Nobelium。

Feather.so 非常好，可以说如果想要把 Notion 当作博客来使用，最好的驱动服务就是这个了。不仅有 RSS，也有评论功能，非常好的 SEO 优化，页面管理逻辑顺畅……不过，好服务往往对应着高价格，Super.so 每个月 $12 我都嫌贵，更何况这个是每个月 $39 呢。

Notablog 是我关注很久的一个项目，由一位美籍华人在 GitHub 上开源。整体观感十分简洁、优雅，操作与管理逻辑也很清晰，可以很方便地部署在 VPS。然而，这个项目近一年没有什么更新了。

NotionNext 是我曾经部署过的一个项目，不仅写过文章介绍，还推荐给了好几位朋友。到目前为止开发者的更新依然频繁，一直在尽心维护。只是对 Notion Block 的支持并不全面，更新起来也有些麻烦，不太适合我这种懒人。

Nobelium 和 Notablog 与 NotionNext 一样是在 GitHub 上开源的项目，只是与后两者区别很大。Notablog 更像是一个个人网站；NotionNext 由于支持很多种主题，显得花哨了很多；Nobelium 就是一个极简风格的博客，没有华丽的渲染，没有多变的主题，也没有复杂的功能。普普通通的 Nobelium 给了我返璞归真的感觉，个人博客不就应该是这样的吗？

部署

Nobelium 的部署并不复杂，开发者在 GitHub 的项目页面中写的很详细，我只简单说一下。

步骤一：复制 Notion template 到您自己的 Notion 账号中。

这个数据库里的每一个属性非常好理解。

💡

数据库属性释义

title：文章的标题；

date：文章发布的时间，如果留空默认是文章创建的时间；

slug：文章 URL 尾部的字符，也就是 .com/xxx 中 xxx 的部分，建议使用英文，用 - 代替空格；如果使用中文或者空格、标点，会被 UrlEncode 变成一长串，链接会显得很长且不美观；

summary：文章简介，会显示在主页标题的底部；

tags：文章标签，可以对文章进行分类；

status：文章状态，只有 Published 状态的文章会在博客公开显示；Draft 是草稿状态，Idea 是想法状态，Revise 是改写状态，这三种状态都不会在博客公开显示；

type：Post 会直接显示在主页，Page 只有直接访问 URL 会显示，不会出现在主页文章列表中。

步骤二：在 GitHub 中将项目 Fork 到自己的账号之后，需要修改 blog.config.js 中的内容。

步骤三：修改完成后，到 Vercel 中部署就可以了，记得在 1️⃣ 填写 NOTION_PAGE_ID，在 2️⃣ 填写Page ID，然后点击 Add 添加。

什么是 Notion Page ID

在 Notion 中点击 Share，然后打开 Share to web，会生成一段可公开访问的网址，比如 https://xxx.notion.site/80c301f9f7264a4aa5dfc1f8b9841222?v=37fe9de07b164c27a9cc3a7c5614a7c4，在https://xxx.notion.site/ 之后，?v= 之前的那一段编码就是 Page ID，即80c301f9f7264a4aa5dfc1f8b9841222 。

Cusdis

我很认同秉儒在《为何我想停用 Cusdis 但却又反悔？》中提到的理想中留言系统的样子：

有匿名留言的功能；要用 Twitter, Github, Telegram, FB, Google 等不同登录方式也可以；也可以用 email 登录；支持 markdown；可以连接 Tg 或 Slack 等通讯软件实时提醒；可以用 email 通知评论者他们的评论已回复（如果有留下 email）；轻量、注重隐私。

从 blog.config.js 可以看到，Nobelium 的评论插件支持 gitalk，utterances 和 cusdis。

Utterances 我没有用过，所以不考虑。Gitalk 在写评论的时候要使用 GitHub 账号登录，并不是匿名的，而且在国内的访问也不好，所以不考虑。Cusdis 是 Randy 大佬开发的评论插件，不仅小巧便捷，还不需要在评论的时候登录任何账号进行匿名评论，自然也就成为了唯一的选择，并且我之前还使用过，印象中很接近理想中留言系统的样子。

我没有选择自部署，而是直接用的 cusdis 的官方服务，添加了 Webhook，有新的评论就可以在 Tg 上实时提醒。之前就搭建了 MTPROTO，也不需要担心 Tg 收不到提醒。

由于 cusdis 是免登录的评论服务，所以每一条匿名评论都需要管理员批准，看起来似乎有些繁琐。不过测试的时候我发现可以直接在 Tg 中免登录批准评论，跳转也很方便。

修改

部署完之后，我将 Notion 中原本在 Super.so 数据库的文章都移动到了 Nobelium 的数据库。然后刷新了一下博客页面，发现对默认的导航栏、页脚、代码块和字体都不是很满意。于是，不懂代码的我就在 ChatGPT 的帮助下开始了自定义。

导航栏

首先修改的就是导航栏。在 components/Header.js 中，有这样一段代码：

其中 id: 0, name: locale.NAV.INDEX, to: BLOG.path || '/', show: true 可以翻译为 id: 显示顺序, name: local.NAV. 变量, to: '路径', show: true。

简单理解，变量就是在导航栏中需要显示的名称变量，路径就是这个变量指向的 URL 是哪里。比如 id: 0 这个链接的变量是 INDEX，路径是博客地址。

既然存在变量，就需要先到申明变量为何物的文件中设置好变量的名称。在 assets/i18n/basic 中可以看到 en-US.json 等 6 个文件，所对应的就是 blog.config.js 中设定好的语言。于是，我就在 zh-CN.json 中修改和增加了导航栏变量和显示名称。

考虑到我增加了 Newsletter，会跳转我在小报童的付费专栏订阅，那么 RSS 再显示为订阅会产生语义分歧。所以干脆把所有的变量显示名称全都改成了英文。

修改完 zh-CN.json 后，我就在 Header.js 中修改了导航栏中各条链接的显示顺序，并删除了 About（内容移动到 Page 页）。

以上的代码内容修改完后，我回到了 Notion，在 Nobelium 的数据库中增加了两个 type 为 Page 的页面，其中一个的 title 为 Newsletter，slug 留空（因为已经在代码中添加）；另一个的 title 为 Page，slug 为 page。

页脚

Nobelium 的默认页脚左边为 © 昵称博客起始年份 - 现在的年份，右边为 ▲ Powered by Vercel。

我觉得这样不美观，就想着把左边的 © 昵称博客起始年份 - 现在的年份 移动到右边，把 ▲ Powered by Vercel 移动到 Page 页，左边则显示带有 Copyright 页面链接的 Creative Commons 图标。

在 components/Footer.js 中看了半天，也不知道该怎么修改。于是问了 ChatGPT，他直接帮我生成了代码，复制粘贴进去之后，重新部署后美观了许多。

代码块

我发现在深色主题中，代码块的颜色依然是浅色，晚上看着十分扎眼。搜索了一番后，找到了 Leon 在《记录新博客：nobelium, Vercel, Tailwind CSS 和域名》中也提到了这一点，他用了 Prism.js 提供的深色背景 prism-tomorrow.css，还修改了 notion.css 的代码。我没有那么麻烦，直接到 pages/_app.js 中把原本引用的 prism.css 做了替换。

字体

一直都很喜欢在 GitHub 上开源的霞婺字体，在之前还在用 Typecho 的时候就想着把字体换成霞婺文楷，但没有成功。这一回怎么着都得尝试一下。

我看到 public/fonts 中有四个 woff2 的字体文件，于是找到了霞鹜文楷的 LXGW Bright GB 版本，下载并上传了 LXGWBrightGB-Regular.woff2。

之后先是在 styles/globals.css 中声明了字体。

然后在 tailwind.config.js 中添加了字体。

再到 components 文件夹中修改了 Container.js 和 NotionRenderer.js 两个文件。

终于，我在博客上配置好了霞婺字体，实现了一个心愿。

完善

代码部分的修改完成，接下来就是回到 Notion 中，在 Nobelium 数据库中完善博客的内容了。

我首先完善的是 Page 页面中的内容。我将 Page 页面定义为博客的独立页面入口，它本应该只是一个不带链接的菜单按钮，其架构在理想状态下是这样的：

因为 Nobelium 目前还不支持二级菜单（submenu），为了保持导航栏的简洁，只能将我的 Memos，File Gallery，Monitor 这三个独立页面，和原本应该在 About 和 Friend Link 中呈现的内容都放到 Page 页面中。

Memos 是我利用 GitHub 上的仿 flomo 的开源项目 memos 自部署的一个快速备忘录。这里存放着一些目前不成熟的想法，也可以把它看作是我的私人「Twitter」。目前的分类包括 #闪念，#思考，#碎碎念，#吐槽，#推荐等。

File Gallery 是一个资源分享站，收集到好玩的、实用的资源会存放在里面。

Monitor 是一个监控站点，用来监控我在网络中部署的网站、服务和 VPS 的运行情况。

About 则分为了 About This Site 和 About Me 两部分书写。

在 About This Site 中列举了博客的名称（标题），网址，Logo，描述（副标题），版权声明，技术建构，DNS 和 CDN 服务，以及使用的字体。因为将页脚的 ▲ Powered by Vercel 移除了，所以在技术声明中，进行了说明，同时也表达对 Vercel 的感谢。同样的，我使用了 Cloudflare 做 DNS 和 CDN 服务，使用了霞婺字体，这两者和 Vercel 一样都提供了非常好用的免费的服务，也理应说明并表示感谢。另外，还写了一小段我一直坚持写博客的初衷。

在 About Me 中，简单描述了我的 MBTI 人格、身份和职业，写了我的座右铭，留了我的 Email 和 Twitter。

完善 Page 页面的内容后，我又制作了 Copyright 页面并修改了 Footer.js ，使左侧的 Creative Commons 图标指向了这个页面。

总结

博客原本就应该纯粹，用于记录与分享。Notion 非常好用，Nobelium 非常简洁，满足了我对博客的全部需求。在这个过程中，我也学习到了许多知识，比如关于 Tailwind CSS 和 Next.js，我依然不入门，但至少能看懂了，也知道该怎么样向 ChatGPT 提问以输出我想要的代码。接下来，就是认真梳理与思考该怎么样继续提高文字的水准了。