使用HUGO搭建个人博客

Hugo是一个用Go编写的静态站点生成器,由于具有丰富的主题资源和惊人的生成速度而备受青睐。本博客即是基于Hugo搭建,下面讲述一下我的建站历程以及踩的几个大坑(此处手动Doge…)。

安装Hugo以及生成第一篇文章

安装Hugo

如果你是macOS用户,请使用Homebrew快速安装

1
brew install hugo

如果你是Windows用户,请使用Chocolatey或者Scoop快速安装,取决于你使用什么包管理

1
choco install hugo -confirm

1
scoop install hugo

如果你是DebianUbuntu用户,请使用apt快速安装

1
sudo apt-get install hugo

基本上使用单行命令都可以成功安装Hugo,具体请移步这里

生成文章

使用如下命令新建一个名为“mysite”的网站:

1
hugo new site mysite

接下来,在这里找到一个漂亮的网站主题。相信我,Hugo的主题海洋会让你纠结到死……经过一番激烈的挣扎,我最终还是投靠给了Casper,没有什么能比一张大图占据整个屏幕带来的冲击感更强了……(说不定过段时间我又折腾着换别的主题了……)。言归正传,以Casper为例,将主题clone到本地的themes文件夹内,执行以下两句即可:

1
2
cd themes
git clone https://github.com/vjeantet/hugo-theme-casper.git casper

mysite/content是用来存放文档的地方,我们在其下建立一个新的Markdown文件:

1
hugo new post/first.md

first.md中写入一些内容,使用如下命令进行本地预览:

1
hugo server -t casper -D

几乎瞬间编译成功,打开网址 http://localhost:1313/ 即可查看本地生成的静态网站。

适配主题

Hugo的每个主题都会有不同的参数配置,而这些配置被存放在根目录下的config.toml文件中,对于Casper主题,官方的GitHub中已经对此作了说明,以下是我的配置:

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
BaseUrl= "https://shanetian.github.io/"
LanguageCode= "zh-cn"
Title= "I am thinking ..."
theme = "casper"
paginate = 5
DisqusShortname = "suixin-1" # name in comments
Copyright = "All rights reserved - 2018"
canonifyurls = true

[params]
description = "路在脚下,心向远方"
metadescription = "Used as 'description' meta tag for both home and index pages. If not set, 'description' will be used instead"
cover = "images/boy_bicycle.jpg"
author = "SuiXin"
authorlocation = "Chengdu, China"
authorwebsite = "suixinblog.cn"
authorbio= "Every man dies, not every man really lives."
logo = "images/bird.png"
# googleAnalyticsUserID = "UA-79101-12"
# Optional RSS-Link, if not provided it defaults to the standard index.xml
# RSSLink = "http://feeds.feedburner.com/..."
githubName = "ShaneTian"
email = "tianxinyqq@163.com"
twitterName = "ShaneTian6"
# facebookName = ""
# codepenName = ""
# linkedinName = ""
# stackoverflowId = ""
# keybaseName = ""
# flickrName = ""
# instagramName = ""
# pinterestName = ""
# googlePlusName = ""
# set true if you are not proud of using Hugo (true will hide the footer note "Proudly published with HUGO.....")
hideHUGOSupport = false

# Setting a value will load highlight.js and enable syntax highlighting using the style selected.
# See https://github.com/isagalaev/highlight.js/tree/master/src/styles for available styles
# A preview of above styles can be viewed at https://highlightjs.org/static/demo/
hjsStyle = "atom-one-light"

[params.social]
twitter = "ShaneTian6"

[[menu.main]]
name = "Home"
weight = -1
identifier = "blog"
url = "/"

[[menu.main]]
name = "Machine Learning"
weight = -2
identifier = "ml"
url = "/tags/machine-learning"

[[menu.main]]
name = "Others"
weight = -3
identifier = "other"
url = "/tags/others"

[[menu.main]]
name = "About"
weight = -4
identifier = "about"
url = "/about"

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

文章内的配置

