我又双叒叕全面升级我的博客了

本文最后更新于：2019 年 07 月 13 日 星期六

如果你有订阅我的 RSS ，你会发现在几个小时之前收到了一大堆我的博客的文章的更新，别担心，这不是因为你的消息聚合软件坏了，是因为我叕升级了我的博客， feed 重新生成了一次。

我第一次搭建我的个人博客是在 2016 年的秋天，而现在已经快到 2019 年的秋天了。

三年里面，我正式地公开的我的博客的版本至少有 5 个（所以为什么是 “叕”，升级了 4 次），他们可能现在还躺在我的 GitHub 仓库里（仓库名分别是 my_Blog-2016 、 my_Blog-2017 、 my_Blog-2018 、 my_Blog-2018plus 和 my_Blog ），就连博客地址都换过三四个。

Hexo

虽然我升级我的博客，但是我几乎没有删过我的文章（有一些过于无聊被我隐藏了，如果你知道链接你甚至还能找到），你可以数一下，包括这一篇，目前我一共才写了 27 篇文章。平均每写不到 6 篇文章就要升级一下我的博客，这种做法看起来很无聊。我为什么要频繁给我的博客“换壳”呢？

这个问题最根本的原因在于无聊，你看我 18 年没事干，所以换了两次， 19 年我忙得到了下半年才不得不换了一次。但其实还有一个原因，那就是用得不爽。前 4 个博客使用的搭建方式分别如下

  1. my_Blog-2016 ，Jekyll + “LessOrMore”(theme) + GitHub Pages
  2. my_Blog-2017 ，Jekyll + “Moon”(theme) + GitHub Pages + OSS(图片等静态资源)
  3. my_Blog-2018 ，Jekyll + “Forty”(theme) + GitHub Pages + OSS(图片等静态资源)
  4. my_Blog-2018plus ，MkDocs + “Material”(theme) + (OSS * CDN)

你可以看到，前三个都是用一样的方式，只是使用的 Jekyll 主题不同。在 my_Blog-2018plus 的更新说明里面我应该也说了，我放弃 Jekyll 的原因， Jekyll 环境搭建不方便，不同的主题对于 Markdown 支持不一致，没有哪个主题有很好的目录，不能搜索之类的。 Jekyll 完全不是一个省心的方案，而且主题的风格基本就是浮夸而且混乱而且不好用，不止一个用户告诉我不知道我的文章在哪。

因为使用 Jekyll 的不愉快，后来我换用了 MkDocs 。而且优化了我博客部署的方式。 MkDocs 真的非常棒，他其实更多地被用在自动构建文档上，但是我把它当作博客。他使用 Python 构建网站，这意味着环境搭建只需要一个 requirement.txt 然后 pip 就可以了。他有非常好的对目录的支持，可以搜索，除了文章几乎什么都没有。使用 python-markdown 对文章进行渲染，可靠、而且具有非常一致的效果，而且支持 python-markdown 支持的各种扩展。我甚至现在都还怀念那种舒适。

那我现在使用的方案又是什么呢， Hexo + “Material”(theme) + GitHub Pages + OSS(图片等静态资源)

换用 Hexo 的原因不是因为 MkDocs 用得不舒服。而是因为 MkDocs 毕竟是用于生成文档的，并不适合博客。如果你们仔细浏览过我原来的博客，你会发现你们不会知道我哪篇文章是新写的。因为 MkDocs 组织文章的方式就是目录，而不是发布顺序，因为是文档嘛，文档里面的文章没有先后概念。当你要在我博客里找一篇文章时，除非你知道他在哪，不然你不容易找到，因为没有一个全部文章列表，你只能逐一展开目录，而且如果你没有仔细观察你可能还不知道目录在左侧。这些问题原本都可以通过换用主题来解决，但是 MkDocs 没有什么主题，更没有像博客的主题，每个主题都是文档风格的，我挑选的 “Material” 主题已经是很活泼的一个了。

事实上，在迁移博客的过程中我发现 Hexo 用得根本没有 MkDocs 舒服，特别是 Hexo 解析 Markdown 非常智障。Markdown扩展语法和标签插件都有点小bug，文章交叉引用非常不方便，代码块的语法高亮不正常，总之问题还有不少，我还需要适应一下。但是 Hexo 还算是一个比较大的适用于博客的静态网站生成器，有比较丰富的主题，有对于搜索、分类（像目录那样使用）、标签的支持。在我看来基本上就是比 Jekyll 省心一点，又比 MkDocs 更像博客，希望不会让我失望。

部署方式

你会注意到我现在博客部署方式又回到了一年前的样子。我博客部署方式的升级比我博客使用的静态网站生成器或者主题的升级要频繁得多。 16 年最开始的时候，我就是用 Jekyll ，由 GitHub Pages 帮我构建（因为 GitHub Pages 支持 Jekyll）并托管我整个静态网站。

这样会有两个问题，一个是调试不容易，因为是 GitHub Pages 帮我构建的，如果构建过程有什么报错，我需要在 push 几分钟之后才能知道，改完再 push 。还有一个问题是所有文件都在 GitHub Pages 上导致网站访问速度很低。如果一篇文章图片很多的话， push 也很慢，访问也很慢。所以我开始了逐渐将图片等静态资源迁移到 OSS 上，开始是只有图片，后来CSS、JS什么的都往上面搬，一个一个去找那些 <link> 和 <script></script> 标签，改成我 OSS 上的地址。这个过程有时候很困难，因为有一些静态资源的加载不是很显然的，具体就不说了，反正最后只有一个 .html 在 GitHub Pages 上，其他所有静态资源都在 OSS 上。这给我的网站访问速度带来了不少的提升。

