使用Hugo的体验

2020-03-02

介绍

Hugo

Hugo是一款网站生成工具,可以将Markdown格式的文件转化成HTML格式的网页文件并且自动生成索引页,使用起来也非常简单,可以快速的创建一个静态网站并且轻松地发布到世界各地.

我曾于大概去年夏天尝试构建一个Gittable的静态博客,静态博客有优点也有缺点,但我基本上只是拿来记录知识,方便发布,方便编辑,同时也不需要数据库来实现更复杂的功能,所以我觉得一个静态的站已经足够了(前提是发布和编辑起来方便),然后Hugo官网的文档我几乎读了个遍,但最后还是因为惰性所以没有真正的去实施,那么赶在这个寒假在家有充足的时间加上心血来潮,就突然想着做个网站,用Hugo.

过程

Hugo客户端的安装

首先登陆Hugo的官方网站按照提示完成安装Hugo的命令行客户端(只有十几MB),这里呢推荐去Hugo的Github Releases页面去下载Hugo的二进制版本,而且推荐选择带有hugo_extended标识的.

hugo_extended

下载后tar xvf解压然后mvPATH,在命令行运行

hugo version

hugo_version

如果没有提示错误信息并且显示出了版本号,就说明Hugo安装成功了,可以进入下一步.

网站的创建

接下来使用

hugo new site quickstart

命令创建一个新的site,这会在当前文件夹下创建一个quickstart目录,当然也可以将quickstart替换成别的名字.接下来cd进刚创建好的网站目录,git init将该目录初始化为一个Git仓库.

主题的安装

可以访问themes.gohugo.io挑选一款自己喜欢的主题(之后我们还可以轻松地自定义主题),点开主题页面,单击Download按钮可以进入该主题的Github页面,单击Demo按钮可以打开该主题的预览网站,进入主题的Github页面后点击绿色的Clone or Download按钮复制显示出来的下载地址,然后通过该下载地址,将该主题添加为网站目录下的一个Git Submodule.

git \
submodule \
add \
https://github.com/victoriadrake/hugo-theme-sam.git \
themes/sam

以上命令太长所以我就将它分成了几行来写,主要是克隆下载地址指向的Git仓库(也就是该主题的仓库),在该主题的介绍页面我们知道该主题叫sam,于是就将它复制到themes/sam目录(按照Hugo的约定和规范,主题建议放置在themes/目录下.如果Git没有提示错误,主题就成功安装了.

众多主题任君挑选

然后我们修改config.toml文件,暂时修改网站目录下的config.toml文件就好,修改theme字段,令它等于一个字符串,字符串是主题名,与themes/目录下的文件夹名相同就行

theme = "sam"

以后关于Hugo的一些配置和主题的一些设置,很多都可以在config.toml目录修改,可以参考主题的文档页面或者Github README页面,一般会有说明.有关Hugo的资料可以进一步参看Hugo的文档页面.

创建您的第一篇文章

这样设置好主题之后我们为我们的网站创建第一篇文章

hugo new posts/post-name.md

以上命令会在contents/posts/目录下创建一个名为post-name.md的文件,并且元信息已经自动为您添加好了,只需在---的后尾添加Markdown格式的内容就可以了(Hugo也可支持其他格式的内容,例如HTML),这里建议按照惯例命名,即小写字母并且空格替换为横杠-的命名方式.

newpost.png

同时推荐VS Code的插件Insert Date String,可以方便地插入时间,这样以后不用hugo new命令也能自己用VS Code或者其他文本编辑工具方便地创建带有元信息的.md文件.

服务器启动

观察我们刚才创建的post-name.md文件可以发现元信息有draft: true,这表明这个文章当前还是处在draft阶段(默认是draft: true),即草稿阶段,可以改为draft: false,或者在使用hugo编译时加上-D选项,表示连带draft草稿一起编译.

hugo自带了网页服务器,当然hugo本身也是用Go语言编写的,在网页目录下,我们使用以下命令启动一个Hugo内置服务器

hugo server -D

hugo会自动编译用户的文章,主题,图片和JavaScript,生成一个可被直接访问的网站,hugo server命令不加参数默认的端口是:1313,在浏览器打开http://127.0.0.1:1313即可看到我们新创建的Hugo静态网站,打开速度还是非常快的,并且静态网站也非常有利与静态资源缓存,CDN和负载均衡.

hugo server还会监测网站目录下的任何变动,当有变动发生,hugo就会重新编译网站并刷新页面(生产环境下也可通过设置来关闭).

关注点

主题自定义

想要自定义主题的话建议参看主题的Github页面,按照惯例是将主题放到assets/css/或者assets/scss/目录下,另推荐参看Hugo Pipes页面,涉及到Hugo是如何处理CSS的.与此同时Hugo本身就是个非常强大的模板引擎,除了自定义CSS,您还可以自定义用于生成最终HTML文件的模板,这也是非常容易做到的.

静态资源的引用

静态资源,例如图片,视频和音乐可以放在static/目录下,然后在URL直接引用/filename.png即可,例如/filename.png就直接指向static/目录下的filename.png.

网站的发布

Hugo官网的文档页面我们看到还是有很多种发布一个Hugo网站的方式的,当然作为一个静态网站,本来也就很好部署和发布(其实就是复制文件到服务器的网页目录就行了).目前官网介绍了在GitHub,GitLab,FireBase,Netlify,Amazon S3等多种云平台的发布方式,当然也可以使用rsync发布到自己的服务器上.发布Hugo网站就像发布一个二进制程序一样简单,就是简单的文件复制。

Chrome审计结果性能分数 Chrome审计结果页面打开时间

图片是Chrome浏览器的审计得分,总得来看还是比较满意的.

数学公式的渲染

一个用来做学习笔记的网站如果不能方便地显示数学公式肯定也是不行的,对数学公式截图然后一张一张地贴上去更加不可行,这里我使用的主题hugo-notepadium非常方便地附带了KaTeX和MathJax的支持,只需在config.toml文件中按照其Github上的介绍配置[params.math]项即可

[params.math]
enable = false  
use = "katex"  # option: "katex", "mathjax". default: "katex"

下面显示的是一个块级公式

$$ F(n) = \begin{cases} F(n-1) + F(n-2) & n \geq 3 \\
1 & n = 1, 2 \end{cases} $$

这个块级公式的源码是

$$
F(n) = \begin{cases}
F(n-1) + F(n-2) & n \geq 3 \\\\
1 & n = 1, 2
\end{cases}
$$

这里显示一个行内公式(也叫内联公式)\( a^2+b^2=c^2 \)

行内公式这一行的源码是

这里显示一个行内公式(也叫内联公式)\\( a^2+b^2=c^2 \\)

输入矩阵也不在话下

$$ \mathbf{A} = \begin{bmatrix} a_{11} & a_{12} \\
a_{21} & a_{22} \end{bmatrix} $$

上面这个公式的源代码是

$$
\mathbf{A} = 
\begin{bmatrix}
a_{11} & a_{12} \\\\
a_{21} & a_{22}
\end{bmatrix}
$$

KaTeX更快,但是支持的语法没MathJax多,MathJax支持的语法更多一些,KaTex和MathJax都是很好用的数学公式显示插件.

心得体会experience

本站中期发展规划

GitBook使用心得