前言

Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署

本机环境:Window10、Git

快速开始

Hugo Releases 下载对应的操作系统版本的Hugo二进制文件

推荐扩展版,可以修改scss文件

查看图片

配置系统环境变量

查看图片

查看Hugo版本

1
2
$ hugo version
Hugo Static Site Generator v0.74.3/extended windows/amd64 BuildDate: unknown

生成站点

使用Hugo快速生成站点,我希望生成到当下目录myblog文件夹中

1
2
hugo new site myblog
cd myblog

站点目录结构

.
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

安装主题

这里使用的是LeaveIt,一款简约的Hugo主题

1
2
cd themes
git clone https://github.com/liuzc/LeaveIt.git

主题配置

复制themes/LeaveIt/exampleSiteconfig.tomlcontent覆盖到站点根目录

这样可以避免一些麻烦,接下来运行Hugo

1
hugo server

浏览器里打开: http://localhost:1313

查看图片

设置网站图标

推荐制作Favicons,除了web浏览器,还会生成手机桌面图标。

生成图标后,下载软件包复制到myblog/static

1
2
3
4
5
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">

设置菜单

参考exampleSite中的config.toml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[menu]
[[menu.main]]
name = "Blog"
url = "/posts/"
weight = 1
[[menu.main]]
name = "Categories"
url = "/categories/"
weight = 2
[[menu.main]]
name = "Tags"
url = "/tags/"
weight = 3
[[menu.main]]
name = "About"
url = "/about/"
weight = 4

设置链接

使用的是 iconfont,只添加了如下的社交账号图标

配置Social链接也可以制作自己的iconfont文件

1
2
3
4
5
6
7
8
9
10
[params.social]
GitHub = "xxoo"
Twitter = "xxoo"
Email = "xxoo"
Instagram = "xxoo"
Wechat = "/images/me/wechat.jpeg" # Wechat QRcode image
Facebook = "xxoo"
Telegram = "xxoo"
Dribbble = "xxoo"
Medium = "xxoo"

添加内容

发现菜单栏有AboutAbout Hugo有重复的地方

打开刚才复制的myblog/content/about.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
+++
title = "About Hugo"
date = "2014-04-09"
menu = "main"
+++

Hugo is the **world’s fastest framework for building websites**. It is written in Go.

It makes use of a variety of open source projects including:

* https://github.com/russross/blackfriday
* https://github.com/alecthomas/chroma
* https://github.com/muesli/smartcrop
* https://github.com/spf13/cobra
* https://github.com/spf13/viper

