这个博客背后的技术细节

立一个小目标,希望这个博客在 80 年后依然有人访问,这样正好可以跨越一个世纪到 2100 年。

保持简单,整站静态化

之前折腾过很多不同的博客框架,比如 GhostTypeechoWordpress 等等,一开始会很酷炫,但是最后因为种种原因都没有坚持下来,最根本的原因还是技术维护成本太高,同时也有比较多的限制,不能随意修改页面内容。 回到博客的本质,实际上整体的内容就是一个个可以被静态化的页面,所以整体的架构上,这个博客全站都是静态化的页面,带来的最直接的好处是部署简单,只要丢到一个可以提供静态服务的服务中即可。

博客的构建

博客的主要构建流程都是跑在 Node.js 环境下,主要可分为 2 部分:

  1. 读取所有的 markdown 文件,通过 markdown-itPrism 进行 html 转化和代码高亮处理,同时动态构建博客首页
  2. 借助 Parcel 统一对 html、js、css 以及其他静态文件进行构建压缩

采用以上的构建方式的理由主要是以下几点:

  1. 博客的原始内容都用 markdown 的形式,一是本身的协议简洁明了,适合博客的内容;二是已成为通用的标准,同时兼容 html ,有很高的自由度
  2. 在第一步时,实际已经构建好了相应的 html 页面,使用 Parcel 是为了进一步优化这些页面的代码,未来这一块如果有新的构建工具出现,只需要仍然遵循 HTML 规范,就可以简单直接替换升级

博客的部署

最开始是想放到七牛的 CDN 上,但是发现由于缓存,HTML 更新的需要等待较长时间。最后是部署在了 Vercel,只需要指定好对应的构建脚本和根目录,每次 git push 时就会触发自动构建部署,非常省心。

SEO 优化

在 SEO 优化上由于本身就是静态的网站,不再需要做服务端的渲染,主要的优化是在语义化标签上这一个维度。重点是在博客的首页,搜索引擎的爬虫基本都是通过首页进行爬去

在首页的文章部分使用 article 标签包裹,这样搜索引擎就能很好地获取每一个文章的内容

<article>
  <a href="/"><h2>这个博客背后的技术</h2></a>
  <p><time pubdate>2020-10-06</time></p>
  <p>...</p>
</article>

同时对于在国内的搜索引擎,百度有一套自己的搜索资源平台,可以在上面进行相关的设置,以及推送相应的 url 让百度的爬虫主动爬到你,但目前看效果比较小,百度对于新页面的收录速度还是有点慢的。

构建 RSS

RSS: Really Simple Syndication(简易信息聚合),是一个蛮伟大的发明,能够快速订阅到一个博客更新的内容,同时相比于微信公众号之类的平台,具有更好的开放性,本站同时也支持 RSS 订阅,具体的技术实现是使用了 feed 来实现。

离线的可访问性

如果你此刻切断网络,回退,再点开链接,还是能够正常访问(微信禁用了 ServiceWorker 除外)。离线访问是为了避免由于网络带来的不稳定性,最大限度实现保障可用性,这样即使背后的服务由于各种原因无法访问,只要你曾经访问过这个页面,就还是能够继续访问。 在技术的实现细节上底层是用了 Service Worker 来缓存站点的资源,Workbox 提供了很多非常有用的工具可以快速实现。

评论

评论系统直接使用了 Disqus 搭建,其他一切都好,唯一不方便的就是需要翻墙才可以。

数据统计

博客的访问统计同时部署了百度统计Google Analytics。整体上的感觉是百度的服务在国内会稳定一些,GA 的数据统计分析维度会多很多,访问需要翻墙。

后记

对于这个博客思考了很多自己想要什么,以及站在要坚持 80 年的目标下要如何技术选型。最后,祝福这个博客吧,希望能够一直写下去。

杭州