1. 安装Hugo
2. 新建一个站点项目
1
|
hugo new site hugo-blog
|
3. 下载Even主题
1
2
3
4
|
# 首先进入站点项目根目录
cd hugo-blog
# 下载主题
git clone <https://github.com/olOwOlo/hugo-theme-even> themes/even
|
4. 配置
将hugo-blog/themes/even/exampleSite/config.toml复制到站点的根目录下，替换根目录下的配置文件。
在该配置文件中可以修改自定义的一些内容。
Even主题共有5种颜色可选，但不是在config.toml中，而是在themes/even/assets/sass/_variables.scss中：
1
2
3
4
|
// ========== Theme Color ========== //
// Config here to change theme color
// Default | Mint Green | Cobalt Blue | Hot Pink | Dark Violet
$theme-color-config: 'Default';
|
5. 写文章
首先，可参考hugo-blog/themes/even/archetypes/default.md调整站点项目根目录下的archetypes/default.md，这是默认的文章模板。
针对该模板中可设置的内容，可以进行自定义，例如：
1
2
3
4
5
6
7
8
9
10
11
12
|
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
lastmod: {{ .Date }}
draft: true
keywords: []
description: ""
tags: []
categories: []
author: ""
toc: true
postMetaInFooter: true
|
应用此主题，不可以把文章放在posts，而应该放在post，即：
1
2
|
# 使用如下命令新建一篇文章
hugo new post/some-content.md
|
6. 本地预览
因为，文章默认都是“草稿”的，所以，使用hugo server启动服务时，无法看到草稿状态的文章，需使用如下命令：
7. 生成静态文件
1
2
3
4
5
6
7
8
9
10
11
|
# 当仅使用“hugo”命令时，主题采用配置中的主题，默认不生成草稿文章的静态文件
hugo
# 生成静态文件时指定主题even
hugo --theme=even
# 生成静态文件时无论是否草稿都生成
hugo -D
# 指定生成的静态文件存放目录
hugo -d <dir>
|
8. 部署至GitHub Pages
之前在讲通过GitHub Pages部署Hexo博客时讲过相关的内容铺垫，此处不再赘述。
将Hugo博客部署至GitHub Pages时，暂时还没有Hexo部署那么简单。研究了下暂时有两种方案：
- 自己写一个部署脚本，执行脚本时重新生成静态文件并将其推送至GitHub
- 通过GitHub Actions，这种方案也是Hugo官方文档中提供的方案
两种方案各有优劣，我采用的是方案一。如下是我的部署脚本：
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
|
#! /bin/bash
echo "Deploy start..."
# 进行配置
# 文章输入目录
output_dir='public'
theme='even'
# 判断是否存在输出目录
if [ -d $output_dir ]; then
# 存在，开始删除旧文件
cd $output_dir
echo "Deleting files in $output_dir..."
# 删除，但排除“readme.md”、“.gitignore”、“.git”
find . | grep -v -i -w readme.md | grep -v -i -w .gitignore | grep -v -i -w .git | xargs rm -rf
echo "Delete done... "
cd ..
fi
# 生成文件
hugo --theme=$theme -d $output_dir
cd $output_dir
# 判断是否已有远程主机，若是，则无需再做初始化
if [ "$(git remote)" = "" ]; then
# 执行git相关
git init
# 设置远程主机
git remote add origin https://github.com/zhdbest/blog.git
fi
# 设置git user
git config user.name zhdbest
git config user.email zhd94811@163.com
git add .
# 提交至本地仓库
# 可以选择使用默认commit message
# git commit -m "$(date) commit"
# 让用户输入commit message
read -p "Please enter your commit message: " msg
git commit -m "$msg"
# 将本地的master分支推送至远程的master分支
git push -u origin +master
# 用绿色文字提示用户推送成功
green='\033[32m'
no_color='\033[0m'
echo -e "$green\c"
echo "Congratulations! Your site is pushed to GitHub now."
# 将文字输出颜色调整回无色
echo -e "$no_color\c"
|
9. 常见问题解决
9.1 如何让部分内容不进行解析，即达到“注释”的效果
在使用Hugo的过程中发现，即使在代码块内使用某些Shortcode，其也会被Hugo解析，进而可能导致报错。例如：
1
2
3
|
```
{{< tag >}}
```
|
如果，在代码块中直接这样写，会导致Hugo尝试将其解析为Shortcode，但又找不到名为tag的Shortcode定义，进而导致报错。
为了避免这种问题，可以使用/*和*/将不需要解析的内容包裹起来，例如：
1
2
3
|
```
{{</* tag */>}}
```
|