从Hexo迁移到Hugo-送漂亮的Hugo Theme主题

自从Hugo出来后,做为Go语言(golang)的重度用户的重度用户,一直想把本身的博客迁移到Hugo,可是一直没有行动,主要缘由在于,个人博客使用的一款主题maupassant很是简洁、响应速度快,可是在Hugo上并无相似一的主题,再加上从Hexo迁移到Hugo还有好多要修改的,因此一直迟迟没有行动。html

Hugo的maupassant主题

前段时间在Github上闲逛,居然发现了有人基于Hugo制做了maupassant主题,就clone下来看了一下,发现的确实现了maupassant主题的大部分功能,能够用,可是也存在不少问题。java

好比:python

  1. 不支持最近文章,我如今的Hexo的maupassant主题是支持的。
  2. 分类不支持文章数量的显示。
  3. 不支持标签云
  4. RSS支持,可是不能自动被发现。
  5. 有菜单,可是不是Hugo的菜单功能,灵活性不足。
  6. 不支持友情连接。
  7. 没有文档归档功能。
  8. GA统计分析不支持。
  9. 没有代码高亮。

其余小细节还有不少,这里就不一一列举了,总之,若是按这个模板进行迁移,那么个人博客网站原来的不少功能都没有了,这是我不能接受的。android

完善Hugo的maupassant主题

既然不少功能都不支持,并且我又想迁移到Hugo(能够利用go语言的知识,NodeJS不太熟),因此就自定动手参照着我原来博客的功能模板进行完善。原来的maupassant主题做者已经7个多月没有维护了。git

由于太忙,断断续续改了很久(一个多月吧),进行了扩展,增长了不少功能,而且用本身的博客作了实验,基本上已经知足我所需的大部分功能,具体效果能够参加 http://www.flysnow.org/github

飞雪无情版本的Hugo maupassant 主题开源。

完善了maupassant主题后,我决定进行开源,主要缘由有如下几点:golang

  1. 原maupassant主题有不少缺陷和功能缺失
  2. 原做者最近7个多月没有更新,并且没有详细的使用文档。
  3. 相信还有不少和我同样的人,想用Hugo的这款maupassant主题。
  4. 和更多的朋友一块儿完善该主题。

基于此,因此我fork了原来的maupassant主题,把我修改的提交了上去,造成了新的flysnow hugo maupassant theme。web

新的Hugo maupassant 主题主要有如下特性支持json

  • 最近发表的文章支持,显示最近的10篇
  • 分类支持,而且能够显示分类内的文章数量
  • 标签云支持
  • 一键回到页面顶部
  • RSS支持,而且能够自动发现RSS
  • 自定义菜单支持,不限个数,自定义排序
  • 自定义友情连接支持
  • 支持文章按年份日期进行归档
  • 支持GA分析统计
  • Sitemap站点地图
  • 支持关键字SEO优化
  • 代码高亮
  • Google站内搜索

固然还有不少特性不支持,好比百度分析、文章阅读数统计,评论等,后面会继续完善。小程序

什么是Hugo

引用一下Hugo官网的描述

The world’s fastest framework for building websites.

Hugo是一个很是受欢迎的、开源的静态网站生成工具,和Hexo相似。 它速度快,扩展性强。

更多的关于Hugo的介绍,请参考Hugo的官网 https://gohugo.io/

Hugo的安装和使用。

Hugo比Hexo速度更快,并且不用依赖一大堆东西,一个二进制文件就能够搞定。

Github下载

咱们能够直接从Github Release页面下载对应的二进制文件,而后把它放在你的PATH目录里便可使用。这个支持任何平台,根据本身的平台选择相应的二进制包便可。

Mac平台下

Mac下Hugo提供了homebrew安装的方式,很是简便。

brew install hugo

Debian and Ubuntu平台下

sudo apt-get install hugo

Windows平台下

Windows下Hugo提供了Chocolatey方式的安装,经过以下命令便可。

choco install hugo -confirm

验证安装

安转完成后,咱们打开终端,输入以下命令进行验证是否安装成功

hugo version

若是没问题的话,会输出Hugo的版本号等一些信息。

建立一个站点

hugo new site blog

添加一个主题

cd blog;\
git init;\
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\

# Edit your config.toml configuration file
# and add the Ananke theme.
echo 'theme = "ananke"' >> config.toml

添加一篇文章

hugo new posts/my-first-post.md

运行查看效果

hugo server -D

而后咱们就能够打开浏览器,输入http://localhost:1313查看咱们新建立的站点了。

本文为原创文章,转载注明出处,欢迎扫码关注公众号 flysnow_org或者网站 http://www.flysnow.org/,第一时间看后续精彩文章。以为好的话,顺手分享到朋友圈吧,感谢支持。

使用新的Hugo maupassant主题

最新版本的Hugo maupassant主题我已经在Github上开源,你们能够clone使用。使用很简单,只须要如下两步便可。

cd <YOUR Bolg Root Dir>
git clone https://github.com/rujews/maupassant-hugo themes/maupassant

而后在Hugo的配置文件里config.toml(yaml,json)中进行以下配置,便可使用。

theme = "maupassant"

记得把你的MD文章放在content/post目录下。

Hugo maupassant 主题配置

Hugo maupassant 主题配置也不难,是否熟悉Hugo均可以快速配置,并生成本身的网站。
我博客的配置以下,你们能够参考。

config.toml

baseURL = "http://www.flysnow.org"
languageCode = "zh-CN"
title = "飞雪无情的博客"
theme = "maupassant"

[author]
  name = "飞雪无情"

