使用 Hugo 搭建个人博客

作为一名前端开发者，平时可能会经常需要用到个人博客来记录学到的新知识来进行消化和方便后续的回顾，在这里就介绍一下如何使用 Hugo 这个工具来快速搭建一个模板化的、维护起来较为简单的个人博客。当然，在这里我们还需要使用到 GitHub Pages。

GitHub Pages

首先我们可能需要了解一下什么是 GitHub Pages ：

GitHub Pages 是一项静态站点托管服务，它直接从 GitHub 上的仓库获取 HTML、CSS 和 JavaScript 文件，通过构建过程运行文件，然后发布网站。

也就是说通过 GitHub 的这项服务，我们可以通过这样的方式来展示自己的 个人主页（*这里只讨论个人主页，当然他也可以用来托管组织或项目页面），他的域名是 http(s)://<username>.github.io：

Create: 在 GitHub 中创建一个名为 <username>.github.io 的仓库
Clone: 把这个仓库拷贝到本地
Edit: 在仓库中创建 index.html 等你所有想要的可以用来构建网站的文件
Push: 将这个本地仓库 Push 到 GitHub 中
Success：打开 <username>.github.io 即可访问

Hugo

简单来说， Hugo 是一个由 GO 语言实现的静态网站生成器，我们可以把 Hugo 生成的页面部署到 GitHub Pages 服务中。

我们可以参照 Hugo 的官方文档来指导我们操作。

第一步：安装 Hugo

这里以 Windows 版本为例，其他操作系统的安装方法可以参照官方文档。

点击链接，下载对应的压缩文件，比如 hugo_0.59.1_Windows-64bit.zip
解压缩，将 hugo.exe 文件放到一个安全的目录下（最好不要有空格），比如 C:\Software\hugo\ 中
此电脑 - 右键 - 属性 - 高级系统设置 - 高级 - 环境变量 - 双击 PATH - 将 C:\Software\hugo\ 添加进去

第二步：创建一个网页（生成器）

打开命令行，在喜欢的地方执行:

1

hugo new site <username>.github.io-creator

上面的 <username>.github.io-creator 可以根据自己的需要进行更改，这一步是相当于创建了一个 Hugo 网页生成器

第三步：添加默认主题

执行命令：

1
2
3
4


git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
cd <username>.github.io-creator
echo 'theme = "ananke"' >> config.toml

第四步：添加文章

1

hugo new posts/我的第一篇文章.md

第五步：修改文章

将会打开这样的一个 markdown 文件，在下面编辑好了之后，将 draft 改为 false 然后保存。

1
2
3
4
5
6
7
8


---
title: "我的第一篇文章"
date: 2019-03-26T08:47:11+01:00
draft: true
---
# 大家好！

这是我的第一篇文章

第六步：修改配置

打开 config.toml，将会出现：

1
2
3
4


baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"

将其中的语言改为 zh-Hans，标题改为自己喜欢的标题即可

第六步：运行 Hugo Server

1

hugo server -D

他会提示：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


                   | EN
+------------------+----+
  Pages            | 10
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Total in 11 ms
Watching for changes in /Users/bep/quickstart/{content,data,layouts,static,themes}
Watching for config changes in /Users/bep/quickstart/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

这样整个博客就将会被部署到本地服务器 http://localhost:1313/ 上面了

第七步：发布到 Public

执行

1

hugo -D

hugo 就会创建一个新的目录，叫做 Public ，接下来我们要做三件事：

在 <username>.github.io-creator 里面创建 .gitignore 文件，在里面添加 /public/
打开 public 目录，将 public 目录单独上传到 GitHub 中名为 <username>.github.io 中
打开 http://<username>.github.io 就可以看到自己的博客啦

注意 GitHub Pages 服务会默认将 <username>.github.io 仓库中的 Master 分支里的内容放到页面上，GitHub Pages 相关的设置可以在仓库的 Settings 中的 GitHub Pages 里找到