但是在我进一步希望提升的时候，我发现这样一个现象，就是文章的 DOM 加载比较缓慢，拖慢了整个页面的加载速度。比如说文章 html 里写了 10 个图片的 url ，一个 html 有 20kB ， 10 个图片每个 1MB 。表面上看图片占了页面总大小的绝对大头，而我图片都在 OSS 上，那应该加载速度主要取决于 OSS 的速度啊。完全不是这样，因为在 html 没有加载到写着 url 的那一行时，浏览器根本不知道需要加载一个图片。如果加载所有其他静态资源的时间需要 5s ，加载 html 的时间也需要 5s ，那这些资源的 url 写在 html 中，整个页面一起加载的总时长很可能超过 10s 。而一个 html 往往只有几十 kB ，其他静态资源有十几 MB ，被一个几十 kB 的文件拖慢整个页面加载速度是非常不划算的。所以后来我把所有文件都放到了 OSS 上，在本机构建好，然后上传到 OSS 上。并且还给 OSS 加上了 CDN ，网站访问速度可以说是非常快了。（ 友链列表 里面有个人的博客用 Hexo 搭建的， 1MB 的页面加载要超过 1 分钟，而我之前的 20MB 也只需要十几秒）

那现在我为什么不用全部放到 OSS 上的方式了呢。用过 OSS 的人应该知道， OSS 是没有目录的概念的。如果一个文件的 url 是 /links/index.html 那么他在 OSS 上就被记为文件名是 /links/index.html 。一般静态资源服务器，如果支持 auto index 的话，你访问 /links/ 他会自动把 /links/index.html 发给你，而 OSS 只会给你返回一个 404 。这个问题在 MkDocs 上其实只是关乎 url 的美观问题，但是在 Hexo 上就比较棘手。你可以使文章的链接是 /post.html 风格的，但是你不能使所有页面都是这样的，比如如果是 hexo new page links 他就会建立一个文件夹 /links/ 里面放一个 index.html ，你可以自己建文件风格的页面，也可以访问到，但是有一些特殊页面，比如 /tags/ 和 /categories/ 在 Hexo 中就是约定好是这种目录风格的，这个没办法设置。所以不能使用 OSS 。

而且最大的问题其实来自于阿里云。如果要用国内的 OSS 或者 CDN 建站，使用自定义的域名，那那个域名是需要备案的。我之前有两个域名 keybrl.com 和 keybrl.ink ，都备案了同一个网站。但是现在我放弃了 keybrl.ink ，它现在过期了，我没有续费。某一天阿里云的客服打电话给我说这个域名过期了，备案的网站会失效，如果不再使用了，要从备案信息中移除，否则整个网站备案都会失效。于是我去修改备案信息。无法提交修改，因为 “‘个人博客/网站’类备案必须填写‘紧急联系人’”，我是因为最初备案时没有这个要求，没有填写，但是在我变更备案信息时，联系信息是不能修改的，这个智障的 bug 怎么都绕不过。我一气之下，直接注销了备案，并且打算之后迁到腾讯云。所以在我没有重新备案之前，我只能暂时先使用着 GitHub Pages ，不过静态资源都在 OSS 上，访问速度应该不会降低太多。

其实我域名就在腾讯云下，云主机之前因为阿里云学生主机不能续费了迁到了腾讯云，备案被阿里云这么一搞我也打算迁到腾讯云，剩下 OSS 和 CDN 估计找个机会也会迁。

等域名备案完成后，部署策略应该会变成 (云主机 + OSS) * CDN ，因为 Hexo 对文件风格的 URL 支持不好，而 OSS 又不支持目录风格的 URL 。所以我打算在云主机上用 Nginx 配个静态网站服务器，然后 GitHub 设置一个 Webhooks 。hexo deploy 时，构建好直接 push 到 GitHub 的 gh-pages 分支，分支提交时， Webhooks 给云主机发个信息，云主机自动 pull 一下 GitHub 上的 gh-pages 分支，完成一次更新。关于博客部署和访问速度的优化，我以后可能会写一篇文章专门介绍一下。

文章结构更新

由于没有了 MkDocs 那样严格的目录，所以我现在也使用 Hexo 的分类和标签来管理文章了。从左边菜单栏你可以看到所有的分类，还是跟以前一样，分成以下几类

  • 无聊的日常 ，我无聊的日常的分享
  • 专业相关 ，个人专业方面（计算机科学、软件工程等专业）相关的学习、归纳、总结的文章
  • SS::STA ，SS::STA（Software School Science & Tech Association, 软院科协）相关的活动回顾之类的文章（虽然软院都没了）
  • 垃圾代码 ，自己写的一些自己觉得比较有趣项目的介绍
  • 转载 ，不是我写的文章

每个分类下面暂时先不设置子分类，文章的关键字会被放到“标签”中

外观

大家都注意到了，新博客外观和原来的不一样，但是有几分相似，因为我仍然使用 “Material” 主题。虽然 Hexo 的 “Material” 主题和 MkDocs 的不一样，但是设计理念还是差不多的，这个我还是很喜欢的。这个主题还有不少需要调教的地方，所以以后可能外观还会有大的变动，但是起码主题就是选定这个了。

我也尽量让新的博客有一种原来博客的感觉。

好啦，先介绍那么多吧，虽然我更新文章的频率实在缓慢，但还是希望大家能关注一下我的博客。加到收藏夹，或者 订阅 RSS 。我以后会尽量多更新文章的。