如何用hugo在Github上搭建静态博客，并使用自定义域名

这篇文章记录了我用静态博客框架Hugo在Github上搭建博客，使用自定义域名的过程。

静态博客框架有很多个，其中使用人数最多的是Hexo，这个是用JS写成了，有非常多的主题，唯一的缺点就是文章多起来后，编译速度比较慢。Hugo是用Go语言写成的，属于后起之秀，号称编译速度最快，我实际体验下来也觉得如是。

Hexo的开发者多是前端的程序员，看看主题就会发现，个个精美漂亮，小家碧玉。

Hugo的开发者多是后端程序员，主题也部分反应了这情况，糙汉子，五大三粗。

废话不多说，开始搭建步骤。

申请Github账号

如果没有Github账号，第一步就是要申请一个，申请Github账号地址

只需要邮箱地址，按照要求填写就可以了。

Windows安装Git

Git是版本控制工具，程序员都很熟悉，如果你电脑上没有安装Git，需要安装一个，不同的操作系统有不同的安装方法，都很简单，这里以Windows系统为例。

首先下载Git安装包, 和正常的安装方式是一样的。

如果你不懂一切都按照默认的配置，一路next点下去就可以。

安装完成后在桌面的空白区点击右键，可以看到工具栏中多出了Git GUI Here和Git Bash Here的工具，这两个是在当前目录快捷启动Git的方式。

Windows安装Hugo

Hugo是静态博客框架，下载Hugo的地址在这里。

有很多版本供下载，我这里选择hugo_0.80.0_Windows-64bit.zip，下载完毕打开压缩包，发现只有一个hugo.exe文件，在当前目录点击右键调出git bash，运行下命令

hugo version

出现下面的输出

Hugo Static Site Generator v0.65.3-211BA42A windows/amd64 BuildDate: 2020-02-23T09:58:40Z

为了方便在终端中使用hugo，把它配置到系统执行路径里，我在D盘programs下创建了一个script的目录，把这个目录添加path路径中，这样就可以在任何地方执行hugo命令了。

首先右键点击此电脑，点击属性

弹出来的系统设置中点击高级系统设置

会弹出来系统属性对话框

点击环境变量，进行path设置，这里可以选择全局设置和只对当前用户设置。这里我只对当前用户设置，找到Path，点击编辑按钮

然后点击新建，把D:\Programs\script作为值填进去，path中就多了一个寻找执行命令的路径。

现在在任何目录下打开终端执行hugo version命令都应该能看到正常的版本号输出。

创建Github仓库

接下来就是创建一个仓库，这个仓库就是静态博客在Github上存放的地方。

点击屏幕右上角头像左边的加号，下拉菜单中点击New repository创建新仓库。

创建新仓库的时候，仓库名字是有讲究的，命名格式是username.github.io，例如我的用户名是ming102，仓库名就是ming102.github.io，如下图所示。

其他地方保持不动，然后点击Create repository按钮。

使用hugo创建新网站

找一个喜欢的目录，右键快捷方式打开Git bash here，在终端中输入下面的命令创建新网站。

hugo new site quickstart

这个quickstart就是网站所在的目录，cd到themes中

cd quickstart/themes

添加一个主题

git clone https://github.com/budparr/gohugo-theme-ananke.git

然后编辑网站目录里的config.toml文件，这个配置文件描述的网站的行为，主题就是在这里配置的，添加theme = "gohugo-theme-ananke" 让刚刚下载的主题生效。

在网站目录，在终端中执行下面的命令本地看看效果。

hugo server -D

很迅速地启动了一个本地服务器，访问地址是http://localhost:1313

使用下面的命令会编译静态文件，默认情况下编译好的静态文件在public目录中。

hugo

推送public文件到github远程仓库

还记得前面创建github远程仓库成功后的页面吗，这里就是指导怎么推送本地仓库到远程仓库的。

在publish文件夹中打开终端，输入下面的命令初始化本地仓库。

git init

输入下面的命令提交文件

git add .

git commit -m ‘my blog’

注意这是两行命令，第一行是添加缓存，第二行是提交到版本库，这是Git版本管理的机制，如果想深入了解请查看Git教程。

然后是关联本地仓库到远程的Github仓库，我的例子输入下面的命令。

git remote add origin https://github.com/ming102/ming102.github.io.git

然后把提交推送到远程仓库

git push -u origin master

细心的朋友可能发现了，截图里的origin后面跟着的是main，这是因为git默认创建的分支是master，github的截图里给这个分支重命名了main，我没有重命名分支，所以还是master。

这里推送的时候可能会遇到推送的权限问题，解决办法有两个：

1、配置SSH key

配置SSH key对单用户单网站是最方便的方式。

首先生成ssh key，可以参考这篇文章，生成git ssh key

然后在github右上角用户那里点击下拉菜单，点击settings，来到设置页面

在设置页面中点击SSH and GPG keys，然后点击New SSH key

把上一步生成的ssh key的公钥填进下面的表单中，生成的文件在用户目录的.ssh中，比如我的就在C:\Users\Leon\.ssh，用编辑器打开id_rsa.pub，复制里面的内容到表单中的key中，title可以随便取个名字。

2、生成Github访问token

这种方式对多账户比较适合。

同样是在右上角的用户中打开settings页面

然后点击左侧的Developer settings。

然后点击Personal access tokens创建token

点击Generate new token.

给token设置一个名字

设置一些权限

点击Generate token

复制下来这个token

然后在本地git仓库中打开.git/config，修改下面的一行

把url修改成这样的格式：

https://youruser:password@github.com/user/repo.git

其中yourser就是用户名，password就是刚刚生成的token。

解析域名到github

首先在终端中ping一下github分配的域名的ip地址

然后要注册一个域名。

这里以Namesilo为例，这个域名服务商历史比较久了，我用的比较多，价格还算便宜，免费赠送whois域名保护，这点非常棒。

如果购买域名可以使用我的优惠码：infoliquify，会有1刀的优惠，点击下面的图片可以注册账号。

Namesilo的界面是丑了点，但不妨碍操作，买完域名后在Manage My Domains里可以进行域名解析。

找到域名，点击蓝色的地球图标进行解析

然后添加一个A记录指向刚刚得到的IP，所以记录就是下图的样子.

等待一段时间之后，域名解析就会成功

最后在github上做些配置，进入仓库的settings，找到github pages，如下图所示配置下域名

Enforce HTTPS勾选上，可以支持https。

至此，所有步骤都做完了，如果有任何问题，欢迎留言交流讨论。

欢迎转载，请注明出处：闪电树熊 » 如何用hugo在Github上搭建静态博客，并使用自定义域名