关于博客搭建: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(以 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.toml
drwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 content
drwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 data
drwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 layouts
drwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 static
drwxr-xr-x   2 zhangjincheng  staff   64 12 21 14:46 themes

给 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
```

以上流程走下来，咱们就在本人本地电脑搭建好了一个基于 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 是一款基于 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

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

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

前言

步骤

Hugo

even 主题

写文章和公布

GitHub Pages

Utterances

开源

References