麦田的博客

Hugo使用经验和教程

2019-07-20


Hugo是Go语言的静态网站生成器,也叫静态博客生成器,是建站利器!

Hugo的优点:

1、安装方便,使用简单;

2、生成纯静态文件,适配电脑和移动端,速度快,安全性高,本地默认有备份,数据安全;

3、可以添加评论系统,相关文章,标签等功能,替代wp等博客系统!

使用Hugo的经验

1、关于网站结构(以网站00为例)

hugo默认生成的静态网站,网站结构是:www.域名.com/post/11/

所以常规教程新建页面是:hugo new post/11.md(默认要求把网站文件放在post文件夹里)

但我喜欢的网站结构是:www.域名.com/11.html(网页放在网站根目录)

所以我新建页面是:hugo new 11.md(文件11就在content文件夹里)

除此以外,还需要配置hugo/00文件夹内的文件config.toml

添加:uglyurls = “true”(意思是网页使用.html后缀)

注意

有些主题把网站文件放在content文件里正常,有些主题必须把文件放在content/post文件夹里面,否则无法识别!比如主题jane,遇到这样的问题,解决方法是在文件config.toml内添加:

[permalinks]
post = "/:filename/"

如果不添加,网站结构是www.域名.com/post/11.html

添加后,网站结构是www.域名.com/11.html,但是.md文件还是必须放在content/post文件夹内!

2、Hugo主题模板

Hugo主题模板下载网站:https://gohugo.io/zh/templates/

这里以主题jane为例讲解,主题怎么使用:

A、将主题文件夹粘贴到【00】内的文件夹themes

B、使用Notepad++等软件打开config.toml文件,添加:theme = “jane”

C、输入预览命令开启Hugo内置的服务器:hugo server

用本地浏览器打开localhost:1313即可预览网站,按ctrl+c停止预览!

hugo生成静态网站的命令是:hugo,生成速度快,整个网站都在文件夹public内,全部上传至服务器即可。

3、配置文件config.toml

配置文件就像是网站设置,很多功能是通过这个文件实现的,本文只列出重要的配置信息,常规的略去!

uglyurls = "true"   # 设置页面生成形式,将默认的网站路径/修改成.html
hasCJKLanguage = "true"  # 截取正文的前70字显示在列表页面
summaryLength = 100  # 有上一段话才生效,可以自定义首页摘要数字,设置0只显示标题
[params]
  paginate = 50 # 设置首页显示的文章数量,有的主题要有params才生效,有的主题需要去掉params才可以
[permalinks]
  post = "/:filename/"  # 设置网站结构,变域名/post/0.html为0.html

toc = true # 是否开启目录
disableHugoGeneratorInject = true #去掉<meta name="generator" content="Hugo" />

[[menu.main]] 
  name = "首页"
  weight = 10
  identifier = "home"
  url = "/"
[[menu.main]]
  name = "全部文章"
  weight = 20
  identifier = "archives"
  url = "/archives.html"
[[menu.main]]
  name = "标签"
  weight = 30
  identifier = "tags"
  url = "/tags.html"

4、实现网站的各种功能

Hugo实现相关文章,也就是猜你喜欢功能

方法请参考:HUGO怎么基于标签展示相关文章

Hugo实现最近发表文章功能

Hugo的网站分类设置

Hugo添加评论代码:

目前的评论系统有:搜狐畅言、韩国的来必力、Valine、Gitment、Gitalk、hashover、Disqus、issue、ISSO、utteranc.es

Hugo添加统计代码,推荐百度统计

方法:将统计代码粘贴到文件single.html里的文末,或者打开themes\主题rockrock\layouts\partials文件夹内的footer.html,在之前写入统计代码,底部信息也是修改这个文件。

Hugo怎么设置文章置顶

Hugo怎么添加广告

Hugo添加站内搜索

Hugo添加友情链接

5、我使用Hugo遇到的问题:

问题1:有中文就出现乱码

解决:编辑文件config.toml,必须使用Notepad++等软件;

如果先用记事本打开过,再使用Notepad点击【格式】->以UTF8无DOM模式编码,也不行!网页文件也不能使用记事本打开编辑,必须保持UTF-8编码;

问题2:预览网站不显示根目录下的.md文件内容,如果在post文件夹内可以正常显示

解决:这是主题导致的,md文件放在post中即可。如果想去掉网站的post文件夹,把网页放在网站根目录,请参考本文上面的关于网站结构!

问题3:多语言主题虽然在config中设置了languageCode = “zh-cn” ,但还不显示中文,比如Read More,去html文件里修改成中文就乱码。

解决:以主题beautiful为例,首先要在config文件中这样写:

defaultContentLanguage = "zh-cn"

然后去主题下的i18n文件夹内,修改zh.yaml文件为zh-cn.yaml

语言yaml内如果没有想要的翻译,比如原文Related Posts无中文翻译,可以自己在yaml文件内添加:

- id: relatedPosts
  translation: "相关文章"

然后把原文Related Posts修改成{{ i18n “relatedPosts” }},这样即可正常显示中文。如果直接修改成中文会出现乱码!

问题4:修改日期显示的格式

hugo主题默认的日期格式一般是美国的习惯:月日年,而且月都是英文缩写。

修改成中国的日期格式年月日方法是,dw搜索2006,将修改成2006-01-02即可

问题5:网页添加图片

本人喜欢Yu Writer软件编辑MD文件,添加网页图片很简单,到网站根目录内的static文件夹内新建文件夹img,然后放入图片。

在Yu Writer的编辑界面点击添加【图像】,然后进入img文件夹内选择图片即可。生成静态网站后,这些图片会自动复制到public文件夹内的img文件夹。

和Hugo相关的文章

Hugo安装和基本操作

本博客使用的主题jane

Hugo主题Mainroad

Hugo主题beg

Hugo主题maupassant

Hugo主题nuo

Hugo主题rockrock

添加全部文章功能:Hugo添加归档页面

HUGO实现相关文章功能:HUGO怎么基于标签展示相关文章


相关内容

  • GitBook介绍安装和使用教程
  • Hugo升级方法和遇到的问题
  • Markdown软件推荐
  • WordPress评论模块删除邮箱和网址表单
  • 麦田收集的优秀网站
  • 静态博客生成器大全和简评
  • Win10系统安装Jekyll详细教程
  • WordPress不加载自定义js和css文件
  • Hugo生成静态网页有大量空行怎么办
  • Hugo主题beautiful的优化
  • 标签

    静态网站生成器博客hugo