使用Hugo建个网站

引言

本来我是信誓旦旦的腰使用Jekyll做个人网站的，但是无奈我折腾了好久没成果。真的是縗的一塌糊涂啊……或者说是年纪大了？不太适应Jekyll的模式了吗？总之，就是搞了很久没没有成功。尝试来尝试去，最后，选定了 Hugo ，建立了自己的静态网站……不但因为Hugo简单易用，还是因为Hugo在windows上只需要一个执行文件，安装很便捷，很利于在公司摸鱼写Blog。

选择Hugo的过程，也让我一度暗自感叹，技术路线的选择是多么重要！不适合我这个“中老年人”真的不行啊……而那些不知道什么是技术路线的企业也是很悲哀的，因为这在试错上就要经历很久很久的发展啊……叹气……

建站的主要依赖的工具

因为是静态网站，我最先想到的就是Jekyll + Github的方案，最终选定Hugo之后，就打算基于以下几个开源软件（服务）实现：

• Netlify ：用于提供站点解析，以及https链接
• Hugo ：静态网站的技术底层
• Github ：托管静态网站代码与Blog文件的地方

为什么选择这样的方式？完全因为这三者都是免费的，可以很简单的实现一个稳定的静态网站。

基础环境安装

在Fedora上安装简直太简单了，就是：

1

$ sudo dnf install hugo

而Windows上安装，也比较简单。直接从 Hugo Releases 下载对应版本的Windows程序的zip压缩文件，然后解压道某一个目录文件夹中，然后，添加这个文件夹目录到系统变量的 PATH 变量下。

这样就基本安装好了Hugo，相比Hexo、Jekyll的安装，真的要简单很多很多……那是不是安装好了，测试方法也很简单，就是使用Hugo的版本查询：

1
2

$ hugo version
Hugo Static Site Generator V0.39.1 .....

构建网站

按照官方的最简洁的 快速入门 的介绍，是使用命令 hugo new site quckstart 快速完成建立一个在quickstart文件夹下的新网站。这里使用的命令是：

1

hugo new site [path] [flags]

对于 [flags] 这个变量，一般很少能用到，如果感兴趣可以使用 hugo new site --help 进行查询。

说成普通话， hugo new site [place] 就是在当前目录里面建立一个文件夹“place”，并且生成网站需要的必要文件。如果place是一个路径，那么就是在这个指定的路径里建立网站。这就更好理解了。

例如，我在当前文件夹下，建立了一个叫做“myblog”的网站文件夹，可以使用 tree 命令查看到我们新建的网站结构：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

$ tree myblog
myblog
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

6 directories, 2 files

这就是一个空的网站了。每一个文件、文件夹的作用我就不一一介绍了，可以在官网 文件结构介绍 中全部了解到，这里我只说我认为重要的内容：

• themes 文件夹就是存放主题的地方。每个主题一个独立的文件夹，可以从官网的指引下载，基本上都需要使用使用 git clone 从github上下载。
• content 文件夹就是存放blog文章的地方。使用hugo提供的 hugo new 工具可以很快速的创建新的blog。
• config.toml 是全站的配置文件。

当然其他文件夹文件并非不重要，在刚建立网站初期可以稍微不那么关心其他的内容，找到一个心仪的主题，按照主题的安装提示完成安装就可以，以致对于其他文件夹的效果，在初期我认为并不必要完全了解。

使用主题

说到主题，从官网的 Themes 网页上，可以找到支持Hugo的几乎所有主题，然后跟着主题安装指导，一步步很简单就能安装好主题了。

这里我比较推荐 Even 和 Jane ，我个人也更喜欢Jane主题的样式，感觉很简洁漂亮。

一般的主题都可以使用类似如下的Git方式安装：

1

$ git clone https://github.com/olOwOlo/hugo-theme-even.git themes/even

然后，Copy某一个 config.toml 到网站文件夹的根目录下，然后按照自己的需求修改这个config就基本上完成了安装。Jane主题的 安装指引 做的比较全面，不太熟悉的人可以看看这个再转换到不同主题上。

