1.前言

早些年的博客是使用的Hexo搭建的，从2019年开始，到现在已经四年多了，积累了很多的东西，有几百篇了，使用hexo每次生成都显得特别特别的慢，虽然借助了 AzureDevops 自动部署工具，但是如果有一个更快的博客生成系统，也不是不可以尝试下。我最近看到了Hugo,发现Hugo的star数量已经到了68k了，而Hexo只有37k,看来Hugo更加的火爆。原先的Hexo主题使用的是 nunjucks 模版写的，现在要重新进行开发了。

2.安装

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

# 安装
brew install hugo

# 创建站点
hugo new site sitename

# 生成主题脚手架
hugo new theme achuanxiong

# 或者是谁直接添加已有的主题
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

# 指定主题
echo "theme = 'ananke'" >> hugo.toml

# 开发
hugo server
# or
hugo server -D

# 创建文章
hugo new site /path/to/site

# 生成站点
hugo

3.目录结构

• config.toml

  是网站的配置文件，Hugo还可使用 config.yaml 或者 config.json 进行配置。

• content
  目录中存放所有的网站内容，可在此目录中建立其他子目录，即为子模块。

• layouts
  目录存放 .html 格式的模板。模板确定了静态网站渲染的样式。此目录存储.html文件作为布局模板，这些模板声明了内容视图在静态站点的呈现。包含的模板有[列表页lists], 您的 [主页homepage], [标签模板taxonomy templates], [部分页面模板 partials], [单独页模板singles]

• themes
  目录存放网站使用的theme主题模板。

• static
  目录存放未来网站使用的静态内容，比如图片、css、JavaScript等。当Hugo生成静态网站时，该目录中的所有内容会原封不动的被复制。

• archetypes
  目录存放网站预设置的文件模板头部，当使用 hugo new 时即可生成一个带有该头部的实例。

• data
  目录用来存储Hugo生成网站时应用的配置文件。配置文件可以是YAML，JSON或者TOML格式。

• public
  目录存放静态网页的代码，也就是生成的 html 文件；使用命令 hugo 会得到这个目录

4.基础知识

5.Hugo模块

（1）模块安装
因为我首次使用go开发，所以对于这个模块这个东西还不是很理解，就像 wowchemy 的主题，还是有这个 go.mod 模块的内容。后来我发现，很多的主题下面都有这个 go.mod 文件，应该是一个 go 模块。

我于是就去官方下载 了 pkg 的安装包，直接双击安装了。

安装了 go 开发环境之后，就可以使用 go modules 了。比如到 theme/wowchemy 下进行模块的下载

1
2
3
4
5
6
7
8

# 创建目录滚里模块
hugo mod vendor 
# 更新所有模块
hugo mod get -u
# 清理缓存
hugo mod clean
# 打印依赖图
hugo mod graph

（2）代理配置
在主题的 config.yaml 配置文件中，进行代理配置，这样下载就快一点了。 这里还存在疑问。

1
2
3
4
5
6
7
8
9

module:
  hugoVersion:
    min: '0.101.0'
    extended: true
  imports:
    - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-core
    - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-seo
  # 阿里云
  proxy: https://mirrors.aliyun.com/goproxy/

问题

(1) failed to download modules: binary with name “go” not found

【解决方案】
就是安装 go 开发环境。

5.配置 wowchemy 主题

在 Hugo 的主题列表中，wowchemy 主题是排在第一个的，于是我想着要把这个尝试下。我只需要一个主题，于是我就直接从 ，把这个 modules/wowchemy 模块拷贝到了我自己的站点目录下。

配置 wowcheny 主题也废了一番功夫。

(1) 下载
去 wowchemy 仓库中，将主题下载到临时文件夹中。

(2) 拷贝
打开下载的仓库，将 modules/wowchemy 文件拷贝到站点的 themes 文件夹下。

(3) 修改主题配置
修改 wowchemy 的config.yaml 文件，在 module 模块下增加 proxy 代理。

1
2
3
4
5
6
7
8
9

module:
  hugoVersion:
    min: '0.101.0'
    extended: true
  imports:
    - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-core
    - path: github.com/wowchemy/wowchemy-hugo-themes/modules/wowchemy-seo
  # 阿里云
  proxy: https://mirrors.aliyun.com/goproxy/

(3) 安装模块
进入到站点的 themes 文件夹，执行模块安装,

1
2
3
4

# 进入主题目录，生成模块文件夹
hugo mod vendor
# 更新模块
hugo mod get -u

(4) 增加配置文件
我在网站的根目录下新建了 config/_default,在其中创建了 config.yaml 文件，添加如下内容：

1
2
3
4
5

security:
  funcs:
    getenv:
      - ^HUGO_
      - ^WC_

(5) 启动
修改 hugo.toml 文件，指定主题

1

theme = "wowchemy"

启动站点

1

hugo serve -D 

问题

1.module does not exist
在有 go.mod 文件的主题中，运行 hugo server ，结果就会报错。

【解决方案】

1
2
3
4

# 进入主题目录，生成模块文件夹
hugo mod vendor
# 更新模块
hugo mod get -u

2.dial tcp 172.217.163.49:443: i/o timeout
在解决上面的问题的时候，我遇到的问题，我在主题目录下运行 “go get .” 结果就报错了。

【解决方案】

1
2

## 设置国内的地址
go env -w GOPROXY=https://goproxy.cn

3.error calling getenv: access denied: “WC_POST_CSS” is not whitelisted in policy “security.funcs.getenv”; the current security configuration is
当我解决了上面的两个问题之后，再次进行开发，结果出现了这个问题。

【尝试】
我在根目录下新建了 config.yaml 文件，似乎不起作用。

【解决方案】
我在网站的根目录下新建了 config/_default,在其中创建了 config.yaml 文件，添加如下内容：

1
2
3
4
5

security:
  funcs:
    getenv:
      - ^HUGO_
      - ^WC_

也可以尝试在主配置文件 config.toml 文件中填写：

1
2

[security.funcs]
getenv = [ "^HUGO_", "^WC_" ]

6.Hugo extended

在查询资料的时候，有时候会有这个 Hugo extended 的资料，就是在使用 scss/sass 的时候，需要这个东西，但是我没有在官网上找到这个独立的安装方法，不知道是不是过期了。

（1）可以到 官方 v0.115.3 这个 0.115.3 版本的 Assets 里面有这个 hugo-extentded 的安装包，下载后替换原先的hugo安装包的可执行文件，进行替换。

（2） MacOS 使用brew 进行安装，默认的就是 extended 版本。

1
2
3
4
5
6

# 安装
brew install hugo
# 查看
hugo version
# 显示
hugo v0.115.3+extended darwin/amd64 BuildDate=unknown

7.自定义主题

自定义主题，其实有两种方式，第一种就是完全从零开始开发，另外一种就是先克隆别人的主题，然后在别人的主题上进行二次开发，调整。

1
2
3

hugo new site achuanxiong  # 创建网站骨架
cd study-hugo  
hugo new theme achuanxiong  # 创建主题目录