Hugo的使用

有用的网站:静态网站构建手册
g-var.com | hugo
了解Go模板：g-var.com | G-VAR’s Blog 21
了解Go模板：g-var.com | G-VAR’s Blog 22

使用码云Pages直接上传代码生成网站

发个牢骚：很想支持百度一下，可是有些资料使用百度搜索到的结果真的不怎么样。唉，还是得找各种代理呀

1. hugo的使用方法

参考：Hugo 中文文档，不知道什么原因，访问时断时续，只好耐着性子刷新直到出现位置。无奈

关于Hugo的使用，事实上配置文档已经写得相当全了。我这里主要是记录我的实战经验以及遇到的问题

1.1. 下载与配置

我的环境是Windows，所以下载的是Windows 64位压缩包，解压后如下图所示

如果没有在环境变量中添加hugo可执行文件路径的话，每一次都要写全hugo.exe的路径或者切换到hugo所在的目录，这样显然极为不便。所以可以在环境变量中添加路径到path，这样就可以在cmd中随便使用hugo命令了。

注意：PATH中路径只需要添加到hugo.exe所在的文件夹即可，不需要包含hugo.exe，如全路径为d:\a\hugo.exe，则添加路径为d:\a

环境变量的添加百度即可，比较简单，这里不赘述。

1.2. 使用过程

大致使用过程如下：

1. 新建空文件夹，如blog作为博客的目录
2. 在cmd中将路径切换至blog，然后执行hugo init。这时会在blog文件夹下生产需要的文件及文件夹
3. 切换到blog下的theme主题目录，然后从hugo的github主题中选择一个。使用git命令git clone 主题git地址下载下来
4. 仔细阅读主题的说明文档，其中写明了主题的使用方法。不同主题的使用方法不同，这里不说明。

1.2.1. hugo常用命令

1. hugo init path：在path路径下初始化一个hugo博客目录
2. hugo server --buildDrafts：hugo server如果没有带参数，默认在当前目录寻找config.toml，如果没有config.toml，命令中就需要带很多参数。--buildDrafts意为“编译草稿（draft: true的Markdown文件）”
3. hugo --buildDrafts：生成可发布的静态html。如果没有指定路径，默认在当前路径下新建public。如果在config.toml中指定了publicdir参数，则默认到该路径下，注意路径的斜杠问题。

1.2.2. hugo init所生成的文件夹及文件作用

有很多路径还没有完全搞明白，这里暂时记录已经清楚的。其它的还不是很清楚，以后清楚了记得补充

• themes：主题存放目录
• content：博客存放目录
• static：图片、js、css等静态文件存放目录
• data: 目前看应该是一些可以混合到config.toml的配置文件存放的目录。供theme中{{ range .Site.Data.FootMenu }}使用，其中FootMenu就是文件的名称，文件后缀为.toml

1.2.3. config.toml参数说明

有很多参数还没有完全搞明白，这里暂时记录已经清楚的。其它的还不是很清楚，以后清楚了记得补充

# 博客的发布目录。测试时使用如下路径，发布到网络后，要修改为网路地址
baseurl = "https://localhost:1313/"

# 使用的主题
theme = "hyde-y"

# 发布目录，指向github的本地仓库
publishdir = "D:/workspace/blog"

# 编译草稿，使用改参数保证hugo server即使没有加`--buildDrafts`，也能访问draft=true的md
buildDrafts = true


# 博客路径生成规则/年/月/日/Markdown文件的title参数
# 可以指定特殊的路径，如code
# 注意路径都是小写，尽管title参数有大小写混合
[permalinks]
    post = "/:year/:month/:day/:slug/"
    code = "/:slug/"

1.2.4. Markdown中相关部分的说明

关于Markdown的语法说明，这里不详细描述。请自己查找资源。主要说内容的头部分，即头部---所包含部分。

参考：Front Matter

注意：在key:和值之间，有且只有一个空格

//同时，如果`permalinks`中使用`:slug`参数，那么就指的是这个title。
title：'文章标题`

//是否是草稿。默认为true，如果没有指定`buildDrafts`参数，那么`draft: true` 将不会在`hugo`或者`hugo server`时，使用浏览器访问
draft: true

//文档的建立时间。如果`peralinks`中指定了参数`:year`、`:month`、`:day`，那么就对应了这里的年-月-日，同时在路径中访问时，也要加上这些内容
date: 2018-10-25T08:50:08+08:00

1.3. 发布到github

这个网上的例子比比皆是，亦不赘述。需要说明的是，baseurl的配置一定要执行自己在github中配置的目录

1.4. 遇到的问题

搭建的过程当然不是一帆风顺的了，遇到了很多问题，走了很多弯路。所以，我一直觉得，总结才是对付出精力的最好回报。

1.4.1. Hugo中Markdown插入图片路径问题

解决这个问题，主要是两个方面：

第一、在config.toml中配置baseurl。作用是无论在本地还是发布出去，图片的路径都是相对于baseurl而言的。

第二、在Markdown图片路径中，以static为根目录写全路径。

示例：假设测试baseurl为http://localhost:1313/，图片位置：/static/img/hugo/123.png，那么在Markdown中写作![图片说明](/img/hugo/123.png)。这时，在浏览器就可以看到图片了

1.4.2. Hugo主题修改

Hugo主题很有可能满足不了我们的需求。这个时候就需要我们自己修改Hugo主题代码。特别是样式问题，要善于利于强大的ide，如webstorm等。

1.4.3. 命令行报错

hugo的报错还是很人性化的。只要认真看报错信息，基本上都能定位到错误位置。

1.4.4. 页面定制

注意：在本地使用hugo server看不到效果，需要部署上去(事实上，应该是服务器设置了默认404页面吧)。

1.4.5. 使用码云Pages直接上传代码生成网站

使用码云Pages直接上传代码生成网站

使用码云要简单一些。根据码云的例子和文档，直接上传源代码就可以创建好网站了。码云帮助我们将源码“编译”成html文档。

1.4.6. GitHub Pages百度无法抓取网页的问题

在网上找了很多资料（都比较老了），大概意思为：百度爬虫的频繁抓取导致github page出现问题，所以github page就屏蔽了百度爬虫的抓取。也有一些解决方案，但是不想做的那么复杂，因此就不再github上折腾了，转码云，但是码云是否可以让百度抓取，目前未知。