Hugo的使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30682027/article/details/83536577

有用的网站:静态网站构建手册
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 --buildDraftshugo 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上折腾了,转码云,但是码云是否可以让百度抓取,目前未知。

猜你喜欢

转载自blog.csdn.net/qq_30682027/article/details/83536577