Learn more and contribute on [GitHub](https://github.com/gohugoio).

更多的设置,参考官方文档

1
2
3
4
5
6
7
title = "About Hugo"				# 内容标题
menu = "main" # 菜单定义
description: "spf13-vim" # 内容描述
date = "2017-01-02T17:45:06+08:00" # 内容排序的日期
categories = ["Development","VIM"] # 分类
tags = ["Blog", "Hugo"] # 标签
url = "new_start" # 文章访问时相对url,默认为文件名

自定义 JS/CSS

自定义主题样式

如果你想修改主题的字体和链接的颜色,在myblog/themes/LeaveIt/assets/css/_varibales/default.scss中修改变量值

如果还有其他个性化的样式要求哦,在myblog/themes/LeaveIt/assets/css/_custom.scss中添加

引入 JS

myblog/themes/LeaveIt/layouts/partials中新建_custom.html

myblog/themes/LeaveIt/layouts/partials/footer.html中添加

1
{{ partial "js.html" . }}

引入 css

myblog/themes/LeaveIt/layouts/partials/css.html中添加

1
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2048431_n80qtofc5i8.css">

主题优化

一些个性化小修改和对主题的小优化

规范化

所有相对url会改为规范化使用baseurl,可以解决本地预览静态文件时出现样式丢失的问题

config.toml中需要添加

1
canonifyurls = true

呈现 HTML

Goldmark成为新的默认Markdown渲染器

Goldmark中,默认设置是不呈现原始HTML标签

F12检查会发现以下注释,

1
<!-- raw HTML omitted -->

config.toml中添加,设置blackfriday为默认的markdown引擎

1
2
[markup]
defaultMarkdownHandler = "blackfriday"

config.toml中添加,使用goldmark和markup.goldmark.renderer设置unsafe = true

1
2
3
4
5
[markup]
defaultMarkdownHandler = "goldmark"
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true

iconfont 图标

我选用了三个图标,其实不要忘记主题其他地方还有用到的几个图标

我就是忘记了,那个爱心图标就没有了

查看图片

进入阿里iconfont字体图标建立项目后下载至本地

复制解压后的字体文件覆盖myblog/themes/LeaveIt/assets/font

查看图片

在myblog/themes/LeaveIt/layouts/partials/social.html中清空内容后添加

1
2
3
4
5
6
7
8
9
10
11
{{ with .Site.Params.Social.Qq}}
<a href="javascript:void(0);" rel="me noopener" onclick="document.getElementById('qq-lightbox').style.display='inline';"><i class="iconfont icon-QQ"></i></a>
{{end}}

{{ with .Site.Params.Social.Weixin}}
<a href="javascript:void(0);" rel="me noopener" onclick="document.getElementById('wx-lightbox').style.display='inline';"><i class="iconfont icon-weixin"></i></a>
{{end}}

{{ with .Site.Params.Social.Alipay}}
<a href="javascript:void(0);" rel="me noopener" onclick="document.getElementById('alipay-lightbox').style.display='inline';"><i class="iconfont icon-zhifubao"></i></a>
{{end}}

我用的三个图标都是需要填写二维码图片,但是只有一个lightbox盒子

最简单的方法就是准备三个lightbox盒子

myblog/themes/LeaveIt/layouts/partials/home_profile.html中添加,使用goldmark和markup

1
2
3
4
5
{{ if .IsHome }}
{{ partial "weixin.html" . }}
{{ partial "qq.html" . }}
{{ partial "alipay.html" . }}
{{ end }}
在`myblog/themes/LeaveIt/layouts/partials/`中新建`qq.html`和`alipay.html`

清空weixin.htmlqq.htmlalipay.html内容后修改

查看代码

weixin.html

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
{{ $cdn_url := .Scratch.Get "cdn_url" }}
{{ with .Site.Params.Social.Weixin}}

{{ $weixin := .}}

<style type="text/css">
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
}

.center {
width: 220px;
height: 220px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -110px;
}

.center img {
width: 220px;
}

.center i {
color: #fff;
font-size: 1.5em;
position: relative;
float: right;
top: 0px;
right: -20px;
cursor: pointer;
}
</style>
<!-- LIGHTBOX CODE BEGIN -->

<div id="wx-lightbox" style="display: none" class="lightbox" onclick="document.getElementById('wx-lightbox').style.display='none';">
<div class="center">
<i class="iconfont icon-close"></i>
<img src="{{ printf "%s%s" $cdn_url $weixin}}">
</div>
</div>
<!-- LIGHTBOX CODE END -->
{{ end }}

qq.html

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
{{ $cdn_url := .Scratch.Get "cdn_url" }}
{{ with .Site.Params.Social.Qq}}

{{ $qq := .}}

<style type="text/css">
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
}

.center {
width: 220px;
height: 220px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -110px;
}

.center img {
width: 220px;
}

.center i {
color: #fff;
font-size: 1.5em;
position: relative;
float: right;
top: 0px;
right: -20px;
cursor: pointer;
}
</style>
<!-- LIGHTBOX CODE BEGIN -->

<div id="qq-lightbox" style="display: none" class="lightbox" onclick="document.getElementById('qq-lightbox').style.display='none';">
<div class="center">
<i class="iconfont icon-close"></i>
<img src="{{ printf "%s%s" $cdn_url $qq}}">
</div>
</div>
<!-- LIGHTBOX CODE END -->
{{ end }}

alipay.html

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
{{ $cdn_url := .Scratch.Get "cdn_url" }}
{{ with .Site.Params.Social.Alipay}}

{{ $alipay := .}}

<style type="text/css">
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
}

.center {
width: 220px;
height: 220px;
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -110px;
}