[params]
  author = "飞雪无情"
  subtitle = "专一于Android、Java、Go语言(golang)、移动互联网、项目管理、软件架构"
  keywords = "golang,go语言,go语言笔记,飞雪无情,java,android,博客,项目管理,python,软件架构,公众号,小程序"
  description = "专一于IT互联网,包括但不限于Go语言(golang)、Java、Android、Python、项目管理、抖音分析、软件架构等"

Hugo maupassant 自定义菜单

原做者的菜单是基于Content Type实现的,扩展性不好。Hugo自己有菜单的支持,扩展性更好,因此我改成基于Hugo原生菜单的方式实现,能够无限级扩展、支持菜单排序。

config.toml

[menu]
  [[menu.main]]
    identifier = "books"
    name = "新书"
    url = "/books/"
    weight = 2
  [[menu.main]]
    identifier = "archives"
    name = "归档"
    url = "/archives/"
    weight = 3
  [[menu.main]]
    identifier = "about"
    name = "关于"
    url = "/about/"
    weight = 4

identifier标志符必须是惟一的,不能重复;weight用于排序,值越小越靠前。

Hugo maupassant 友情连接

友情连接的实现也是遵循Hugo原生的方式,参考配置以下:

config.toml

[[params.links]]
  title = "Android Gradle权威指南"
  name = "Android Gradle权威指南"
  url = "http://yuedu.baidu.com/ebook/14a722970740be1e640e9a3e"
[[params.links]]
  title = "经常使用开发工具CDN镜像"
  name = "经常使用开发工具CDN镜像"
  url = "http://mirrors.flysnow.org/"

params.links是一个数组,因此咱们能够自定义不少友情连接。name表示显示的连接文本,title表示鼠标悬停在友情连接时,显示的文本。

Hugo maupassant 文章归档支持

Hugo默认是不支持生成归档文件的,须要本身实现。新主题已经实现了文章归档,只须要在新建content/archives/index.md文件,文件内容为:

content/archives/index.md

title: "归档"
description: Android资深工程师 ,Go和Java打杂师,《Android Gradle权威指南》做者,Android官方技术文档译者
type: archives

titledescription均可以换成你本身的,可是type必须是archives

content/archives/index.md表示在content/archives/目录下的index.md文件

这样Hugo就会自动生成/archives/index.html归档页面,经过相似http://www.flysnow.org/archives/的URL进行访问,目前的归档是按照年份进行归档,后面能够扩展更多的归档方式。

其余静态文件

有些不须要咱们转化的静态文件,好比robots.txt、咱们上传的附件等,这些不须要Hugo进行处理,能够直接放在static目录下,Hugo会原封不动的拷贝。

从Hexo到Hugo踩的坑

从Hexo到Hugo踩了一些坑,这里主要介绍一些主要的。

第一个坑就是URL连接。

对于从Hexo迁移到Hugo来讲,比较重要的就是保持URL连接的一致性,这样已经被搜索索引,其余文章引用的文章才能够继续被打开,不然就会出现404错误。

我之前使用Hexo的博客,文章连接是使用的permalink设置优化的URL,好比:

permalink: :year/:month/:day/:title.html

这样咱们博客文章所有都是这样年月日+标题+html后缀的格式,好比Go语言参数传递是传值仍是传引用这篇文章,http://www.flysnow.org/2018/02/24/golang-function-parameters-passed-by-value.html
只有文章是html后缀的格式,分类、标签等聚合页是目录Path的格式,如:http://www.flysnow.org/categories/Golang/

在新的Hugo系统中,我也想这么作,可是Hugo的permalink是不能配置html后缀的,便可你配置了,也只会生成以下的URL/year/month/day/title.html/仍是一个目录,没法以.html结尾。

我查了下Hugo的文档,发现有个配置能够解决,这就是在config.toml里设置uglyurls = true
这样的确解决了以.html结尾的问题,可是又引出来另一个问题,就是分类、标签等也是以.html结尾了,变成了http://www.flysnow.org/categories/Golang.html,查了不少文档,鱼和熊掌不可兼得(有知道的朋友必定要告诉我,多谢)。

最终我采用了指定文章URL的方式,不用uglyurls = true配置了。在每篇文章里的Front Matter加上

url: /2018/02/24/golang-function-parameters-passed-by-value.html

强制指定文章的URL,这样就解决了从Hexo到Hugo迁移带来的问题。

第二个坑是分类名称

咱们在写文章的时候,会给文章进行分类,好比Golang,可是默认状况下,Hugo会把这个Golang转为小写,这就给咱们一直用原始字符的形成困扰,为了解决这个问题,Hugo提供了preserveTaxonomyNames配置,把它设置为true就能够了保持原来分类的名字了。

config.toml

## 保持分类的原始名字(false会作转小写处理)
preserveTaxonomyNames = true

第三个坑就是URL路径

Hugo默认状况下,URL字符串里的字母都会强制转为小写,这对于分类名、标签名是大写的来讲,博客迁移后(好比从Hexo到Hugo),原来的连接就失效了,为了解决这个问题,Hugo提供了disablePathToLower配置。

config.toml

## 是否禁止URL Path转小写
disablePathToLower = true

贡献

最后欢迎你们贡献和支持,多star,多PR,多提ISSUE,等着大家。https://github.com/rujews/maupassant-hugo

本文为原创文章,转载注明出处,欢迎扫码关注公众号 flysnow_org或者网站 http://www.flysnow.org/,第一时间看后续精彩文章。「防贱人删除版权」以为好的话,顺手分享到朋友圈吧,感谢支持「uuuuuuuu」。

扫码关注

相关文章
相关标签/搜索