自从了解了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）。
