这个博客背后的技术细节

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

保持简单，整站静态化

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

博客的构建

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

  1. 读取所有的 markdown 文件，通过 markdown-it 和 Prism 进行 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 年的目标下要如何技术选型。最后，祝福这个博客吧，希望能够一直写下去。

#tech

杭州