hexo博客迁移到hugo

前段时间了解了一下 hugo,发现了其一个非常突出的优点,那就是快,据说5000篇文章渲染只需要6s的时间。阅读官方文档进一步了解了一下,使用上与hexo模式类似,加上也有非常多的主题,再考虑到后期文章会不断增多,决定放弃hexo使用hugo,毕竟现在90+篇文章,hexo渲染一遍竟然需要8s+,叔能忍,哥不能忍!

本文不是教程,只是记录过程!是的,这就是一水文,xx的流水账!

Hugo

Hugo is a fast and modern static site generator written in Go, and designed to make website creation fun again.

@Hugo What is Hugo

Hugo是Go语言实现的,这可能就是其做到神速的原因。

安装

Hugo不依赖任何运行库和程序,是一个完整独立的运行程序。在macOS下安装很简单,使用homebrew就可以轻松安装:

brew install hugo

安装完成可以查看一下版本号:

hugo version

创建站点

下面可以创建一个新的博客站点,我继续叫smslit:

hugo new site smslit
cd smslit
ls -l

此时会看到出现新的目录 smslit ,进入此目录会看到如下文件结构:

20180707153097244537665.png

上面文件及目录与hexo博客的对应关系是:

hugo目录 hexo目录 作用
content source 存储博文的md文件,hexo中的_post,_draft,各自定义的页面目录其实对应到hugo中的话,都是在content下的
config.toml _config.yaml 用于配置站点中各项参数
themes themes 存放主题
static source hugo中的static目录中存放一些常规静态文件,可以是博客中引用的图片、文件也可以是自添加的任意文件,最终渲染都会放到站点的根目录
public public 存放渲染后的站点静态文件
layout 存放自定义的样式布局文件,优先级高于主题中的同名文件,方便修改主题样式

主题

我选择了 Even主题,安装很简单:

git clone https://github.com/olOwOlo/hugo-theme-even themes/even
cp themes/even/exampleSite/config.toml .

修改配置文件,这里主要是根据自己需要进行定制和修改:

  • 修改菜单栏项与原hexo博客中的一致;

  • 修改相应的社交网络链接;

  • 使能gitment

执行命令,渲染站点并在本地部署:

hugo server

打开链接 127.0.0.1:1313,看到了静态博客的样子,点点各项链接,不正确的相应调整。

新建文章

使用主题一定要看一下主题中的样例站点,文章内容管理方式要与样例一致,所以查看 themes/even/exampleSite/content中的目录,我是直接cp过来的:

cp -r themes/even/exampleSite/content/* content

删掉post中的文章,然后新建了与配置文件中菜单栏一致的目录,并添加相应的index.md文件:

➜  smslit tree content
content
├── about
│   └── index.md
├── drip
│   └── index.md
└── post

about/index.md(对应菜单项——关于) 和 drip/index.md(对应菜单项——札记) 内容更改为hexo博客中相应文件的内容,调整内容中的不兼容标签项。

使用命令新建一篇博文:

➜  smslit hugo new post/hello.md

此时,本地部署查看博客,发现菜单项关于札记正常显示内容,但是没有发现新加的文章。

打开文件,会发现头信息中有一项 draft 值为 true,说明新建的文件归为草稿,原来是hugo部署和生成静态站点文件的时候会根据md文件中的 draft 值来判断是否渲染,没有此项内容认为是 false ,也就是添加渲染,所以这里可以将 draft项的值改为 false 或者直接删掉,再次尝试部署,可以在 127.0.0.1:1313中看到新加的文章。

迁移博文

迁移博文主要面临两个问题:

  • md文件头信息(Front Matter)格式有区别;
  • hexo和hugo的部分标签语言不兼容,比如hexo的{% image %}

文章头信息

在hugo中文件的头信息有三种格式可选:yaml、toml和json。这个可以在 config.toml中配置,为了迁移方便,所以选择了hexo中博文使用的yaml格式。总结博文不兼容点如下:

  • 文件名,在hugo中不用包含日期;
  • 不包含layout项;
  • hugo中date项的格式是:2018-07-05T00:00:00+08:00
  • hugo中tagscategories的格式有两种,不兼容hexo中多标签时只使用,分隔的方式;

根据上述四项的不同,编写了python脚本批量处理文章:hexo2hugo.py

标签语言不兼容

这个问题,用python脚本批处理的话比较不值得了,比较使用特殊的hexo标签的地方并不是很多,所以,可以使用grep命令帮助寻找包含 {%的md文件,然后打开相应文件修改为hugo下对应格式就可以了。

其它问题

上面两个问题解决后,将文章放到 content/post下,本地部署查看,所有的文章均正常出现了,但是会发现一个问题是,文章列表中的预览内容并没有按照 <!--more--> 标记分界显示,后来发现原来是标记的格式不对,文章中的标记为 <!-- more -->more 两边多了两个空格,hugo只识别不带空格的 more 标记,为此编写了python脚本format_more_tag.py进行批处理,解决!

发布

我的博客是部署到coding的,国内访问比较快,与部署到github无异,不过比较好的是,coding中的pages服务可以强制使用https,😁!hugo没有像hexo一样专门的部署命令,所以我编写了一个部署脚本,在使用脚本前需要做以下工作:

  • 将静态文件的仓库clone到本地,比如到~/Downloads目录,仓库目录最好是设置成隐藏目录,目录名加个.即可;
  • 进入~/Downloads/.smslit中,删掉所有除了.git的文件,将hugo博客中public目录下所有文件cp到~/Downloads/.smslit下,提交一下修改,并推到coding中,等到coding的pages服务完成渲染,访问https://www.smslit.top ,已经成为本地hugo渲染的样子,说明已经打通通道;
  • 在目录/usr/local/bin下创建脚本文件 deploy,内容如下:
    #!/bin/bash
    # ~/smslit目录为hugo站点目录
    cd ~/smslit
    
    # ~/Downloads/.hogo目录为本地静态文件的git仓库
    cp -r ~/Downloads/.hugo/.git public
    
    echo 'Generating Web Pages...'
    hugo
    
    cd public
    git add .
    git commit -m 'update pages'
    
    echo 'Deploy the pages'
    git push
    
    rm -rf ~/Downloads/.hugo/
    mkdir ~/Downloads/.hugo
    mv ~/smslit/public/.git ~/Downloads/.hugo/
    echo 'Done, have a good time!'
    
  • 为脚本/usr/local/bin/deploy添加执行权限:chmod +x /usr/local/bin/deploy

完成上述工作,重新开启一个终端,执行命令就可以自动渲染并提交静态文件修改了:

deploy

可以看到,静态站点文件生成速度很快,原来hexo需要8s+,现在只需要300+ms:

                   | ZH-CN
+------------------+-------+
  Pages            |   254
  Paginator pages  |    13
  Non-page files   |     0
  Static files     |   264
  Processed images |     0
  Aliases          |    73
  Sitemaps         |     1
  Cleaned          |     0

Total in 376 ms

参考

Hugo Documentation


hugohexo

2511 字

2018-07-07 21:31 +0800