使用Hugo和GitHub搭建免费静态Blog

“搭建一个属于自己的Blog，快来行动吧！”

2021年的第一天，在xdm的帮助下完成了静态blog的搭建。话不多说，教程奉上。

安装Hugo

首先介绍一下Hugo，Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

搭建静态blog的第一步就是在本地安装Hugo，安装流程请移步官方文档。安装过程中如遇需要使用Homebrew及Linuxbrew镜像，请移步镜像使用帮助。

安装完成使用 hugo version 命令来检查是否安装成功。

生成站点

使用Hugo快速生成站点，比如希望生成到/workspace/website/path路径:

$ hugo new site /workspace/website/path

这样就在/workspace/website/path下生成了站点。

创建文章

创建一个about页面：

$ hugo new about.md

about.md自动生成在content/about.md。内容如下：

---
title: "About"
date: 2021-01-01T21:49:06+08:00
---
正文内容

内容是Markdown格式，---之间的内容是YAML格式，根据你的喜好可以换成TOML格式（使用++++标记）或者JSON格式。

创建第一篇文章，放到post目录下，方便之后生成聚合页面。

$ hugo new post/first.md

使用编辑器打开post/first.md，即可编辑内容。

安装皮肤

到皮肤列表挑选一个心仪的皮肤，找到相关的GitHub地址，在站点根目录下创建themes目录，在themes中把皮肤git clone下来，这里以Hyde皮肤为例：

$ mkdir themes
$ cd themes
$ git clone https://github.com/spf13/hyde.git

运行Hugo

在你的站点根目录执行Hugo命令行进行调试：

$ hugo server --theme=hyde --buildDrafts

在浏览器中打开：http://localhost:1313，即可浏览效果。

部署到GitHub Pages

部署到GitHub Pages也比较简单。大致可分为以下几步：

  1. GitHub上创建仓库
  2. 站点根目录执行hugo命令生成最终页面
  3. 使用git init将站点初始化为一个git仓库
  4. 修改config文件
  5. 将本地代码push到刚创建的仓库的master分支
  6. 指定GitHub上仓库github pages设置项的source
  7. 浏览器里访问

因为有不同的部署方式，所以不仔细展开。具体流程请参考github部署官方文档。

到此，一个简单的静态站点就搭建完毕了。