# 前言
Hugo 是由 Go 语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署
# 快速开始
到 Hugo Releases 下载对应的操作系统版本的 Hugo 二进制文件
推荐扩展版，可以修改 scss 文件
配置系统环境变量
参考图片
查看 Hugo 版本
hugo version | |
Hugo Static Site Generator v0.74.3/extended windows/amd64 BuildDate: unknown |
# 生成站点
使用 Hugo 快速生成站点，我希望生成到当下目录 myblog 文件夹中
hugo new site myblog | |
cd myblog |
站点目录结构
. | |
├── archetypes | |
│ └── default.md | |
├── config.toml | |
├── content | |
├── data | |
├── layouts | |
├── static | |
└── themes |
# 安装主题
这里使用的是 LeaveIt ，一款简约的 Hugo 主题
cd themes | |
git clone https://github.com/liuzc/LeaveIt.git |
# 主题配置
复制 themes/LeaveIt/exampleSite 下 config.toml 和 content 覆盖到站点根目录
这样可以避免一些麻烦，接下来运行 Hugo
hugo server |
浏览器里打开： http://localhost:1313
# 设置网站图标
推荐制作 Favicons ，除了 web 浏览器，还会生成手机桌面图标。
生成图标后，下载软件包复制到 myblog/static 中
<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
[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 文件
[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" |
# 添加内容
发现菜单栏有 About 和 About Hugo 有重复的地方
打开刚才复制的 myblog/content/about.md
+++ | |
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). |
更多的设置，参考 官方文档
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 中添加
{{ partial "js.html" . }}
# 引入 css
在 myblog/themes/LeaveIt/layouts/partials/css.html 中添加
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2048431_n80qtofc5i8.css"> |
# 主题优化
一些个性化小修改和对主题的小优化
# 规范化
所有相对 url 会改为规范化使用 baseurl ，可以解决本地预览静态文件时出现样式丢失的问题
在 config.toml 中需要添加
canonifyurls = true |
# 呈现 HTML
Goldmark 成为新的默认 Markdown 渲染器
在 Goldmark 中，默认设置是不呈现原始 HTML 标签
F12 检查会发现以下注释
<!-- raw HTML omitted --> |
在 config.toml 中添加，设置 blackfriday 为默认的 markdown 引擎
[markup] | |
defaultMarkdownHandler = "blackfriday" |
在 config.toml 中添加，使用 goldmark 和 markup.goldmark.renderer 设置 unsafe = true
[markup] | |
defaultMarkdownHandler = "goldmark" | |
[markup.goldmark] | |
[markup.goldmark.renderer] | |
unsafe = true |
# iconfont 图标
我选用了三个图标，其实不要忘记主题其他地方还有用到的几个图标
我就是因为忘记了，左上角的爱心图标没有了
参考图片
进入阿里 iconfont 字体图标建立项目后下载至本地
复制解压后的字体文件覆盖 myblog/themes/LeaveIt/assets/font
在 myblog/themes/LeaveIt/layouts/partials/social.html 中清空内容后添加
参考
{{ 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
参考
{{ if .IsHome }}
{{ partial "weixin.html" . }}
{{ partial "qq.html" . }}
{{ partial "alipay.html" . }}
{{ end }}
在 myblog/themes/LeaveIt/layouts/partials/ 中新建 qq.html 和 alipay.html
清空 weixin.html 、 qq.html 和 alipay.html 内容后修改
在 config.toml 中添加
[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 中修改
_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 中添加
<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 中修改
# 修改引用样式
在 myblog/themes/LeaveIt/assets/css/_common/_core/base.scss 中修改
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 中修改
# 顶部进度条
在 myblog/themes/LeaveIt/layouts/partials 中新建 scoll.html
<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 中修改
其实可以放在很多模板文件中，这里只有关于页面和文章页面才生效
参考
{{ 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
参考图片
<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
参考图片
假装有图片，现在使用 shoka 主题没有使用这个外置折叠快插件
Hugo 的某些配置项被 Nunjucks 模板引擎不正确识别，报错如下
所以本文中代码块被迫更换为外链
[Nunjucks Error]: - posts/ 12.hugo初识.md Line 62, Column 155] expected variable end |
需要填写 src 引用的 URL
<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
<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 下打开
vim .travis.yml |
申请 github-token ，勾选 repo 权限
写入以下内容，记得修改 github-token的值
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 分支并提交
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_TOKEN 和 github-token的值
参考图片
所有步骤已经完成，仓库没有任何变化，所以没有部署
在仓库随便给一个 Markdown 文件添加换行或者空格提交
参考图片
# 托管 vercel
注册 vercel 需要注意不能使用腾讯邮箱，否则无法登录
可以选择导入项目或者导入模块，都支持 Hugo 和 Hexo
# 后记
Hugo 真是好用