另外，按照Hugo官方的手册，更推荐使用以下命令安装主题：

1

$ git submodule add https://github.com/olOwOlo/hugo-theme-even.git themes/even

或者：

1

$ git clone --depth 1 --recursive https://github.com/olOwOlo/hugo-theme-even.git themes

我觉得使用 git submodule add 比较好，上传到Github之后就能直接链接到对应的仓库中。

开始写文章

前面简单说到了，使用 hugo new 命令就可以新建Blog文章了。举例来说：

1

$ hugo new posts/first-post.md

就是在 content 文件夹下，建立一个新的文章，文章保存在文件 first-post.md 中。

直接生成的文章中都会带有一个 Front Matter ，主题说明中会带有一部分介绍，大部分还是需要仔细读一读官方的 Front Matter Formats 的介绍。

如果你不熟悉Yaml或者Toml，那么我建议你可以先学习一下这些教程：

• Yaml语法教程
• Toml官方说明

虽然我个人很喜欢toml的形式，但是，yaml还是用的人更多，这点不知道在未来会有什么改变。

最后，你写完了文章，要怎么预览呢？或者改变了网站的主题后，要怎么测试呢？这对于Hugo还真的一点也不难：

1

$ hugo server -D

然后，就能在浏览器中使用 http://localhost:1313/ 或者 http://127.0.0.1:1313/ 来浏览效果了。具体的 hugo server 用法可见官方网址： hugo server 。

所有的Hugo命令都能在 Commands | Hugo 中找到，在Bash中使用 --help 的选项，就能查询所有命令的使用方法了，一般的命令模式：

1

$ hugo [command] --help

想在Bash中找到所有Commands，直接使用 hugo --help 就可以了。

上传网站(极简Git教程)

测试了网站没问题了，就可以上传Github了。如果你已经是Git的老用户，这就不需要看了。如果你还是新手，可以跟我一起来试试我这个快速Git入门，不过是无理论入门。这也是一个最简单的Github入门使用教程了。有机会再整理一个详细的Git教程好了。

上传网站内容到Github一共分6步：

第1步 ：安装Git

如果你不确定自己的电脑是否安装了Git或者安装之后不知道安装是否完成，都可以使用git的版本查询完成确认：

1
2

$ git --version
git version 2.16.2.windows.1

有如上的类似结果，就说明你的git安装好了。如果没有，则需要重新安装。可以在 Git官网 下载安装，如果不确定怎么安装可以看看 Git安装指引 。

安装了Git，为了保证Git和Github能无密码链接，也就是为后续工作减轻输入密码的工作量，可以使用SSH的方式建立连接，如果你觉得每次输入用户名密码不碍事，也可以忽略这个操作：

1
2
3

$ ssh-keygen -t rsa -C "email address"
Generating public/private rsa key pair.
......

使用这个命令 ssh-keygen 一般会要求确认位置和输入密码，这写操作都使用回车就能解决。

然后就是把建立的这个public rsa key放到Github上，先用命令提取key：

1

$ cat ~/.ssh/id_rsa.pub

复制提取的全部信息，粘贴到 Github SSH Keys管理页面 上。起一个好记忆的名字一保存就完成了SSH链接的工作。

第2步 ：建立仓库

在目标文件夹内，使用Git仓库生成命令就能在本机建立仓库。但这并不完全，还需要在Github上同样建立一个仓库。我们详细来说，如果在本机需要对文件夹 Zoll 建立Git仓库的花，需要在这个文件的根目录下，操作：

1

$ git init

在Github上，选择“New Repository”链接，起一个名字，点击”Create repository“按钮就完成了相关的建仓库操作，Github要求的后续操作，暂时都可以不必关心，例如建立README文件之类，因为在推送文件之后，这些就会自然完成。

第3步 ：添加文件

在之前 Git init 的“Zoll”文件夹下，运行一下命令：

1

$ git add .

