如何用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。

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

欢迎转载,请注明出处:InfoLiquify » 如何用hugo在Github上搭建静态博客,并使用自定义域名

赞 (2) 打赏

评论

8+7=

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