之前的博客生成是用的hexo，但是慢慢的随着博客增多速度 越来越慢,一些功能无法实现，比如图片预览的fancybox。
偶然看到了文章介绍hugo，一个用golang编写的静态网站生成器 ，主题很多,号称世界上最快的框架，
实际用起来也比hexo快的多，几十个页面生成速度毫秒级别，网站的访问速度从未有的顺畅，速度起码翻倍。

主题地址

hugo1

一.Hugo 安装与配置

Hugo 安装比较简单，但是配置过程中遇到了几个小问题😂

1.首先安装 Hugo，在不同系统上安装都很简单，在 Mac 上，使用 Homebrew 安装 Hugo： brew install hugo 等待安装即可

2.建立博客站点 安装以后，首先我们需要建立一个博客目录，下面存放的是博客的所有配置以及博文等资料，例如要建立一个名为 Blog 的站点，使用下面的命令：hugo new site Blog

1
2
3
4
5
6

Congratulations! Your new Hugo site is created in /Users/jdhao/Blog.
Just a few more steps and you're ready to go:
	1. Download a theme into the same-named folder. Choose a theme from https://themes.gohugo.io/, or create your own with the “hugo new theme ” command.
	2. Perhaps you want to add some content. You can add single files with “hugo new /.”.
	3. Start the built-in live server via “hugo server”.
Visit https://gohugo.io/ for quickstart guide and full documentation.

建立站点以后，博客根目录下默认有这些文件和子目录： archetypes/ config.toml content/ data/ layouts/ static/ themes/

config.toml 就是博客的配置文件，archetypes 目录下有一个 default.md，存放的是建立新博文时候默认使用的模板，可以根据自己需求修改。content 目录用来存放博文，static 可以存放一些自己的文件，themes 文件夹用于存放不同的主题。

在博客根目录下，使用以下命令安装 even 主题：

1
2

git init
git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even

3.命令创建测试博客 hugo new post/test.md

这个命令会在 content 目录下建立 post 目录，并在 post 下生成 test.md 文件，博文书写就在这个文件里使用 Markdown 语法完成。

4.Hugo server 本地启动博客查看效果。

这时候报了错误。根据提示一，需要在安装完主题之后，要把主题的配置文件复制到 Blog根目录下，具体参考 https://github.com/olOwOlo/hugo-theme-even/blob/master/README-zh.md#installation

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

➜  Blog git:(master) ✗ hugo server -D
Building sites … ERROR 2020/01/04 15:08:40

There are two possible situations that led to this error:
  1. You haven't copied the config.toml yet. See https://github.com/olOwOlo/hugo-theme-even#installation
  2. You have an incompatible update. See https://github.com/olOwOlo/hugo-theme-even/blob/master/CHANGELOG.md#400-2018-11-06

有两种可能的情况会导致这个错误发生:
  1. 你还没有复制 config.toml 参考 https://github.com/olOwOlo/hugo-theme-even/blob/master/README-zh.md#installation
  2. 你进行了一次不兼容的更新 参考 https://github.com/olOwOlo/hugo-theme-even/blob/master/CHANGELOG.md#400-2018-11-06

重点: 在主题的 exampleSite 目录下有一个 config.toml 文件，将这个 config.toml 文件复制到你的站点目录下，根据自己的需求更改即可。还需要设置文章的 permalinks 设置Hexo 中，文章的链接都是 YYYY/MM/DD/post_name/ 的格式，在 Hugo 中，可以通过设置 permalinks 参数来实现平滑过渡，在 config.toml 中加入以下设置：

1
2

[permalinks]
  post = "/:year/:month/:day/:filename/"

二.迁移hexo中之前的博客

只需要将之前hexo博客中下/source/_posts/目录下的.md文件拷贝到Blog/content/post/下即可。

这里需要注意两点

1.hexo和hugo的front matter格式不同，tag,date,categories,需要手动更改之前的文件。使用工具全局替换。

时间格式 Hexo 中时间格式与 Hugo 格式不太相同，Hugo 对时间格式的要求比较严格，Hexo 中YYYY-MM-DD HH:MM格式的时间在 Hugo 中无法被正确识别。Hugo 中使用的时间格式如下： YYYY-MM-DD HH:MM:SS +0800 最后的 +0800 代表中国的时区是GMT+8。 另外，Hexo 中 front matter 代表博客更新时间的 updated 选项在 Hugo 中是 lastmod。 具体时间格式的替换，我采用 Sublime Text 配合正则表达式匹配来替换。

1
2
3
4
5
6
7
8
9

