Featured image of post 为什么要从 Hexo 转到 Hugo？
Blog

为什么要从 Hexo 转到 Hugo？

为什么我们要从 Hexo 转到 Hugo？

为什么要从 Hexo 转到 Hugo？

性能

Hexo 使用 NodeJS 编写，而 Hugo 使用 Go 编写，尤其是对于公式图像繁多的文章，编译速度差异巨大

以本 Blog 为例进行编译

Hexo, 总耗时 11s + 8.61s = 19.61s

INFO  Validating config
INFO  Start processing
INFO  [Fluid] 读取 _config.yml 中 theme_config 配置项覆盖配置
SVG - Unknown character: U+FF0C in MathJax_Main,MathJax_Size1,MathJax_AMS
....
SVG - Unknown character: U+6709 in MathJax_Main,MathJax_Size1,MathJax_AMS
update link as:-->/post/ap-psycho/Untitled.png
update link as:-->/post/ap-psycho/Untitled%201.png
update link as:-->/post/ap-psycho/Untitled%202.png
update link as:-->/post/ap-psycho/Untitled%203.png
update link as:-->/post/ap-psycho/Untitled%204.png
....
update link as:-->/post/ap-em1/2021-11-09-13-20-45.webp
update link as:-->/post/ap-em1/2021-11-09-19-07-23.webp
INFO  感谢使用 Fluid 主题 !
INFO  Files loaded in 11 s
INFO  Deleted: post/ap-em2/2021-11-10-04-12-14.webp
INFO  neat the html: about/index.html [ 20.18% saved]
....
INFO  neat the html: links/index.html [ 25.10% saved]
INFO  Generated: baidusitemap.xml
INFO  Generated: sitemap.xml
....
INFO  Generated: post/ap-psycho/Untitled 52.png
INFO  Generated: atom.xml
INFO  Generated: local-search.xml
INFO  Generated: search.xml
INFO  71 files generated in 8.61 s

Hugo, 总耗时 2.025s

$ hugo --gc
Start building sites … 
hugo v0.93.0-DEV+extended darwin/amd64 BuildDate=unknown

                   | EN   
-------------------+------
  Pages            | 149  
  Paginator pages  |  33  
  Non-page files   | 659  
  Static files     |   0  
  Processed images |  18  
  Aliases          |  58  
  Sitemaps         |   1  
  Cleaned          |   0  

Total in 2025 ms

接近 10 倍的差距，且随着文章数量的上升 Hexo 的构建体验会显著性的下降

开发环境

  • NodeJs 使用极其恶俗的 npm 包管理，致使 node_modules 繁复硕大如瘤的同时存在各种嵌套依赖的问题，尤其是在 Hexo 对于 MathJax 一类的支持极其混乱。
    • 不同的包用着各式不同版本的 MathJax 渲染页面
    • 大多数参数不可控制，比如我们需要使用的 mchem 宏包，需要强行修改 node_modules 下关于 MathJax 的代码才得以实现
HEAVIER than BLACK HOLE!
  • Hugo 则完全不存在这种问题
    • 首先是 Hugo 本体与前端剥离，安装 Hugo 不需要安装任何 Hugo 依赖
    • 刚刚提到的关于 MathJax 的部分完全可以交由 theme 自由处理，且用户可以轻松更改，不会和 Hugo 本体冲突（Hexo 拓展和本体共用依赖库）
  • 且 Hugo 的创作环境更有利于内容的长期管理，如下所示

Hugo 的内容管理，每篇文章独立项目文件夹

├── post (主文件夹)
│   └── operator-precedence (项目文件夹)
│       ├── index.md (文章内容)
│       └── operator-precedence (图像资源)
│           ├── c-operator-precedence.webp
│           └── tree.webp

Hexo 的内容管理，每篇文章都在 _posts 主文件夹下

_posts (主文件夹)
├── acsl (文章图像资源)
│   ├── ...
│   └── xxx.webp
├── acsl.md (文章内容)
├── ap-cal-bc
│   ├── ...
│   └── xxx.webp
├── ap-cal-bc.md
├── ap-chem
│   ├── ...
│   └── xxx.webp
└── ap-chem.md

特性支持

  • Hugo 的 RSS 生成可以由 theme 完全控制，Hexo 的 RSS 在引入 Lazyload 后无法加载任何图片
  • 我们使用的主题 CaiJimmy/hugo-theme-stack，相较于 Hexo 上的 fluid-dev/hexo-theme-fluid 拥有更多功能
    • 更加简洁易用，Stack 主题使用 Sass，无 JQuery 的轻量开发
    • 相比而言，Stack 使用 Sass 极大的拓宽了我们的定制化范围
    • Stack 主题的审美相较于 Fluid 更胜一筹

反转

当然 Hexo 并不是一无是处，Hexo 对于 Pandoc 的支持远远强于 Hugo，允许完全自由的选择各种不同的 Markdown 渲染器。 而 Hugo 对不同渲染器的支持大相径庭，所有渲染器参数在代码内写死，并且对于诸如 Markup Hook 这样的功能大多数只支持 Goldmark （属于是 Hugo 唯一指定推荐 Markdown 渲染器了），而 Goldmark 对于 \(\LaTeX\) 的支持可以说是一塌糊涂。

在接下来的 Hexo 迁移 Hugo 的过程 中会着重探讨这些细节。

comments powered by Disqus