使用Hugo搭建自己的博客

生命在于折腾，生命不息，折腾不止。

最近又开始了折腾博客，以前的文章都写在上，现在准备使用Hugo来搭建一个静态博客。

对比了一下Jekyll、Hexo、Hugo，最终还是选择了Hugo。

Hugo使用go编写，编译后只有一个二进制文件，不用安装任何依赖，这一点让人很舒服。
Jekyll使用ruby编写，Hexo则是使用nodejs编写，这两种都属于解释型语言，运行效率上比起go来还是要差一点的，Hexo在文章很多的时候编译生成静态网站是很费时的，但是Hugo就没有这个问题，编译速度很快。最主要的一点还是自己也是go的爱好者，这一年陆陆续续用go写了几个项目，包括公司的部分服务也开始用go来写，虽然跟Hugo没啥关系，但就是莫名的想支持一下，呵呵。

至于如何安装Hugo，如何搭建网站，网络上也有不少的教程，这里也不再叙述了，自己写出来的未必有官方文档那样详细，所以建议看官方文档。

https://gohugo.io/documentation/

下面主要记录一些自己在搭建博客的过程中遇到的一些问题，以及如何解决，会不定期的更新。

安装

安装很简单，直接从官方文档上抄了一段：

# macos
brew install hugo

# ubuntu 
sudo apt install hugo

# windows
choco install hugo -confirm
# or
scoop install hugo

如果windows上不知道choco和scoop是啥的话，可以直接下载编译好的压缩包（各个平台都有），解压即可。

https://github.com/gohugoio/hugo/releases

创建网站

创建网站可参考下面的文档：

https://www.gohugo.org/

按照文档一步一步来就可以入门了，但是涉及到一些配置的话，还得深入查看文档才行。

创建网站后，需要下载主题，https://www.gohugo.org/theme/

如果本地网站目录中没有themes目录的话，自己创建一个，然后下载主题到该目录内。

我个人使用的主题是hugo-theme-cactus-plus

$ cd themes
$ git clone https://github.com/nodejh/hugo-theme-cactus-plus.git

一般来说，下载的主题都会自带一个配置样例的，具体的配置参考样例即可。或者可以参考下面这个配置样例：
https://github.com/gohugoio/hugo/blob/master/docs/config.toml

本地运行：

hugo server --theme=hugo-theme-cactus-plus --buildDrafts

如果在config.toml中指定了主题的话，这里就可以不用指定--theme参数了，--buildDrafts参数指定了的话，就会连草稿一同展示出来。

编译：
进入站点根目录，然后执行：

hugo

没错，只要输入命令回车即可，都不用带什么参数就可以生成网站的静态文件，并存放在public文件夹中，非常简单。

使用Github Pages发布网站

如果只在本地机器上玩那就没意思了，所以还是得把网站发布到网上去，github就提供了这样一个功能
https://www.gohugo.org/doc/tutorials/github-pages-blog/

拿bob来举例吧

github帐号名：bob，本地利用Hugo生成的网站：blogs

在github上创建名为bob.github.io的repository，创建完成后，添加一个文件index.html，内容就找一个hello world的网页，把源码贴进去就行，保存后，就可以访问https://bob.github.io，展示的内容就是你的hello world
clone该repository到blogs的public文件夹中，此时最好确保public是空文件夹，否则push的时候会出现问题
clone完成以后，执行hugo命令来生成静态网站，这时候index.html会有冲突，解决冲突后push即可
过一分钟左右，访问https://bob.github.io，网站内容应该已经生效

gh-pages分支问题

我在搭建博客的时候，也遇到了gh-pages的问题，严格来说算不上什么问题，只是不太明白这个分支是干嘛用的，后来慢慢清楚了。

上面举例的bob.github.io，所有的操作都在master分支上，github pages会使用bob.github.io这个repository的master分支的内容作为网站来显示，所以对于bob.github.io这个repository来说，就不需要创建gh-pages分支。

但是如果你的其他项目需要网页来展示呢，比如有一个项目hugo001，其中也有一些网页需要展示，那怎么办？

访问https://bob.github.io这个网站，这时网站展示的是bob.github.io这个repository中的静态网站，如果你想展示hugo001中网页的内容，那就需要给hugo001创建分支gh-pages，并将需要展示的静态网页push到该分支上，然后访问https://bob.github.io/hugo001就可以展示该项目中静态网站了。

总结一下就是：

https://bob.github.io 展示的是帐号为bob的github用户创建的名为bob.github.io的repository中master分支的内容
https://bob.github.io/hugo001 展示的是帐号为bob的github用户创建的名为hugo001的repository中gh-pages分支的内容

GoogleAnalytics踩坑

这个问题是自己失误导致的，毕竟刚入门，照葫芦画瓢，一不小心，就出问题了，搞了一个小时才搞定。

Hugo是支持google统计的，依照官网的说法，只需要两步就可以搞定了：

configuring_google_analytics.png

1. 在config.toml中添加`googleAnalytics = "UA-123-45"`

这个UA-123-45改为你自己在https://analytics.google.com上申请的tracking id

2. 在你的模板中添加下面的代码

{{ template "_internal/google_analytics.html" . }}

# or

{{ template "_internal/google_analytics_async.html" . }}

这段代码可以加在你下载的主题（比如说hugo-theme-cactus-plus这个主题）目录中的layouts/partials/head.html文件中，加在标签中

但是，有的主题已经包含了这段代码，所以你只需要在config.toml中加入你的tracking id即可，这个hugo-theme-cactus-plus主题在themes/hugo-theme-cactus-plus/partials/js.html中已经包含了这段代码，并且还包含的百度统计的代码，真是厉害了

一般来说你按上面操作完成后，就基本上搞定了，剩下的就是打开google统计来查看数据是否生效了，但是我犯了一个错误，让我纠结了好久，我把

googleAnalytics = "UA-123-45"

这行代码加在了config.toml文件中的[params]属性后面：

languageCode = "zh_CN" #语言
paginate = 15 #分页每页记录数
theme = "hugo-theme-cactus-plus"
....

[params]

  description = "Unknown"

  bio= "无聊的时候就爱瞎折腾..." #作者简介
  
  enableGoogleAnalytics = true
  enableBaiduAnalytics = false

  googleAnalytics = "UA-123-45"

  ....

就是因为这行代码加在了[params]所属的范围内，导致Hugo在解析模板的时候找不到googleAnalytics这个参数的值，所以将其忽略，生成的html中就不会包含google统计的代码，我还以为访问google统计很慢呢，刷新了好几次，数据都不变，真的是很尴尬...

往往最简单的地方也越容易出错，所以在这些细小的地方一定要仔细。