Blog从Jekyll迁移至Hugo

一、背景

很久没有更新博客了，年后打算重新收拾一下。之前使用的是Jekyll，但是依赖管理什么的实在是太麻烦了，因此打算更换一个框架。刚好了解到Hugo是用Golang写的，所以就准备将博客从Jekyll迁移到Hugo。现在迁移基本完成了，过程还是踩了蛮多坑的，所以顺便写一篇记录一下，防止以后要改改改的时候又重新踩坑。

二、方案

这次使用的hugo版本是：

Hugo Static Site Generator v0.54.0/extended darwin/amd64 BuildDate: unknown

安装姿势随便搜一下就有了。

2.1 直接使用hugo cli工具

➜  hugo import --help
Import your site from other web site generators like Jekyll.

Import requires a subcommand, e.g. `hugo import jekyll jekyll_root_path target_path`.

Usage:
  hugo import [command]

Available Commands:
  jekyll      hugo import from Jekyll

Flags:
  -h, --help   help for import

Global Flags:
      --config string      config file (default is path/config.yaml|json|toml)
      --configDir string   config dir (default "config")
      --debug              debug output
      --log                enable Logging
      --logFile string     log File path (if set, logging enabled automatically)
      --quiet              build in quiet mode
  -v, --verbose            verbose output
      --verboseLog         verbose logging

Use "hugo import [command] --help" for more information about a command.

试了一下没有成功，没有深究，因为之前的样式也看的有点倦了，想重新换套样式，所以就保留了post部分，其他的则用Hugo重新构建了一套。

2.2 使用Hugo生成静态网站

Hugo的官方文档已经写的非常的详细，如果想要自己DIY一些组件和样式的话，建议还是撸一遍文档，内容没有很多，我这种英语渣花半个下午可以简单浏览一遍，后面再边做边查，效果不错。

Get Start Hugo ➜

三、过程

3.1 选择一套主题

自己从零开始做一套主题有点不靠谱，因此第一件事就是选择一个主题 Themes ➜。
在下选择的是 Creative，是个公司主页模板，只有单页，但是设计风格我很喜欢，而且基本风格有了，自己加上其他页也比较简单。这是我fork后调整成个人主页的主题：hugo-creative-theme

3.2 编写一些自定义界面，修改一些样式

改一改主页之后，然后就是增加自己需要的一些页面。主要包括：

Post 页面，单篇文章页面。使用Single Page Template实现。
Post 列表页面，文章列表页面。使用List Page Template实现。
Category 及 Tag页面，文章分类页面。使用 Taxonomy Templates实现。

3.3 增加category分类

这边使用的是Taxonomy Template 来实现的文章自动分类。只要在文章的Front Matter中添加categories和tags参数，就可以实现自动分类。

但是过程中遇到一个大坑，就是我希望在taxonomy中增加自定义的一些meta信息，官方文档中的建议是： Add custom metadata to a Taxonomy Term，这种方式有很大的问题。根据官方文档中的例子，这样会导致 /actors/bruce-willis这个页面有两种解析方案，一种是taxonomy list template，另一种是single page template，问题出在于hugo会两种方式各解析一次，但是顺序是随机的，并且只有第一次解析生效。因此当先使用 single page template去解析的时候，就会获取不到 .Pages 等参数，这个时候页面的展示就会不符合预期。

解决的方案是使用Data Template来增加自定义meta，然后使用 $.Site.Data来获取参数。

3.4 增加自定义的markdown渲染

这个比较简单，网上找一个markdown的渲染css文件，将其保存到/static目录下，然后用<link> 标签引入该css文件，然后在post中 {{ .Content }}的父元素中增加对应的class。我这边使用的是github的渲染风格：https://github.com/sindresorhus/github-markdown-css

3.5 增加catelog侧边栏

TODO

3.6 增加数学公式的支持

参考
[solved] MathJax stopped working
Setting MathJax with Hugo

因为hugo本身是不支持markdown数学公式的渲染的，官方建议是通过JavaScript的MathJax来进行支持。建议直接参考官方文档 MathJax with Hugo。不过直接使用官方文档中的方式似乎并不能生效，而是要将所有的scripts放在同一个 <script async></script> 下。将以下内容保存到 layouts/partials/add-mathjax-to-page.html目录，再通过{{ partial "add-mathjax-to-page.html" . }} 在需要的地方引入。

{{ "<!-- Add mathjax support -->" | safeHTML }}
<script type="text/javascript"
        async
        src="https://cdn.bootcss.com/mathjax/2.7.3/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [['$','$'], ['\\(','\\)']],
        displayMath: [['$$','$$'], ['\[\[','\]\]']],
        processEscapes: true,
        processEnvironments: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
        TeX: { equationNumbers: { autoNumber: "AMS" },
             extensions: ["AMSmath.js", "AMSsymbols.js"] }
      }
    });

    MathJax.Hub.Queue(function() {
        // Fix <code> tags after MathJax finishes running. This is a
        // hack to overcome a shortcoming of Markdown. Discussion at
        // https://github.com/mojombo/jekyll/issues/199
        var all = MathJax.Hub.getAllJax(), i;
        for(i = 0; i < all.length; i += 1) {
            all[i].SourceElement().parentNode.className += ' has-jax';
        }
    });
</script>
<style>
    code.has-jax {
        font: inherit;
        font-size: 100%;
        background: inherit;
        border: inherit;
        color: #24292e;
    }
</style>

本文地址