Blog切换到Hugo

2018-08-01 15:34:01 浏览数 (1)

其实很早就想把Blog迁移到静态化的博客系统了。不过一直没花时间来搞，当然主要原因还是懒。

这次下决心搞主要是因为，之前VPS迁移到Vultr，然后它的主机默认是没有交换区的。后来老是收到网站崩溃告警，每次去看都是MariaDB挂掉了，然后查了一下是内存不足。 然后，调整了几次参数，发现都不能解决问题。我这么个小站搞个高配机器显然是浪费。这种小网站都能耗尽1GB的内存我也是醉了。所以后来就干脆迁移到静态博客系统算了。

框架设计

其实本来有两个备选方案。一个是国人写得Hexo，另一个是Hugo。Jekyll不在考虑之列，因为我对ruby不熟并且没有兴趣。以前玩过Jekyll，感觉还是太折腾了。特别是国内还得换源什么的。

不过单单就Hexo和Hugo的框架设计来说，我觉得是Hexo远胜于Hugo的。因为Hexo有更完整的插件机制，主题机制。它的插件机制可以让你替换里面的核心组件，增加更多的渲染引擎、模板引擎等等。并且可以和nodejs的很多工具配合起来用，非常方便。这样主题作者和插件作者都能用自己的习惯和熟悉的工具链来开发。比如你可以用sass或者less来写css，然后也可以不用默认的模板引擎ejs，很多人的主题用jade的。甚至可以换掉Markdown引擎，增加更多的Markdown功能进去。也可以在很多事件点插入和修改生成的HTML，来插入一些功能。

相比之下Hugo就差多了。压根没有插件机制，干啥都得主题自己做。读配置也写得比较死，很不方便。比如Hexo可以给主题加配置，然后有主题配置和站点配置，但是Hugo就没法读取主题配置。另外Hugo的模板引擎只能用Go语言的HTML template。哇这货难用的屎一样。语法就像是要你自己写逆波兰式。自己写树形结构。不过就像Hugo自己说的，它这个静态网站生成系统非常地快。确实很快，比Hexo快多了。而且它的Star数量也赶超了Hexo。

不过我觉得Hugo比Hexo活跃的原因并不是因为它快。我觉得对于静态网站生成来说，这点性能并不是特别重要。而且Hexo的生成速度也可以接受，至少它比gitbook快多了。真正制约Hexo发展的应该是文档。作为一个开源项目而言，文档及其重要。而Hexo很多重要部分API的文件，根本找不到。比如它说一些事件里的回调参数是Data类型，然后我并没有在哪里找到Data类型是个啥，里面有什么。写插件和主题的时候全靠看别人的怎么写，然后试。这太伤了。相比之下,Hugo的文档就完善得多得多得多。虽然也有些地方的找别人主题的参考实现，但是基本上从复杂到小白的文档都覆盖得比较完整。

现在我也说不上来这两个那个更有前景，Hexo还差很多文档和事件响应目前给了裸HTML，虽然能用而且很自由，但是操作起来其实很不方便，缺乏最佳实践。而Hugo目前缺失插件机制，而且很多配置和参数写得很死。

我迁移到静态博客系统主要是复刻主题。所以两个系统的主题都复刻了一遍，主框架是一样的，但是用了兼容两者的写法和配置吧。

移植主题

我的Wordpress的博客用得是自己写得主题distinctionpp。所以复刻了两个系统的主题：

  • hexo-theme-distinctionpp
  • hugo-theme-distinctionpp

两个主题的功能和内容基本是保持一致的，除了有些无法实现的功能。比如Hugo很难支持把<!– toc –>转为目录，只能固定地给所有文章开头加目录。

然后在原有的主题上有做了更进一步地精简，裁剪加载文件大小和把一些图片换成纯CSS3实现，再就是微调一些样式。

然后顺便更新了下依赖库啥的，我毕竟不是搞前端的，所以懒得搞这种UI布局之类的东西，就直接用bootstrap了。不过我用的bootstrap的4.0，4.0必须加载它的js文件，而且还依赖tether，也导致多加载了几个文件。

不过直接能用bootstrap的响应式布局还是蛮舒服的。以前的distinctionpp主题的手机上显示还是看着蛮不爽的。而且现在还可以全部用相对大小，不再用px了。而且都不需要我自己去细调。

顺便学了下用sass来写css，其实和以前less差不太多。只不过bootstrap开始转用sass了而且似乎现在less并没有sass活跃。而且导入sass之后还能使用一些bootstrap定义的函数什么的。还算方便吧。