使用命令hugo new post/***.md新建Markdown文件之后,文章开头会有默认的被+++包住的内容,这些内容即是该文章的配置。在/mysite/archetypes/default.md中可修改默认的配置。以下为我的默认配置:

1
2
3
4
5
6
7
8
+++
title = "{{ replace .Name "-" " " | title }}" # 文章标题
date = {{ .Date }} # 自动添加日期信息
draft = true # 设为false可被编译为HTML,true供本地修改
tags = [""] # 文章标签,可设置多个,用逗号隔开。Hugo会自动生成标签的子URL
comments = true # 是否开启Disqus评论功能
share = true # 是否开启分享
+++

代码着色

Casper主题在config.toml文件中的hjsStyle选项提供了highlight.js的代码着色。所有的代码主题和支持的语言可在这里看到。
但在实际的配置中更改配置选项发现并没有更改代码的颜色……我……
经历了一番数不清的Google之后发现,Casper主题的内置HTML文件设置的highlight.js版本为9.8.0,而现在的highlight.js已经更新到9.12.0,故只需修改/mysite/themes/casper/layouts/partials/header.html中几行代码为9.12.0即可:

1
2
3
4
5
6
7
8
9
10
{{ if .Site.Params.hjsStyle }}
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/{{ .Site.Params.hjsStyle }}.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
{{ if or .Site.Params.hjsExtraLanguages .Params.hjsExtraLanguages }}
{{ range $index, $language := (union .Site.Params.hjsExtraLanguages .Params.hjsExtraLanguages) }}
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/{{ $language }}.min.js"></script>
{{ end }}
{{ end }}
<script>hljs.initHighlightingOnLoad();</script>
{{end}}

关于图片

Casper主题需要设置一个封面图和一个作者头像,选好图片放置在/static/images并在/config.toml设置即可。
关于浏览器的小图标favicon


可将喜欢的照片在该网站生成各种分辨率的.ico文件,将其命名为favicon.ico同样放置在/static/images即可。apple-touch-icon同理。

发布网站到GitHub Pages

在使用hugo server -D预览网站无误后可正式发布网站到域名供大家浏览。将要发布的文章内draft改为false后执行命令

1
hugo

可看到根目录下多出/public文件夹出来,该文件夹的内容即Hugo生成的整个静态网站。最终我们需要把这些静态网站的文件部署到一个地方,免费且稳定的GitHub Pages是一个很好的选择。具体操作如下:

  1. 在GitHub新建一个Repository命名为ShaneTian.github.io,其中ShaneTian改成自己的GitHub账户名;
  2. /mysite外建立一个平行的文件夹,此处假设也命名为/ShaneTian.github.io
  3. 进入/public文件夹将内容复制到/ShaneTian.github.io
  4. /ShaneTian.github.io的内容push到远程仓库。

以上命令可在命令行通过以下语句实现:

1
2
3
4
5
6
7
8
9
mkdir ShaneTian.github.io
cd mysite/public
cp -r . ../../ShaneTian.github.io
cd ../../ShaneTian.github.io
git init
git add .
git commit -m "commit message"
git remote add origin https://github.com/ShaneTian/ShaneTian.github.io.git
git push -u origin master

完成以上命令后,等待一分钟左右即可在 https://shanetian.github.io/ 访问你的网站。
以后每次更新文章后只用将生成的/public文件夹的静态网站内容复制到/ShaneTian.github.io,然后再push到远程仓库即可。也可将步骤写为Shell脚本,此处不再赘述。

使用自己的域名

当然,GitHub的域名怎么能满足装*的心理,这时可以将网站设置为自己的域名。购买域名的地方很多,如国外知名网站GoDaddy,简体中文页面、支持支付宝付款、不用备案等都带来了很多方便。我的域名suixinblog.cn即是在此购买。购买域名后完成下面两步即可访问自己的域名:

  1. 在上面存放静态网站的Repository设置里面Custom domain填上自己的域名点击save;
  2. 执行以下语句获得自己的GitHub Pages的IP:

    1
    ping shanetian.github.io

    即可得到下面的IP地址:

  3. 在域名提供商的网站配置DNS即可,以Godaddy为例配置两条记录如下:
  4. 可以在GitHub Pages设置强制https协议,这样你的网站就有安全锁啦~

大功告成!快去访问你的域名吧!
Tips
另外一款好看的Hugo主题:hugo-nuo