Hugo、Hexo博客搭建及Hugo的自定义配置

1 Hugo介绍

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

2 Hugo及主题的安装

  安装教程
  在线预览
Hugo、Hexo博客搭建及Hugo的自定义配置
Hugo、Hexo博客搭建及Hugo的自定义配置

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

(a)deploy.sh文件放在站点根目录下
(b)执行方法分两种(windows下)

  • 方法一:站点根目录下,鼠标右键,打开git bash here窗口,执行sh deploy.sh
  • 方法二:选中deploy.sh文件,鼠标右键属性,更改打开方式,将打开方式选择为git-bash.exe执行文件,以后写新的文章后,双击下脚本文件即可成功推送到github上。
#!/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)经过githubcoding双线部署,静态文件压缩,配置CDN后,感觉页面加载速度还不是很快;
  (c)自定义配置的话需要在站点配置、主题配置来回搞,还是嫌麻烦。

7 hugo字体图标自定义配置

  阿里巴巴矢量库
  打开图标管理 -> 我的项目 -> hugo-blog,将选择好的图标加入购物车,加入项目,修改下图标的名称(名称改为icon-xxx)、大小和颜色。
Hugo、Hexo博客搭建及Hugo的自定义配置
然后点击下载至本地,解压后目录结构如下。
Hugo、Hexo博客搭建及Hugo的自定义配置
将hugo的themes\even\src\fonts\iconfont目录下的4个文件用上一步下载的对应文件替换掉。
Hugo、Hexo博客搭建及Hugo的自定义配置
打开themes\even\src\css\_iconfont.scss文件
Hugo、Hexo博客搭建及Hugo的自定义配置
修改的配置不能立即生效,我们重新编译打包主题文件。因此需要先安装 Node.jsYarn ,安装Node.js后,Yarn的快速安装方法

npm install -g yarn

检查Node.jsYarn是否安装成功

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

命令执行后都能查到版本号,说明安装成功
Hugo、Hexo博客搭建及Hugo的自定义配置
主题文件的依赖安装和打包

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

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

打开themes\even\layouts\partials\header.html文件
Hugo、Hexo博客搭建及Hugo的自定义配置
站点根目录下的config.toml文件
Hugo、Hexo博客搭建及Hugo的自定义配置
图标显示出来后感觉和字距离太近了,可以调整下css样式,配置下站点根目录下的config.toml文件
Hugo、Hexo博客搭建及Hugo的自定义配置
配置站点根目录文件custom.css文件(注意这是css文件,不要将themes中的scss样式直接复制过来改改,会报错),自定义custom.csscustom.js可以覆盖主题里设置的scssjs,这样我们可以不用去改动主题文件,方便以后对主题的切换。

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

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

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

/* 设置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;
}

/* 去除顶部border */
body {
	border-top: 0;
}

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

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

/* 设置文章盒子阴影 */
.post {
	padding: 1em 1em;
    margin: 1.5em 0;
	box-shadow: 0 0 5px rgba(202,203,203,.5);
	-webkit-box-shadow: 0 0 5px rgba(202,203,203,.5);
}

/* 调整返回顶部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: red;
    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);
	}
}



上一篇:linux – Hugo Error – 当前主题不支持当前版本


下一篇:Windows下搭建Hugo博客