.center img {
width: 220px;
}

.center i {
color: #fff;
font-size: 1.5em;
position: relative;
float: right;
top: 0px;
right: -20px;
cursor: pointer;
}
</style>
<!-- LIGHTBOX CODE BEGIN -->

<div id="alipay-lightbox" style="display: none" class="lightbox" onclick="document.getElementById('alipay-lightbox').style.display='none';">
<div class="center">
<i class="iconfont icon-close"></i>
<img src="{{ printf "%s%s" $cdn_url $alipay}}">
</div>
</div>
<!-- LIGHTBOX CODE END -->
{{ end }}

config.toml中添加

1
2
3
4
[params.social]
Qq = "https://p.ananas.chaoxing.com/star3/origin/df2699647f6df1fa35697ece8227be86.jpg"
Weixin = "https://p.ananas.chaoxing.com/star3/origin/6383ab99018994bec391fdfea4dd8575.jpg"
Alipay = "https://p.ananas.chaoxing.com/star3/origin/f0926dc26f0826461cb1c6274f3842e8.jpg"

夜间模式

夜间模式下,切换文章会有闪烁

myblog/themes/LeaveIt/assets/js/main.js中修改

1
2
3
4
5
6
7
8
9
10
_Blog.toggleTheme = function() {
const currentTheme = window.localStorage && window.localStorage.getItem('theme')
const isDark = currentTheme === 'dark'
// $('body').toggleClass('dark-theme', isDark)
$('.theme-switch').on('click', () => {
$('body').toggleClass('dark-theme')
window.localStorage &&
window.localStorage.setItem('theme', document.body.classList.contains('dark-theme') ? 'dark' : 'light', )
})
}

myblog/themes/LeaveIt/layouts/partials中添加

1
2
3
4
5
6
7
<script>
const currentTheme = window.localStorage && window.localStorage.getItem('theme')
const isDark = currentTheme === 'dark'
if (isDark) {
document.body.classList.add('dark-theme')
}
</script>

修改底部版权信息

去掉Powered by Hugo & LeaveIt,修改工信部备案错误的网站

myblog/themes/LeaveIt/layouts/partials/footer.html中修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<footer class="footer">
<div class="copyright">
&copy; {{ with .Site.Params.since }}
<span itemprop="copyrightYear">{{.}} - {{ now.Year }}</span> {{ end }}
<span class="with-love">
<i class="iconfont icon-love"></i>
</span> {{ if .Site.Params.author }}
<span class="author" itemprop="copyrightHolder"><a href="{{ .Site.BaseURL }}">{{ .Site.Params.author }}</a> </span> {{ end }} {{ with .Site.Params.beian }}
<a href="https://beian.miit.gov.cn/" target="_blank" rel="external nofollow">{{ . }} </a> | {{ end }}

<!-- <span>Powered by <a href="https://gohugo.io/" target="_blank" rel="external nofollow">Hugo</a> & <a href="https://github.com/liuzc/leaveit" target="_blank" rel="external nofollow">LeaveIt</a></span> -->

</div>
<script>
const currentTheme = window.localStorage && window.localStorage.getItem('theme')
const isDark = currentTheme === 'dark'
if (isDark) {
document.body.classList.add('dark-theme')
}
</script>

</footer>

{{ partial "js.html" . }}

修改引用样式

myblog/themes/LeaveIt/assets/css/_common/_core/base.scss中修改

1
2
3
4
5
6
7
8
9
blockquote {
display: block;
border-width: 1px 0;
border-left: .2em solid $light-blockquote-color;
color: #6a737d;
padding: 1em 1em .5em 1em;
margin: 1em 0 1em 0;
position: relative;
}

myblog/themes/LeaveIt/assets/css/_varibales/default.scss中修改变量

查看图片

LightGallery 失效

myblog/themes/LeaveIt/layouts/_default/single.html中修改

1
2
3
4
5
6
7
{{ end }}
<!-- end featured_image-->