接下来还有一些额外的功能得添加和替换，毕竟静态博客和动态网站还是有一些限制的。

添加 MathJax/KaTex 支持

MathJax和KaTex主要用来用Latex写公式。

这个在Hexo里很方便，有人写了插件，安装就行了。但是Hugo就得自己集成了，还好反正不困难。然后我的Blog就支持公式了。并且我把以前一些文章的内容改成了公式。好看多了。

代码高亮

原先我是写了Wordpress插件WP-Code-Highlight.js。这里我就直接集成到主题里去了。而且也没其他什么很好的方法。两个系统自带的高亮都很渣，插件兼容性很糟糕。

搜索

静态博客没有搜索功能嘛，所以我研究了下通过GET请求到搜索引擎来做站内搜索。但是有一些搜索引擎其实提供Search Box的功能，供你在网站里集成站内搜索，比如Google和DuckDuckGo。我看过最好的还是Google,但是国内Google太不稳定，所以我还是用了Bing的GET请求。目前主题里都是用的请求跳转到搜索引擎，不过说不定哪天我会有兴趣集成Search Box。

这里先记下其他搜索引擎的参数：

  • Google
    • Search Box: https://cse.google.com
    • URL: //google.com/search
    • 搜索词参数: q=搜索内容
    • 站内限制参数: sitesearch=域名

  • Bing
    • https://blogs.msdn.microsoft.com/zxue/2009/07/31/adding-microsoft-bing-to-your-web-site/
    • URL: //www.bing.com/search
    • 搜索词参数: q=搜索内容
    • 站内限制参数: q1=site:域名

  • DuckDuckGo
    • Search Box: https://duckduckgo.com/search_box
    • http://patdryburgh.com/blog/adding-a-custom-duckduckgo-search-bar-to-your-site/
    • http://duckduckgo.com/params.html
    • URL: //duckduckgo.com/
    • 搜索词参数: q=搜索内容
    • 站内限制参数: sites=域名

  • Baidu
    • Search Box: http://zhanzhang.baidu.com/guide/index
    • http://zn.baidu.com/cse/wiki/index?category_id=25
    • URL: //zhannei.baidu.com/cse/site
    • 搜索词参数: query=搜索内容
    • 站内限制参数: cc=域名
    • 百度的所有者验证不支持301跳转，我的Blog会HTTP强制301跳转到HTTPS的链接。导致我一直验证不成功，真是渣渣。

  • Sogou
    • http://fuwu.sogou.com/daima/code.html
    • URL: //www.sogou.com/web
    • 搜索词参数: query=搜索内容
    • 站内限制参数: insite=域名

评论

评论系统也是蛮麻烦的，之前国内的多说已经关闭了。我看了下别人说的其他家也不是很好用。

不过我之前看到过有人做了用Github的Issue来做评论系统的，之前star了gitcomment，就试了一下。我的主题里是集成了这个，但是这个和另一个俄罗斯小朋友写得系统一样，要求评论者必须授权Application对Public仓库的完整读写权限（包括但不限于代码、Wiki和issues）。不过gitcomment作者也说了，github没有提供更系粒度的权限了，所以这已经是要的最小的权限了,但是读权限就算了，还必须给写权限，我还是觉得有点不靠谱，所以我自己妹妹有用，测试完就关掉配置了，其他人谁想用倒是可以打开。

最终还是回归disqus。无奈这货在国内被墙。唉，反正上我blog还会回复的应该都是程序员了吧？程序员访问外国网站不是难事吧？所以不管了先还是disqus吧。

后遗症

这个换完系统其实还是蛮伤的，一个是之前的评论我先吧重要的补到原来的文章里了，不重要的就丢了。 然后哪些迁移工具导出的Markdown多多少少有问题，所以我挨个过了一遍。 再就是原来的地址都失效了，站点地图内容也全部变了，估计搜索引擎会发现很多死链，不知道啥时候才能刷新完。 至于文章的超链接，我自己Blog里互相引用的我是过了一遍改掉了，外部的引用我就没办法了。而且懒得复原原来的短连接了，新的链接模式都很短。

不过也算是一劳永逸吧，所以文章都变成Markdown，以后都很容易转换和导出导入。不再需要数据库了，我觉得我的VPS又可以降级了。嘿，便宜才是硬道理。

hexo ruby

0 人点赞