概述
文章目录
- 1. hugo的使用方法
- 1.1. 下载与配置
- 1.2. 使用过程
- 1.2.1. hugo常用命令
- 1.2.2. `hugo init`所生成的文件夹及文件作用
- 1.2.3. config.toml参数说明
- 1.2.4. Markdown中相关部分的说明
- 1.3. 发布到github
- 1.4. 遇到的问题
- 1.4.1. Hugo中Markdown插入图片路径问题
- 1.4.2. Hugo主题修改
- 1.4.3. 命令行报错
- 1.4.4. 页面定制
- 1.4.5. 使用码云Pages直接上传代码生成网站
- 1.4.6. GitHub Pages百度无法抓取网页的问题
有用的网站:静态网站构建手册
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:ahugo.exe
,则添加路径为d:a
环境变量的添加百度即可,比较简单,这里不赘述。
1.2. 使用过程
大致使用过程如下:
- 新建空文件夹,如
blog
作为博客的目录 - 在cmd中将路径切换至
blog
,然后执行hugo init
。这时会在blog文件夹下生产需要的文件及文件夹 - 切换到
blog
下的theme
主题目录,然后从hugo的github主题中选择一个。使用git命令git clone 主题git地址
下载下来 - 仔细阅读主题的说明文档,其中写明了主题的使用方法。不同主题的使用方法不同,这里不说明。
1.2.1. hugo常用命令
hugo init path
:在path路径下初始化一个hugo博客目录hugo server --buildDrafts
:hugo server
如果没有带参数,默认在当前目录寻找config.toml,如果没有config.toml,命令中就需要带很多参数。--buildDrafts
意为“编译草稿(draft: true的Markdown文件)”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上折腾了,转码云,但是码云是否可以让百度抓取,目前未知。
最后
以上就是火星上小懒猪为你收集整理的Hugo的使用1. hugo的使用方法的全部内容,希望文章能够帮你解决Hugo的使用1. hugo的使用方法所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复