🚧 从 奇思乱想 到 妙想天开

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
黑暗模式
响应式
Next.js 维护者,Vercel 公司工程师开发
和 notablog 类似的静态构建工具:功能支持更多,使用 Next.js 原生支持 Vercel
在 Nobelium 的基础上支持了更多主题
非常完善的构建工具,支持全文搜索
Next.js + Notion 原生 API
一个用 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 buildnpm exportgh-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 - 2023

powered by nobelium