就可以把所有文件都添加到我们新建的本地仓库中了。这个操作很简单，也就完成了添加文件的操作。

第4步 ：完成更新提交

添加完文件并不是完成，还需要为刚刚添加的文件建立一个说明，也就是完成对更新的提交，因为每次我们改变文件都是对文件的一次更新，这一步就是确认这个更新。

1

$ git commit -m "text"

其中的“text”就是这次更新的提示文字，可以根据需要自己填写。

第5步 ：连接远程与本机

我们分别在本机和Github（远程）都建了仓库，现在我们把他们关联起来：

1

$ git remote add origin https://github.com/[user]/[zoll].git

这样就可以把本机文件推送到Github上了。其中的链接，就是在Github新建的仓库的Github的链接，替换为你的，回车命令之后本地与远程的链接就完成了。

第6步 ：推送文件

最后的推送也比较简单：

1

$ git push -u origin master

完成推送，Github上就能看到我们上传的文件了。

在第一次完成上述步骤之后，以后的网站更新就只需要完成第3、4、6步所涉及的步骤。

使用Netlify发布网站

要把网站发布到Netlify也并不复杂，为什么不使用Gihub本身提供的 Pages 功能呢？一方面无法完美解决HTTPS的连接问题，另一方面，Github本身链接速度也不够快，最大的问题是仓库名称限制很大，让人觉得很麻烦。

把Github的网站仓库连接到Netlify，并使用Netlify加载网站，就要简单容易很多，这也是我选这个的主要原因之一。

在Netlify上发布Hugo网站一般可以分4步：

第1步 ：添加Netlify配置文件

需要在网站根目录下，创建一个 netlify.toml 的文件，文件内容根据官方说明，需要有以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

[build]
publish = "public"
command = "hugo --gc --minify"

[context.production.environment]
HUGO_VERSION = "0.84.3"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"

[context.split1]
command = "hugo --gc --minify --enableGitInfo"

[context.split1.environment]
HUGO_VERSION = "0.84.3"
HUGO_ENV = "production"

[context.deploy-preview]
command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.deploy-preview.environment]
HUGO_VERSION = "0.84.3"

[context.branch-deploy]
command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"

[context.branch-deploy.environment]
HUGO_VERSION = "0.84.3"

[context.next.environment]
HUGO_ENABLEGITINFO = "true"

保存文件之后，就可以上传到Github，初步的配置就算完成了。

第2步 ：连接Github与Netlify

注册Netlify之后，就可以把保存网站的Github仓库连接到Netlify了。这一步出奇的简单，如果网站经过本地测试，那么，在netlify上就可以顺利完成初步发布了，完成了发布会给一个随机网址，直接打开这个网址就能看到你的网站了。

第3步 ：使用自己的域名

大部分情况还是使用自己的域名，会更便于推广自己的Blog，也便于给同学查看。点击 Add Custom Domain 按钮，输入你的域名，然后，把Netlify的随即地址在你的DNS管理器上添加A记录，就可以了。

第4步 ：启用 https 链接

设置好私人域名之后，就可以使用SSL/TLS certificate中的设置开启https了，或者你也可以上传自己的SSL证书。这都几乎是傻瓜式的操作。最后，不要忘记打开Force HTTPS的选项，保证网站持续在https的环境中。

到这里，你就已经拥有了自己的静态Blog网站了。似乎很复杂，但一步步尝试，还是很简单的。更详细的Hugo在Netlify的操作，可以看Hugo官方的指引说明： Host on Netlify 。

后话

每次更换网站，都很纠结，有一个好看的、漂亮的个人网站真的又容易又不容易。希望这是未来很长一段时间都不需要我再费精力的一个Blog，也希望我能写的更多，做的更多，变得更有趣一些吧。

20210701的更新

最近全面重新修改了这个Blog，修复一些问题是一方面，还有就是修改了自己的简历，修改 SimpleIntro 的模板做了一个可以容纳更多内容的简历模板 ExtendIntro 。希望大家能多多捧场哈~哈哈哈哈~