使用Hugo搭建静态博客网站

Hugo是一个由Go语言实现的静态网站生成器，优点是简单，快速部署。

之前也使用过其他平台写过博客，登录时的复杂和页面充斥的广告就熄灭了一大半写作的热情。最近了解到相较于Hexo更加简单的Hugo，便花了些时间将自己的个人博客搭好。

1. 安装Hugo

进入Hugo Releases界面下载二进制文件。我的电脑是windows10 64位系统，下载对应的压缩包。

下载到本地之后解压，Hugo.exe文件不需要安装，将它放在一个你想放的地方，然后将对应的文件路径添加到环境变量中，就可以在控制台使用Hugo的命令建设网站了。（环境变量设置——此电脑-属性-高级系统设置-环境变量-对应的Path变量中增加放置Hugo.exe的绝对路径。）

在命令行中使用hugo version，出现下图说明安装成功。

进入命令行模式（windows的cmd和git的bash都可以，我个人使用的是git bash）

使用hugo new site /MyBlog建立新的站点，new site后面的参数是站点文件夹生成的路径。执行命令之后将会在指定目录下生成MyBlog文件夹，文件夹结构如图所示。

其中content文件夹存放博客文档，static文件夹中存放图片资源。

其实现在整个静态网站已经搭建起来了，但是由于Hugo没有自带主题，所以需要先下载一个主题，我这里使用了LoveIt主题，原型是基于LeaveIt和KeepIt主题，增添了很多方便的设置。

先切换到themes文件夹下cd themes/

将主题项目克隆到该文件夹下git clone https://github.com/dillonzq/LoveIt.git

该主题的配置信息可以参照作者给出的文档 LoveIt主题/中文文档

切换回MyBlog文件夹cd MyBlog/

执行命令hugo server -t LoveIt --BuildDrafts在本地运行静态网站。

此时会报出错误

当时自己做到这一步，对这个错误有点摸不到头脑。且我将themes/LoveIt/exampleSite/config.toml文件覆盖掉MyBlog文件夹下的config.toml之后，仍然报错，但我使用其它主题却没有发生这种情况。

经过反复折腾，终于发现了原因。还需要将themes/LoveIt下的config文件夹复制到MyBlog文件夹，config文件夹中有一个_custom.scss文件，可能是因为缺少这个，主题运行不起来。

网站的一些样式布局在themes/LoveIt/resources中的最底层文件夹中进行修改（目前对css还不了解）

此时再使用上面的命令再本地运行静态网站，在浏览器中输入localhost:1313，得到如下界面就成功搭建啦

进入GitHub（吐槽一下，GitHub在中国是真滴慢），注册好自己的账号。

点击右上角的加号，选择New repository创建新仓库。

注意！这里的仓库名称十分重要！必须为你的Github用户名(全小写) + .github.io

此时仓库已建立完毕，回到MyBlog文件夹。执行命令hugo --theme=LoveIt --baseUrl="https://仓库名" --buildDrafts(这里的—buildDrafts换成-D也行)生成静态网站文件夹。

运行之后发现MyBlog文件夹下生成public文件夹。这就是我们要推送到远程仓库的文件夹。

切换到public目录cd public/

对文件夹进行初始化git init

添加文件夹中的所有文件到暂存区git add .

提交文件并附上提交信息（必须）git commit -m "我的Hugo博客第一次提交"

与远端的GitHub账户进行关联git remote add origin https://github.com/用户名/仓库名.git

将文件push到远端仓库git push -u origin master

push成功之后，就可以使用仓库名作为网址，对自己所搭的博客进行访问啦~

对于我这个小白来说，整个过程搭建下来还是很有成就感的，也遇到了不少问题。最折腾的就是LoveIt主题的报错，当时根据报错信息，以为是我是用的Hugo版本太新了，所以从0.54版一直试到了现在0.64版，花费了不少时间，结果是css设置网页格式的问题🤣，我太难了。

学习了知识还要进行输出，才能记住所学的东西，也希望自己今后能养成写博客的习惯，加油~