关于博客搭建: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

1. 装置 Hugo(以 Mac 为例)

   $ brew install hugo

2. 创立本地文件夹，用于存储博客内容，假如文件夹叫 blog

   $ hugo new site blog

3. 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

even 主题

给 Hugo 配置 even 主题：

1. 下载主题到 blog 下的 themes 目录，在 blog 所在目录执行如下命令：

   $ git clone https://github.com/olOwOlo/hugo-theme-even themes/even

2. 应用 even 主题自带的全局配置 config.toml 笼罩 Hugo 初始装置的 config.toml

   $ cp themes/even/exampleSite/config.toml ./

3. 依据集体须要，批改 blog/config.toml 里的配置项，比方网站首页 title，右上角菜单名称，底部链接名称等。

   留神：highlightInClient 配置项和 pygments 结尾的配置项不能都启用，都启用会导致 markdown 里插入代码块的时候款式谬误。highlightInClient 应用默认的 false 即可，不必批改。

4. 应用 even 主题自带的博客文章默认配置 themes/even/archetypes/default.md 笼罩 Hugo 初始装置的archetypes/default.md，在 blog 根目录执行如下命令：

   cp themes/even/archetypes/default.md ./archetypes/

   批改 archetypes/default.md 里的默认配置项，把 comment 和 toc 都设置为 true，用于开启文章评论性能和文章主动生成目录性能。

5. 启动本地 Hugo server，查看博客成果，本地地址：http://localhost:1313/

   $ hugo server

写文章和公布

1. 在 blog 目录，应用 hugo new post/some-content.md 创立 markdown 文件

   $ hugo new post/test.md

2. 公布：在 blog 根目录执行 hugo 命令或者 hugo -t even 命令，主动依据 md 文件生成文章的动态页面，动态页面公布在根目录的 public 文件夹上面

   $ hugo

3. 启动 Hugo server，查看网站最新成果，在 blog 根目录执行如下命令：

   $ hugo server

GitHub Pages

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

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

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

2. 把本地博客 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

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

Utterances

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

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

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

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

3. 重新部署博客，就能够在文章上面看到评论区了，正如本篇文章最上面的评论区一样。

   $ hugo
   $ hugo server

4. 留神 ：每次本人本地的批改，须要先执行hugo 命令来更新 public 下的内容，再进入 public 目录把批改 push 到 GitHub 上，能力保障互联网拜访的内容是更新后的，否则批改只会停留在本地。

开源

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

References

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