将博客从Hexo迁移至Hugo-阿里云开发者社区

开发者社区> xiaoquqi> 正文

将博客从Hexo迁移至Hugo

简介: 自从了解了Github Pages这种静态博客后,开始喜欢上这种技术人员才能鼓捣明白的协作方式。自己的博客系统也从最初的Octopress,切换到Hexo,直到最近看到Hugo这种号称全球最快的静态博客系统,被适合技术人员的风格样式所吸引。于是在经历了三天的折腾后,顺利的将Hexo迁移至Hugo中。
+关注继续查看

自从了解了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脚本进行了全局性替换。由于只是作为临时替换,所以在代码规范性上差了一点,但是能解决我的问题了。

目录结构问题

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

我发现我的文章中一级标题都没有显示,经过调查,发现之前存在一个误区,在一篇文档中,其实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中进行创建。

image.png

添加评论系统

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

image.png

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

image.png

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

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

配置好的效果如下:

image.png

总结

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

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

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10060 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2508 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9157 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13874 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7360 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4498 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22378 0
+关注
13
文章
1
问答
来源圈子
更多
阿里云最有价值专家,简称 MVP(Most Valuable Professional),是专注于帮助他人充分了解和使用阿里云技术的意见领袖阿里云 MVP 奖项为我们提供了这样一个机会,向杰出的意见领袖表示感谢,更希望通过 MVP 将开发者的声音反映到我们的技术路线图上。
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载