1 Hugo介绍

  世界上最快的网站构建框架。

  Hugo是最受欢迎的开源静态站点生成器之一。凭借其惊人的速度和灵活性，Hugo使建筑网站再次变得有趣。

  Hugo官网

2 Hugo及主题的安装

  安装教程

  在线预览

3 通过配置文件deploy.sh实现一键部署到GitHub

（a）deploy.sh文件放在站点根目录下；

（b）执行方法分两种（windows下）：

  • 方法一：站点根目录下，鼠标右键，打开git bash here窗口，执行sh deploy.sh。
  • 方法二：选中deploy.sh文件，鼠标右键属性，更改打开方式，将打开方式选择为git-bash.exe执行文件，以后写新的文章后，双击下脚本文件即可成功推送到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

#!/bin/bash

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

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

# Go To Public folder
cd public
# Add changes to git.
git add -A

# 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
cd ..

4 Hexo介绍

  快速、简洁且高效的博客框架。

  Hexo官网

5 Hexo及主题的安装

  Hexo搭建教程

  Hexo的next主题安装

  在线预览

6 从hexo转移到hugo框架

  原因如下：

  （a）之前的hexo配置了一些动态背景、评论功能等等，但是后来不想要这些功能（看着比较炫酷，但是没什么实际用处），要调整的话需要到处找文件改配置，比较麻烦；

  （b）经过github、coding双线部署，静态文件压缩，配置CDN后，感觉页面加载速度还不是很快；

  （c）自定义配置的话需要在站点配置、主题配置来回搞，还是嫌麻烦。

7 hugo字体图标自定义配置

  阿里巴巴矢量库

  打开图标管理 -> 我的项目 -> hugo-blog，将选择好的图标加入购物车，加入项目，修改下图标的名称（名称改为icon-xxx）、大小和颜色。

然后点击下载至本地，解压后目录结构如下。

1
2
3
4
5
6
7
8
9

--demo.css
--demo_index.html 
--iconfont.css
--iconfont.eot
--iconfont.js
--iconfont.svg
--iconfont.ttf
--iconfont.woff
--iconfont.woff2

将hugo的themes\even\src\fonts\iconfont目录下的4个文件用上一步下载的对应文件替换掉。

1
2
3
4
5
6

└─fonts
    └─iconfont
          --iconfont.eot
          --iconfont.svg
          --iconfont.ttf
          --iconfont.woff

打开themes\even\src\css\_iconfont.scss文件。

将/* Social Icon */下方的只有content属性的css样式用下载文件中对应的iconfont.css文件对应内容来替换掉。

修改的配置不能立即生效，我们重新编译打包主题文件。因此需要先安装 Node.js和Yarn ，安装Node.js后，Yarn的快速安装方法。

1

# npm install -g yarn

检查Node.js和Yarn是否安装成功。

1
2
3

# node -v
# npm -v
# yarn --version

命令执行后都能查到版本号，说明安装成功。

主题文件的依赖安装和打包。

1
2
3

# cd ./themes/even/
# yarn install
# yarn build

8 给菜单项加上好看的图标

将themes\even\layouts\partials\header.html里的partials\header.html文件结构复制到站点根目录下的layouts中，对站点根目录下layouts\partials\header.html文件对应内容

1

<a class="menu-item-link" href="{{ .URL | safeURL }}">{{ .Name }}</a>

修改为

1

<a class="menu-item-link" href="{{ .URL | safeURL }}"><i class="iconfont icon-{{ .Identifier }}"></i>{{ .Name }}</a>

根据站点根目录下config.toml文件中的identifier属性匹配字体图标名称。

图标显示出来后感觉和字距离太近了，可以调整下css样式，配置下站点根目录下的config.toml文件，启用自定义css文件。

1

customCSS = ['custom.css']

配置站点根目录/static/css/custom.css文件（注意这是css文件，不要将themes中的scss样式直接复制过来改改，会报错），自定义custom.css、custom.js可以覆盖主题里设置的scss、js，这样我们可以不用去改动主题文件，方便以后对主题的切换。

1
2
3
4

/* 设置菜单栏icon偏移位置 */
.menu-item-link .iconfont::before {
	padding-right: 8px;
}

9 完整的custom.css文件，需要改动样式的可自定义

  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
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191

/* =============================== custom.css ================================== */
/* 去除顶部border */
body {
	border-top: 0;
}

/* 设置版心 */
.container {
	width: 800px;
	margin: 0 auto;
}

/* 设置a标签样式 */
a {
	color: rgba(139,69,19,0.8);
}

