🚧 从 奇思乱想 到 妙想天开

date
Oct 20, 2022
slug
upgrade-blog
status
Published
tags
web
blog
guide
summary
打怪→获得经验→升级⤴️
type
Post
两年前我在 使用 Notion 搭建个人静态 Blog 一文中描述了本博客站点的搭建方式，实现了个人博客 从零到一。随着这两年笔耕不辍，近二十篇水文陆续问世，对站点的功能有了更高的要求，于是决定对博客方案进行全新升级，也希望能从“奇思乱想“的水文时代，向”妙想天开“的高质量博客站点迈进。

升级

工具的局限

两年前工具选型时并未有太多的调研，看到 notablog 渲染出的站点样式好看、功能基本能满足需求，就立马实施上马。经过这两年的体验，总结了一些该工具功能上的缺失：
  • 缺少 RSS 支持
  • 不支持分页，文章越来越多，页面越来越长
  • 不支持搜索，和分页类似，文章越多越不友好，我还想多写几篇
  • 缺少持续的更新（例如不支持 Simple Table/Mermaid 等 Notion 新特性、Go 代码块样式异常）
  • 缺少切换黑暗模式主题
部分功能缺失我在 issue 中向作者提出了feature request ，虽然都有回应，但也都束之高阁，很长时间都没见到开工的样子。
于是我对其他 Notion 博客生成工具进行调研，表中列举了一些我关注的功能点（在这里更多考察的开箱即用的能力）

其他 Notion 工具

名称
概述
RSS
评论
分析
搜索
sitemap
黑暗模式
响应式
Notion Blog
Next.js 维护者，Vercel 公司工程师开发
✅
❌
❌
❌
❌
❌
✅
Nobelium
和 notablog 类似的静态构建工具：功能支持更多，使用 Next.js 原生支持 Vercel
✅
✅
✅
✅
✅
✅
✅
NotionNext
在 Nobelium 的基础上支持了更多主题
✅
✅
✅
✅
✅
✅
✅
Next.js Notion Starter Kit
非常完善的构建工具，支持全文搜索
✅
✅
✅
✅
✅
✅
✅
notion-blog-nextjs
Next.js + Notion 原生 API
❌
❌
❌
❌
❌
✅
✅
Loconotion
一个用 Python 编写的 Notion 静态页面生成器，与其他通过 Next.js 生成页面不同，它让 Notion 自己渲染，然后将页面抓取出来，理论上能最大程度上还原 Notion 的样式。默认并不能生成一个站点。
❌
❌
❌
❌
❌
❌
❌
经过功能的简单筛选，优胜的工具有三个：Nobelium \ NotionNext \ Next.js Notion Starter Kit。
个人更偏向于 Nobelium，原因如下：
  • 默认支持的样式符合我的审美
  • 在基本功能都支持的前提下，代码足够简单，作为后端开发我能够比较轻松的修改和维护
另外两个工具：
  • Next.js Notion Starter Kit 本身非常推荐，功能齐全，样式好看，比 Nobelium 稍微复杂一些，最大优势是仍旧在积极维护中。
  • NotionNext 支持了更多主题，是否足够好看见仁见智，有一些类似“文章锁”的功能用不上。
秉承着 Simple is better than complex 的原则，“妙想天开” 将选用 Nobelium 作为生成工具。

工具改造

虽然 Nobelium 已经支持了我所有的需求，但我仍旧需要对它进行一些改造，因为它原生是面向 Vercel 部署构建的，而我想要一个纯静态站点部署在 Github Pages，而非 Next.js 所推崇的 SSR 服务端渲染。那么为啥不用 Vercel ？最直接的原因：墙。本身访问量就不多，进一步提高访问门槛只会更加门可罗雀。
所以第一步就是如何通过 Action 将 Next.js 应用在 Github Pages 上。具体的做法可以参考这篇文章和这个项目。最后的效果就是，只需要将源码推到主分支，既可以自动执行 npm build 和 npm export 到 gh-pages 分支，然后 Pages 相关配置使用 gh-pages 即可。
同时又因为我将动态渲染改成了静态站点，其中一些 getserverSideProps 动态部分（如 RSS）就需要改造成构建时生成，相关的步骤可以参考：
也可以直接参考我已经改造好的项目。
然后就可以开始对文章列表进行迁移了（完全手动的，一点点复制，还好写的文章不算特别多），其中有两点需要额外注意：
  • 尽量保证原文的 URL 一致。由于 notablog 默认会在 slug 后面多加一个 .html ，所以在新工具中旧文章的 slug 中需要额外加上 .html 后缀，来保证更换站点后，原文 URL 不变。
  • 由于我使用了 utterances 作为评论系统，需要保证文章迁移前后能够有同样的评论 (issueTerm → “pathname”)
最后对站点整体样式进行一些个人化的样式微调，大功告成：布鲁斯鱼的妙想天开 🎊

后续可能的升级点——传播的局限

由于之前并未有太多博客建站的经验，所以很多问题考虑不周，也大大制约了本博客的传播能力（当然，主要是文章水分过高，价值不够）。
主要有以下几个方面：
  • 缺少国内 CDN 加速。本站是中文站点，却经常引用 Upslash 的大图，丝毫没有把国内用户访问体验放在心上。
  • 搜索绝缘体。虽然我也不太看重百度搜索，也不想让自己的文章出现在一堆 CSDN、百度百家的文章中，但是由于未备案和 Github Pages 的部署性质，基本和国内的搜索说拜拜了。
  • 文章太水了，没有让人阅读和分享的欲望（这个暂时解决不了，能力一般，水平有限）
 
🤪
我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=34ky79072xmo4
 

© bluesyu 2019 - 2024

powered by nobelium