生命在于折腾,生命不息,折腾不止。
最近又开始了折腾博客,以前的文章都写在简书上,现在准备使用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/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统计的,依照官网的说法,只需要两步就可以搞定了:
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文件中,加在<head>标签中
但是,有的主题已经包含了这段代码,所以你只需要在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统计很慢呢,刷新了好几次,数据都不变,真的是很尴尬...
往往最简单的地方也越容易出错,所以在这些细小的地方一定要仔细。