用HUGO和GitHub搭建个人博客

Created2018-10-24Updated2021-11-24

历尽千辛万苦之后的第一篇博客

HUGO配合GITHUB搭建博客(WIN 10)

前序

以前从来没写过博客，更别说自己徒手搭一个博客了，博主是一个懒得不能再懒的文笔烂到不行的理科生，但是为了养成一个及时整理自己学到的知识和资料的好习惯，赶鸭子上架，现学现卖。

协会部门的大多数人们都用了Wordpress或者Hexo+Github搭建的博客，我不知道脑子抽的什么风，有好好的教程不直接参考，反而另辟蹊径选择了Hugo，周围的人都没用过，可怜的我只能通过咀嚼百度上为数不多的文章来自己动手，幸运的是，我已经成功了~qwq

废话不多说，切入正题~

HUGO

Hugo是一个用Go语言编写的静态网站生成器，很适合专心写博文不用管服务器的人用，如果你正想在GitHub上搭建个人静态博客，不妨试一试。

1.HUGO安装

直接上链接，我安装的是v0.49.2版本的。

下载完成后，开始安装，安装完成后，将Hugo添加到环境变量中，添加后，

cmd中查看版本信息，显示以下即安装成功：

1
2
$ hugo version
Hugo Static Site Generator v0.49.2 windows/amd64

2.创建新网站

1
$ hugo new site myBlog

3.添加主题（以HUGO-FUTURE-IMPERFECT为例）

1
2
$ cd myBlog/themes
$ git clone https://github.com/jpescador/hugo-future-imperfect.git

当然你可以选择自己喜欢的博客主题，Hugo提供很多主题。

4.复制主题标准样式的配置文件及资源文件到对应路径下：

1
2
3
4
$ cd ~/myBlog/themes/hugo-future-imperfect/exampleSite
$ cp config.toml ~/myBlog/
$ cp -r static ~/myBlog/static
$ cp -r content ~/myBlog/content

5.适当修改CONFIG.TOML的内容，在/CONTENT/目录下添加新的.MD文件可以发表新文章。

6.测试网站

1
$ hugo server

打开http://localhost:1313/查看修改后的网页内容。

7.发布网站

1
hugo --theme=hugo-future-imperfect --baseUrl="https://yourname.github.io/"

此时，在~/myBlog目录下会创建一个public的文件夹，将此文件夹下的所有内容git push到github上的yourname.github.io仓库即可把博客部署到Github Pages中。

部署代码：

1
2
3
4
5
6
7
8
9
$ mkdir ~/github.io/yourname.github.io/
$ cd ~/myBlog/public/
$ cp -r . ~/github.io/yourname.github.io/
$ cd github.io/yourname.github.io/
$ git init
$ git status
$ git add .
$ git commit -m "add new article"
$ git push https://github.com/yourname/yourname.github.io.git master

然后我们的第一个Hugo个人博客就成功部署到GitHub上啦！

以后添加新文章时，只需要重新编辑~/myBlog/content上的文章内容，然后发布文章，将更新后的public文件夹内容重新提交到GitHub仓库上。