😝完成光荣的进化吧!- 构建开发者友好的博客系统

tags
dev
architecture
type
Post
summary
status
Published
slug
blog-architecture-evolution
date
May 19, 2023
我从大二到现在一直都在运行这个博客,中间断更/丢失过好多文章,但是追求的目标一直没有变过 —— 要好写,好看,好用… 从一而终。为了学习,不同的技术栈也是一换再换,真是非常有趣的过程。
下面简述了本博客的进化历史,抛砖引玉,和大家多多交流。

上古时代 — WordPress

WordPress不得不说真是最好用的建站工具之一。LNMP的架构经典而稳定,很适合不愿意折腾,专注内容产出的使用者。如果选择WordPress自己的云服务还能兼顾享受0配置的SEO优化。
从2018到2019,我曾使用WordPress来建立博客站点,部署到独立的1c2g学生机上,也是成就感满满。
缺点:WordPress不算是真正意义上的的headless CMS,文章编写无法兼容Markdown(依赖第三方),文章也无法独立归档,导致我那学生机到期了后丢失了不少文章 — 这也是我开始想方设法自建站点的另一大原因。
这段期间我也体验过Halo等其他技术栈的CMS,感受与WordPress相似,限制很多。但另一方面,如果你不爱折腾,这也是最好的技术。

中古时代 — Hexo/VuePress/Gatsby

开发一个静态博客是学习一个前端框架的最好途径之一。如果打算利用Markdown→ HTML的方式写一个网页,静态页面生成框架是一个好选择。
相比于纯PWA的前端页面,静态页面有很多好处,我能想到的包括不限于:
  1. 易于部署,一个public文件夹即可上线。
  1. 无首页白屏,体验好, PWA框架最大的缺点就是所有HTML context都是在浏览器端Javascript运行时渲染出来的,这意味着纯PWA会导致较长时间的首页白屏 — 毕竟除了一个root div什么都没有。
  1. 易于SEO,同样的,由于搜索引擎爬虫并不会执行页面JS,导致PWA页面的SEO难度较大。
这些静态站点生成器都有诸多主题能够选择,做一点简单的自定义即可。
部署方面可以考虑Azure Blob或腾讯云对象存储,省去了独立的服务器费用,而且有一键CDN的方式,体验也很好。
缺点:尽管静态页面生成是主流博客的技术选择之一,但是也有很多的劣势。
  1. 没有后端:页面资源管理难度大,文章一多就不好管理。页面中的图片等资源需要在开发阶段一并引入,这导致了图片管理成了难点,自建图床或第三方图床使用也不稳定。
  1. 写作体验差:我比较中意的Typora现在也开始收费了,目前没有什么离线Markdown编辑的好选择。
  1. 无法实时更新:本地没有开发环境就无法写作,必须依赖电脑,如果在手机上想写那就没办法了。上线后内容编辑困难,哪怕借助Github Action等CI工具,更新文章内容都要花大量的时间等待编译,站点在更新期间也是无法使用的。
对于初级玩家,纯静态页面博客是个不错的选择,主题众多,技术成熟。

现代之选 — SSR + Notion + Cloud Native

如果Notion能在境内随意访问,那我可能就不会使用自建博客的技术了。Notion的好处就是写作体验很爽,功能丰富,作为个人知识库有很多best practice,而且还有手机App,可惜就是境内基本访问不了。
如果Notion页面直接分享(CloudFlare DNS代理入境流量),一是不易SEO,二是Notion还是不具备博客的整体功能,我需要自定义主题。
利用Next.js/Nuxt.js/Astro这类服务端渲染框架来开发自己的博客页面,将Notion当成一个headless CMS是个好选择。
  • SSR/SSG有独立运行时,利用severless functions时刻监听Notion页面的变更,既有静态页面的SEO优势,又省去了生成器的繁琐编译步骤。
  • Notion强大的Markdown编辑能力和渲染能力能带来绝佳的写作体验。在线文档可以无限制导出成Markdown,多人协作/追踪变更非常方便。
  • 技术方案受欢迎,迭代更新快。现在我使用的是react-notion-x这个受欢迎的开源组件。很简单即可集成入Next.js,配置项丰富。
我绘制了一个简图来描述我的写作工作流:
notion image
利用这样的设计,可以在享受Notion的写作便利时,同时拥有无感知的博客生成体验。
  • 利用Azure Functions的timer trigger 时刻监听Notion中的文章更新,及时将Markdown文档存入blob
  • 由于Notion中导入图片国内无法访问,在将图片等资源插入Notion时同时存入腾讯云COS。利用COS的便利,也可以实现图片即时压缩,占位图生成等便利的图床功能,方便博客页面利用
  • 页面开发完成后直接推入repo,即可由Github Action将Next.js程序推入Azure Static Web App中。SWA监听Notion页面变化,进行静态页面的增量渲染
  • 利用Application Insight观测应用错误和页面状态,实时拨测站点,保证可用性
当然,现在的架构也有一定的不足:
  • 目前,Azure Static Web App对SSR框架的支持还处于preview阶段,功能有所限制。由于我没有Vercel价格优惠,考虑到价格和使用体验,在此之前我的方案是将Next.js应用推入Azure Container Instance或AKS中,免去了VM的维护,实现高可用。
  • Azure Global CDN在境内可能造成负优化,延时过高,域名备案的情况下可以直接考虑使用境内的CDN服务商(23.5.19备注:现在没有CDN了,CDN花了太多余额….)

回顾 — 下一步折腾什么

曾经在做Salesforce开发时,我第一次接触了商用CMS - Learn Experience Cloud,Salesforce开发的CMS系统。将商用CMS的强大功能引入博客的写作是个不错的主意。
我也曾考虑过利用开源headless CMS自建博客,如Strapi,但是好用的编辑模块要收费,好用的图床模块也要收费……
目前我还想实现的有几点:
  1. 多端发行 - 将我的文章自动发行到SegmentFault,CSDN,微信公众平台,等等… 由于文档已经冷存入Azure Storage Blob, 利用Azure Functions实现这样的功能是不错的办法,一些ETL工具应该也可实现这一功能。
  1. 评论私有化 - 我曾尝试使用一些私有化评论系统如Artalk,但是部署太复杂,数据托管也不便,最终还是选择了Cusdis这样的三方评论插件(Cusdis 似乎无法在微信浏览器上加载)。引入利用Github Issue实现的私有化评论系统,是个不错的主意。
  1. 跨端通知 - 当有新评论或文章时,向浏览过的用户进行通知。使用service worker即可轻松在浏览器中实现这一点,但效果不好监控,通知监控系统我目前没有找到比较好开源的实现,也不太想自己写…
不得不说,写博客比写文章更好玩🤪

Reference
 

lucky_bricks © 2018 - 2024