Front-matter 的区别
hexo的时间格式
date: 2020-01-04 15:00:29
tag: Mac
categories: Mac, Linux
hugo中的时间格式
date: 2020-01-04T15:00:29+08:00
tag: [Mac]。     #[]前面要有空格
categories: [Mac, Linux]    #[]前面要有空格

2.博文的 front matter 里draft 选项默认为 true，需要改为 false 才能发表博文，建议直接更改上面说的archetypes 目录下的 default 文件，把 draft: true 改为 draft: false，这样生成的博文就是默认可以发表的

3.个人文件的位置

如果博客中有图片，建议把文件放在博客根目录下的 static 目录，可以在该目录下建立名为 files 的目录，然后把文件放在 files 目录下。假如 files 目录下有一个文件 test.JPG，参考这里，在博客中引用它的正确方式是:

点击这里下载 test.JPG

然后命令运行,Hugo server 查看效果。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

➜  Blog git:(master) ✗ hugo server

                   | EN
+------------------+----+
  Pages            | 37
  Paginator pages  |  4
  Non-page files   |  0
  Static files     | 40
  Processed images |  0
  Aliases          |  9
  Sitemaps         |  1
  Cleaned          |  0

Built in 38 ms
Watching for changes in /Users/seven/Blog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/seven/Blog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

37个页面，生成速度，才38ms。

三.部署到github

之前已经部署过对应的xxxx.github.io的github仓库，运行以下命令，将之前的仓库清空。

1
2
3
4

mkdir public
cd public
git init
git remote add upstream https://github.com/jdhao/jdhao.github.io.git

执行 hugo -t even，hugo 会生成 blog 内容，放到 public 目录。然后，我们把 public 下面的内容 push 到 github 即可。

1
2
3
4

git add .
git commit -m  "hugo commit"
git push -f upstream master # 第一次 push 必须使用 -f，因为此时远程仓库非空，和本地有冲突

这样就部署成功了，一般等待几分钟，访问自己的博客，就能看到更新以后的内容。

然后参考官方文档,写bash脚本方便每次统一部署。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..

赋予 deploy.sh 文件执行权限：

chmod u+x deploy.sh 以后执行 ./deploy.sh 就可以部署博客到 github 了。

注：第一次 push 需要使用 -f，以后 push 就不需要该参数了，force push 以后，github 仓库的 commit 数量会清零，原有的 commit 信息会丢失

四.总结与问题

用hugo最直观的感受是，毫秒级的页面生成。主题多，集成度高（集成了阅读时间，字数统计，图片预览）,文件的统一管理，之前一直在找图片点击放大的插件，之前的主题不支持，这次好，给集成了。配置也方便，一个config.toml配置搞定所有。

报错生成页面错误： 1，原因是front matter不符合规范 render of "page" failed

1
2
3
4
5
6
7

➜  Blog git:(master) ✗ hugo server
ERROR 2020/01/04 15:40:34 render of "page" failed: execute of template failed: template: post/single.html:14:5: executing "post/single.html" at <partial "head.html" .>: error calling partial: "/Users/seven/Blog/themes/even/layouts/partials/head.html:22:82": execute of template failed: template: _internal/schema.html:22:82: executing "_internal/schema.html" at <.Params.tags>: range can't iterate over CDH
ERROR 2020/01/04 15:40:34 render of "page" failed: execute of template failed: template: post/single.html:14:5: executing "post/single.html" at <partial "head.html" .>: error calling partial: "/Users/seven/Blog/themes/even/layouts/partials/head.html:22:82": execute of template failed: template: _internal/schema.html:22:82: executing "_internal/schema.html" at <.Params.tags>: range can't iterate over flume
ERROR 2020/01/04 15:40:34 render of "page" failed: execute of template failed: template: post/single.html:14:5: executing "post/single.html" at <partial "head.html" .>: error calling partial: "/Users/seven/Blog/themes/even/layouts/partials/head.html:22:82": execute of template failed: template: _internal/schema.html:22:82: executing "_internal/schema.html" at <.Params.tags>: range can't iterate over 123456
Built in 26 ms
Error: Error building site: failed to render pages: render of "page" failed: execute of template failed: template: post/single.html:14:5: executing "post/single.html" at <partial "head.html" .>: error calling partial: "/Users/seven/Blog/themes/even/layouts/partials/head.html:22:82": execute of template failed: template: _internal/schema.html:22:82: executing "_internal/schema.html" at <.Params.tags>: range can't iterate over CDH,sentry

2.Front matter tag:[],中括号前面没有空格导致错误

failed to unmarshal YAML: yaml: line 5: could not find expected ':'

参考资料