关于博客搭建:Hugo-even-GitHub-Pages-Utterances搭建个人博客

前言

多年前基于Jekyll和GitHub Pages搭建的博客款式总是出问题，调研了下目前最风行的动态博客次要有3个：

hexo：基于Node.js，开源地址：https://github.com/hexojs/hexo
Hugo：基于Go实现，开源地址：https://github.com/gohugoio/hugo
gridea：国产，集体保护，开源地址：https://github.com/getgridea/gridea

Hugo目前GitHub上star最多，我关注的几个技术博主根本都选用的Hugo，再加上Hugo基于Go实现，有bug我也能够思考本人解决，于是果决抉择了Hugo。

最终成果参考https://jincheng9.github.io/

步骤

Hugo

装置Hugo(以Mac为例)
```
$ brew install hugo
```
创立本地文件夹，用于存储博客内容，假如文件夹叫blog
```
$ hugo new site blog
```

blog目录下的文件内容如下：

drwxr-xr-x   9 zhangjincheng  staff  288 12 21 14:46 .drwxr-xr-x  17 zhangjincheng  staff  544 12 21 14:46 ..drwxr-xr-x   3 zhangjincheng  staff   96 12 21 14:46 archetypes-rw-r--r--   1 zhangjincheng  staff   82 12 21 14:46 config.tomldrwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 contentdrwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 datadrwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 layoutsdrwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 staticdrwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 themes

even主题

给Hugo配置even主题：

下载主题到blog下的themes目录，在blog所在目录执行如下命令：
```
$ git clone https://github.com/olOwOlo/hugo-theme-even themes/even
```
应用even主题自带的全局配置config.toml笼罩Hugo初始装置的config.toml
```
$ cp themes/even/exampleSite/config.toml ./
```
依据集体须要，批改blog/config.toml里的配置项，比方网站首页title，右上角菜单名称，底部链接名称等。
留神：highlightInClient配置项和pygments结尾的配置项不能都启用，都启用会导致markdown里插入代码块的时候款式谬误。highlightInClient应用默认的false即可，不必批改。
应用even主题自带的博客文章默认配置themes/even/archetypes/default.md笼罩Hugo初始装置的archetypes/default.md，在blog根目录执行如下命令：
```
cp themes/even/archetypes/default.md ./archetypes/
```
批改archetypes/default.md里的默认配置项，把comment和toc都设置为true，用于开启文章评论性能和文章主动生成目录性能。
启动本地Hugo server，查看博客成果，本地地址：http://localhost:1313/
```
$ hugo server
```

写文章和公布

在blog目录，应用hugo new post/some-content.md创立markdown文件
```
$ hugo new post/test.md
```
公布：在blog根目录执行hugo命令或者hugo -t even命令，主动依据md文件生成文章的动态页面，动态页面公布在根目录的public文件夹上面
```
$ hugo
```
启动Hugo server，查看网站最新成果，在blog根目录执行如下命令：
```
$ hugo server
```

GitHub Pages

以上流程走下来，咱们就在本人本地电脑搭建好了一个基于Hugo + even主题的博客网站，然而不能被互联网拜访。

咱们能够借助GitHub Pages把本地博客的public文件夹内容公布到GitHub上，就能够通过互联网拜访博客了。

在本人GitHub上创立一个新的repo，命名为username.github.io，其中username是你的GitHub的用户名。比方我的GitHub个人主页是：https://github.com/jincheng9，那我的username就是jincheng9。

把本地博客public目录下的内容push到GitHub的 username.github.io工程里，留神，要把git repo地址替换为你本人的。

$ cd public$ git init$ git remote add origin git@github.com:jincheng9/jincheng9.github.io.git $ git status$ git add .$ git commit -m 'add blog'$ git push origin master

步骤2执行完之后，public文件夹下的内容就被推送到了你的GitHub上的username.github.io这个repo里了。
期待几分钟，就能够通过https://username.github.io/ 拜访你的博客了。

Utterances

咱们还心愿给本人的博客文章增加评论性能，用来和读者互动，utterances 是一款基于 github issues 的评论零碎，十分清新，还能够防止了 disqus 的广告以及加载问题。

装置utterances：点击https://github.com/apps/utterances，依照提醒操作，把下面寄存博客的repo的权限给utterances。操作实现后，在username.github.io这个repo的Settings->Integrations里能够看到utterances。

批改博客的全局配置config.toml。

[params.utterances]       # https://utteranc.es/    owner = "jincheng9"              # Your GitHub ID    repo = "jincheng9.github.io"     # The repo to store comments

重新部署博客，就能够在文章上面看到评论区了，正如本篇文章最上面的评论区一样。
```
$ hugo$ hugo server
```
留神：每次本人本地的批改，须要先执行hugo命令来更新public下的内容，再进入public目录把批改push到GitHub上，能力保障互联网拜访的内容是更新后的，否则批改只会停留在本地。

开源

欢送关注公众号：coding进阶，学习更多实用常识
开源地址：https://github.com/jincheng9

References

https://github.com/olOwOlo/hu...
https://jdhao.github.io/2021/...