/* 设置文章目录单行省略 */
.toc-link {
	display: inline-block;
	width: 100%;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* 设置页面最小高度，我的电脑100vh为722.4，window.innerHeight为722，导致出现了一小段垂直滚动条，网上说清除body的margin解决不了这个问题，然后我用了calc减去10px刚好，兼容ie9+ */
.slideout-panel {
    min-height: calc(100vh - 10px);
	background-color: #f5f5f5;
}

/* 设置main最小高度，保证标签、分类页面的footer在底部 */
.main {
	min-height: 453px;
}

/* ================================ 设置header样式 ============================== */
.header {
	padding: 10px;
	background: -webkit-linear-gradient(200deg, #FFFFFF 0%, #EBEBEB 80%); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(200deg, #FFFFFF 0%, #EBEBEB 80%); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(200deg, #FFFFFF 0%, #EBEBEB 80%); /* Firefox 3.6 - 15 */
    background: linear-gradient(200deg, #FFFFFF 0%, #EBEBEB 80%); /* 标准的语法（必须放在最后） */
}

/* 设置菜单项hover样式 */
.header .site-navbar .menu .menu-item:hover {
    background-color: #CCCCCC;
	border-radius: 6px;
}

/* 设置title字体大小 */
.header .logo-wrapper .logo {
	position: relative;
    font-size: 36px;
    line-height: 68px;
}

/* 设置title上横线 */
.header .logo-wrapper .logo::before {
    content: '';
    position: absolute;
	top: -10px;
	left: 27px;
    width: 160px;
    height: 2px;
    background-color: #333;
}

/* 设置title下横线 */
.header .logo-wrapper .logo::after {
    content: '';
    position: absolute;
	bottom: -10px;
    left: 0;
	left: 27px;
    width: 160px;
    height: 4px;
    background-color: #333;
}

/* ========================= 设置菜单栏icon偏移位置 ================================ */
.menu-item {
	padding: 0 10px;
}

.menu-item-link .iconfont::before {
	padding-right: 8px;
}


/* ============================== 调整阅读更多样式 ======================================= */
.post .post-content .read-more .read-more-link {
    border: 2px solid #222;
    padding: 0.5em 1em;
    background-color: #222;
    color: #fff;
}

.post .post-content .read-more .read-more-link:hover {
    border-bottom: 2px solid #222;
	color: #222;
    background: #fff;
}

/* 去除文章border-bottom */
.posts {
	border-bottom: none;
}

/* 设置文章盒子阴影 */
.post {
	padding: 1em 1em;
    margin: 1.5em 0;
	box-shadow: 0 8px 8px rgba(10,16,20,.24), 0 0 8px rgba(10,16,20,.12);
	-webkit-box-shadow: box-shadow: 0 8px 8px rgba(10,16,20,.24), 0 0 8px rgba(10,16,20,.12);
}

/* 设置文章目录的ul样式 */
.post .post-toc .post-toc-content ul {
    list-style: telugu;
}

/* 设置文章标题hover样式 */
.post .post-header .post-link:hover {
    background-color: #CCCCCC;
	padding: 1px 10px;
	border-radius: 6px;
}

/* 设置文章代码片段样式 */
.post .post-content code, .post .post-content pre {
    background: none; 
}	

/* 让阅读更多居中 */
.read-more {
	text-align: center;
	padding: 0 0 20px;
}

/* 调整返回顶部icon位置和大小 */
.back-to-top {
    right: 30px;
    bottom: 45px;
    font-size: 2em;
}

/* ============================= 设置菜单项的标签、分类页面样式 ===================================== */
.terms .terms-tags .terms-link {
    margin: 10px 10px;
    border-radius: 50em;
    padding: 5px 10px;
    background-color: #FFF2AB;
}

/* 设置菜单项的标签、分类页面的统计数字样式 */
.terms .terms-tags .terms-link .terms-count {
    top: -2px;
    right: -1px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #B45B3E;
    color: #fff;
}

/* ========================= 设置底部heart跳动样式动画 =============================== */
.footer .copyright .copyright-year .heart {
    color: #ff7171;
	display: inline-block;
	animation: heartAnimate 1.33s ease-in-out infinite;
}

@keyframes heartAnimate {
	0%, 100% {
    transform: scale(1);
	}

	10%, 30% {
		transform: scale(.9);
	}
	20%, 40%, 60%, 80% {
		transform: scale(1.1);
	}
	50%, 70% {
		transform: scale(1.1);
	}
}