自从了解了Github Pages这种静态博客后,开始喜欢上这种技术人员才能鼓捣明白的协作方式。自己的博客系统也从最初的Octopress,切换到Hexo,直到最近看到Hugo这种号称全球最快的静态博客系统,被适合技术人员的风格样式所吸引。于是在经历了三天的折腾后,顺利的将Hexo迁移至Hugo中。同时,利用github workflows在提交后,将博客自动发布到腾讯的云开发中。其实这三种不同的博客系统也恰好了代表了每一个时代流行的语言,Octopress(Ruby),Hexo(Node.js),Hugo(Go)。时代在发展社会在进步,唯一不变的是开发人员追去完美的心,记录下这一过程,也作为切换至Hugo后的第一篇博文。
https://sunqi.site/2021/11/29/%E5%B0%86%E5%8D%9A%E5%AE%A2%E4%BB%8Ehexo%E8%BF%81%E7%A7%BB%E8%87%B3hugo/#%E5%AE%89%E8%A3%85hugo 安装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方式进行管理,所以迁移上也比较方便,但是由于每个人遇到的问题并不相同,所以这里分享一下我自己遇到的实际问题。
https://sunqi.site/2021/11/29/%E5%B0%86%E5%8D%9A%E5%AE%A2%E4%BB%8Ehexo%E8%BF%81%E7%A7%BB%E8%87%B3hugo/#%E5%A6%82%E4%BD%95%E8%BF%81%E7%A7%BB 如何迁移?
这是我在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)。