自从了解了Github Pages这种静态博客后，开始喜欢上这种技术人员才能鼓捣明白的协作方式。自己的博客系统也从最初的Octopress，切换到Hexo，直到最近看到Hugo这种号称全球最快的静态博客系统，被适合技术人员的风格样式所吸引。于是在经历了三天的折腾后，顺利的将Hexo迁移至Hugo中。同时，利用github workflows在提交后，将博客自动发布到腾讯的云开发中。其实这三种不同的博客系统也恰好了代表了每一个时代流行的语言，Octopress(Ruby)，Hexo(Node.js)，Hugo(Go)。时代在发展社会在进步，唯一不变的是开发人员追去完美的心，记录下这一过程，也作为切换至Hugo后的第一篇博文。

安装Hugo

因为Hugo是Go语言开发的，所以安装起来比较简单，不过在我的Mac上，我最终还是选择brew方式进行安装。由于之前运行的brew是x86版本的，为了安装Hugo也对brew重新进行了安装。brew配置好了之后，直接安装命令即可。

brew install hugo

后续的流程相对简单，根据Hugo官网的Quick Start按照步骤即可。

创建站点

hugo new site quickstart

添加一个主题

经过对比，我选择了相对低调、灵活的LoveIt作为博客主题。这个主题非常灵活，基本把要预留的内容都留出来了，所以不需要将themes中的文件存放于博客版本库中，只需要以submodule形式存在即可。

cd quickstart
git init
git submodule add https://github.com/dillonzq/LoveIt themes/LoveIt

配置Hugo

Hugo每个主题都会有一个exampleSite的目录，比如LoveIt，就是在themes/LoveIt/exampleSite。这里面存放了主题配置的基本样例，我们至少需要将config.toml拷贝至你的Blog根目录，之后就可以进行配置了。其他资源文件可以视实际需要拷贝至相应的目录中。

在配置文件中，有比较详细的中文注释，根据实际内容进行调整就可以了，我删除掉了英语和法语部分的配置，其他配置按照我的实际需要进行了配置。由于配置内容过多，这里就不一一列举了，这里面只把一些特殊的选项和大家分享一下。

如何配置百度统计？

在params.footer中保留了一个custom的参数，只需要将百度统计写入其中就可以，例如：

[params.footer]
......
    custom = '<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?08e49a207e75eef254a959d4b9dede90"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3492265208608388" crossorigin="anonymous"></script>'
......

如何配置ICP及备案信息？

仍然在params.footer中保留了一个icp参数，只需要将备案信息写入其中即可，例如：

[params.footer]
......
    icp = '<br /><a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502042680" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="/images/beian.png" style="float:left;"/>京公网安备 11010502042680号</a> | <a target="_blank" href="https://beian.miit.gov.cn/">京ICP备2020039231号-1</a>'
......

从Hexo迁移至Hugo

因为Hexo本质上也是使用Markdown方式进行管理，所以迁移上也比较方便，但是由于每个人遇到的问题并不相同，所以这里分享一下我自己遇到的实际问题。

如何迁移？

这是我在Hexo中的文档目录

|-- source
|   |-- _drafts -> 草稿目录，在Hugo中是通过模板中的draft参数控制，可以先拷贝至Hugo /content/posts目录中
|   |-- _posts -> 文章目录，拷贝至/content/posts目录中
|   |-- about -> 关于目录，拷贝至/content/about目录中
|   |-- favicon.ico -> 浏览器favorite icon图标
|   `-- images -> 静态文件，拷贝至/static/images目录中

文章结构

之前在编写Hexo时候，使用了Hexo Admin插件，不知道为什么生成的文章是这个样子的：

title: "将博客从Hexo迁移至Hexo"
date: 2021-11-29T20:23:54+08:00
---

由于缺少了顶部的—，导致Hugo无法正确识别标题和创建时间。于是用Python写了一个简单的脚本进行替换。

部分图片无法显示

在我早期写的博客中，我使用了{% img …}来引用图片，但是这种方式在Hugo中是无法正确显示的。于是仍然使用Python脚本进行了全局性替换。由于只是作为临时替换，所以在代码规范性上差了一点，但是能解决我的问题了。

目录结构问题

在我完成了以上两步后，发现我的部分文章中的右侧目录显示不够完整，正常的显示逻辑应该是这样的效果。

我发现我的文章中一级标题都没有显示，经过调查，发现之前存在一个误区，在一篇文档中，其实title部分才是一级标题，正常文章中的标题要从二级写起，这样目录才能正常生成出来。这意味着，我需要将原有文档中不规范的标题都加一个#才可以，所以仍然采用Python批量替换方式完成。

至此，所有的文章已经能够在Hugo中按照顺序显示了。

保持链接格式

在原有Hexo中，文章基本是按照时间格式进行命名，例如/year/month/day/title方式，但是在Hugo默认的方式中则是采用了直接命名的方式，这就需要我们在配置中进行修改，以达到上线后和原有链接保持一致的效果。在config.toml中修改如下内容：

[permalinks]
  # posts = ":year/:month/:filename"
  posts = "/:year/:month/:day/:slug/"

利用Github Action自动上线

配置到了这里，基本具备了上线条件，之前我在Github上使用了Travis CI方式进行编译上线，但是随着Github Workflow越来越成熟，所以这次决定采用Github方式进行部署。由于Github Pages在国内访问越来越慢，大概在前年将博客迁移至腾讯的云开发中。腾讯默认提供的云开发Action不太好用，于是我还是用执行命令方式完成，以下是我的github workflow yaml，供大家参考。

需要替换的secrets变量，需要在Github中进行创建。

添加评论系统

LoveIt主题中支持多种评论系统，最终我使用的是valine，不过需要注册一个LeanCloud账号，建立一个开发板的应用程序后，再更新配置文件才行。

建立好应用后，在应用详情中找到”应用凭证“，获取相关鉴权信息。

最后在Hugo config.toml中进行更新

[params.page.comment.valine]
  enable = true
  appId = "your_appId"
  appKey = "your_appKey"
  ......
  serverURLs = "https://your_leancloud_url"

配置好的效果如下：

总结

其实Hugo LoveIt中还提供了很多功能，暂未深入研究，也欢迎大家共同交流。

到这里，我的全新Hugo样式的Blog已经发布上线，这是整体的效果，也欢迎大家经常访问我的博客——老孙正经胡说（https://sunqi.site）。