{{ $reAltIn := "<img src=\ "([^\"]+)\ " alt=\"([^\ "]+)?\">" }} {{ $reAltOut := ( printf "
<figure><img src=\ "/images/ring.svg\" data-sizes=\ "auto\" data-src=\ "%s$1\" alt=\ "$2\" class=\ "lazyload\">
<figcaption class=\ "image-caption\">$2</figcaption>
</figure>" $cdn_url ) }} {{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }}

顶部进度条

myblog/themes/LeaveIt/layouts/partials中新建scoll.html

1
2
<script src="https://cdn.jsdelivr.net/gh/yimijianfang/MyScroll@master/docs/MyScroll.min.js"></script>
<script>let scroll=new MyScroll({"showBar":true,"color":"#1B9AF7","height":"3px","debug":false,"event":[]});</script>

myblog/themes/LeaveIt/layouts/page/single.html中修改

其实可以放在很多模板文件中,这里只有关于页面和文章页面才生效

1
2
3
4
5
6
7
8
9
10
{{ define "content" }}
{{ partial "scoll.html" . }}
<div class="post-warp archive">
<h2 class="post-title" style="text-align:right;padding-bottom:2em">{{ .Title }}</h2>
<div class="post-content">
{{ .Content }}

</div>
</div>
{{end }}

Tag Plugins

复制我的scss,覆盖myblog/themes/LeaveIt/assets/css/_custom.scss

Note

1
2
3
4
5
6
7
8
<div class="snote info"><p>info</p></div>
<div class="snote success"><p>success</p></div>
<div class="snote error"><p>error</p></div>
<div class="snote bug"><p>bug</p></div>
<div class="snote idea yellow"><p>idea-yellow</p></div>
<div class="snote link blue"><p>link- blue</p></div>
<div class="snote msg cyan"><p>msg cyan</p></div>
<div class="snote download"><p>download</p></div>

Tag-Hide

查看图片

假装有图

需要填写src引用的URL

1
<details blue=""><summary><p>参考图片</p></summary><div class="content"><figure><img src=""data-sizes="auto"data-src=""alt="UqpSyL"class="lazyautosizes lazyloaded"sizes="446px"><figcaption class="image-caption"></figcaption></figure></div></details>

按钮

BUTTONS是一个高度可定制的、免费并且开源的按钮 CSS 样式库

需要填写href引用的URL

1
2
3
<center style="padding-bottom: 10px;">
<a style="color: #1B9AF7;" href="" class="button button-glow button-border button-rounded button-primary" data-pjax-state="">查看效果</a>
</center>

自动化部署

我们新建一个仓库,在myblog下打开

1
vim .travis.yml

申请github-token,勾选repo权限

写入以下内容,记得修改github-token的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
dist: bionic
language: python # 默认是ruby
python: 3.7

install:
# nuo主题需要extended版本的hugo,其他主题可以用最新的普通版本就行
- wget https://github.com/gohugoio/hugo/releases/download/v0.58.3/hugo_extended_0.58.3_Linux-64bit.deb
- sudo dpkg -i hugo*.deb

script:
- hugo

# 构建完成后会自动更新Github Pages
deploy:
provider: pages
skip-cleanup: true
local-dir: public
target-branch: master
github-token: 34bf82361456789b8fd82c088dd1f790d18dc
keep-history: true
on:
branch: source

新建source分支并提交

1
2
3
4
5
6
7
8
9
10
11
12
git config --global user.name "yourname"
git config --global user.email "youremail"
git config user.name
git config user.email
git init
git remote add origin https://github.com/haikesikejiqiang/hugo.git
git add .
git commit -m "first push"
git branch -a
git branch source
git checkout source
git push origin source

使用Github注册Travis CI激活我们所有的GitHub存储库

查看图片

选择我们需要部署的仓库,进入右上角的设定

添加一条环境变量,分别为GITHUB_TOKENgithub-token的值

查看图片

所有步骤已经完成,仓库没有任何变化,所以没有部署

在仓库随便给一个Markdown文件添加换行或者空格提交

查看图片

托管 vercel

注册vercel需要注意不能使用腾讯邮箱,否则无法登录

可以选择导入项目或者导入模块,都支持HugoHexo

后记

HugoHexo好玩多了

参考文档