Hugo使用经验和教程

麦田3年前 (2019-09-02)工作笔记144

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文件夹。


2022年3月12日


1、更换引擎

[markup]

  defaultMarkdownHandler = "blackfriday"


2、去掉hugo版权信息:disableHugoGeneratorInject = "true"

相关文章

国产静态博客生成器InkPaper纸小墨

在静态博客生成器/静态网站生成器领域,几乎都是国外的作品,InkPaper纸小墨则是国产的静态博客生成器,基于Go语言,生成速度很快!纸小墨自我介绍:InkPaper纸小墨是一个静态博客构建工具,可以...

Win10系统安装Hugo详细教程

Hugo是主流的静态网站生成器,也叫静态博客生成器。hugo是在本地运行的软件,在本地电脑按照规定格式写好文章,然后通过hugo可以一键生成一个优秀的网站!Hugo生成的网站是目前最新的自适应性网站,...

Hugo添加归档页面

Hugo默认没有归档页面,,需要自己单独添加一个归档页面。以hugo主题rockrock为例,方法如下:1、新建归档页面的模板;到主题目录下的layouts文件夹内新建文件夹archives到主题目录...

Hugo主题nuo的配置

Hugo主题nuo简洁大方,电脑端界面分左右两栏,手机端界面和其他所有主题类似,我很喜欢!因为麦田喜欢生成.html文件,并直接放在网站根目录下,所以这个主题修改和配置的地方比较多:1、先设置网站根目...

Hugo主题jane的配置

麦田的博客是用Hugo搭建,主题是jane。jane主题添加关于我们和友情链接页面,并添加到页面菜单:新建md文件到文件夹content,重命名为about,页面头部加入:---title: &quo...

Hugo主题hyde的配置

hyde主题是国外网友spf13的作品,大约六年前制作的,样式和界面竟然到现在还不落后,可惜我在编辑和优化过程中发现,这个主题有些文件丢失,导致功能缺失。经过半天的优化,还是有些小问题无法解决。现在是...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。