# 前言

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

本机环境:Window10、Git

# 快速开始

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/exampleSiteconfig.tomlcontent 覆盖到站点根目录

这样可以避免一些麻烦,接下来运行 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"

# 添加内容

发现菜单栏有 AboutAbout 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.htmlalipay.html

清空 weixin.htmlqq.htmlalipay.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_TOKENgithub-token的值

参考图片

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

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

参考图片

# 托管 vercel

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

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

# 后记

Hugo 真是好用

参考文档
更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

山河 微信支付

微信支付

山河 支付宝

支付宝

山河 贝宝

贝宝