Hugo 是基于 Go 语言的静态网站生成器。
我们可以把Hugo放到服务器上提供Web服务;还有一种免费的方法—把Hugo网站代码托管到GitHub上,利用其GitHub Pages的功能,建立静态网站。
下面实际操作是在Windows环境中。
1. 下载Hugo安装包
下载路径:https://github.com/gohugoio/hugo/releases
1)安装包解压后直接运行hugo.exe。
说明:Hugo有二进制安装和源码安装两种方法,二进制显示是最快的。
中文参考文档:https://www.gohugo.org/
官方参考文档:https://gohugo.io/getting-started/
说明:对于Windows系统,在后续启动Hugo服务器时有报错,找到解决办法是下载扩展版(应该是有些Hugo主题在基础版上不支持),所以建议下载扩展版。
2)将Hugo安装包的解压路径(即hugo.exe的存放路径)添加至环境变量->系统变量->Path
说明:存放路径最好是英文的,以避免程序运行出错。
3)验证安装
在cmd窗口执行hugo version,如果显示版本,则表示安装正确。
hugo version
说明:官方文档是说输入hugo help来检查安装是否成功了,此时会输出hugo相关的命令指导。
2. 创建站点
cd进入到我们想要保存网页的文件夹中(这里是我们上篇文章创建在线文档网站之一—学习使用GitHub中创建的abc文件夹,已托管到GitHub上)。
d: //将磁盘路径切换到D盘
cd Web //进入D盘的Web文件夹
cd abc //进入Web文件夹下的abc文件夹
hugo new site myblog //创建myblog站点
此时可以看到abc文件夹下创建了一个myblog文件夹,并包含以下文件。
其中config.toml是网站的配置文件,content文件夹放Markdown文档,data文件夹放数据,layouts文件夹放网站模板文件,static文件夹放图片、css、js 等静态资源,themes文件夹存放主题。
3. 设置站点的主题
根据上面屏幕的提示信息我们也知道,接下来需要下载主题。
hugo主题地址:https://themes.gohugo.io/
1)下载主题
比如我选择了下面这个主题。
单击“Download”跳转到主题地址:https://github.com/alex-shpak/hugo-book
单击Code,将该主题代码下载下来。
首先进入创建站点文件夹themes目录,然后有两种下载方式:
- 使用Git Bash Here窗口,执行git clone https://github.com/alex-shpak/hugo-book.git命令
git clone https://github.com/alex-shpak/hugo-book.git
- 单击Download ZIP,将文件夹保存在themes目录,并解压。
2)为站点设置主题
在站点的主目录找到config.toml并编辑其中的theme参数,将其修改为下载的皮肤的名称(如果没有此行参数,请按下图添加),如theme = "hugo-book-master"。
3)为站点添加页面
进入保存网页的文件夹并执行命令。
hugo new post/myfirst.md //content目录下新建post目录并创建myfirst.md文件(新建目录是为了利于网站页面的聚合)
可以看到content\post目录下已生成myfirst.md文件。
使用Markdown编辑软件(例如MarkdownPad)编辑myfirst.md文件:
注意:draft参数值需要为true,否则这个页面会被忽略。
---
title: "Myfirst"
date: 2021-07-05T17:13:35+08:00
draft: true
---
这是我的第一篇博客。
4. 启动hugo服务器
在站点的主目录下执行hugo server启动服务器
hugo server
此时又遇到了错误:)
这个报错是由于Hugo安装造成的,重新下载扩展版,解压覆盖至原来hugo.exe的保存路径(之所以这么做是牵涉到之前设置环境变量),并运行hugo.exe后执行hugo server,服务启动成功。
5. 访问hugo站点
站点显示如下。
目前本地的Hugo页面是工作正常了。接下来我们要关联Hugo和GitHub。