【纯小白博客搭建】Hugo+Github博客部署及主题（stack）美化等界面优化记录

Hugo+Github博客部署及主题（stack）美化等界面优化

效果图如下

如果你也想自己动手做一个这样的界面用来写博客等别的想法，然后你就可以往下继续看了

写在前面

自己在写markdown的记录时，有个想法就是想搭建一个博客（可以用来写学习上的技术问题，记录，想法等等），以前我知道朋友有一个博客网站，那时候还没任何想法，直到最近自己想记录这些的时候，自己也想拥有一个这种博客网站了，但一般都要租服务器啥的，还要到期了续费然后才能继续运行（不过这种个人网站确实想怎么弄就怎么弄，想要什么功能就能接着实现，奈何又要技术又要money的），对于我来说，我就想搭个界面来随时浏览下，也没必要直接上手望着你，所以先弄个这个玩玩，有了现在的这种效果。起因就是前几天在公众号上刷到一个帖子hugo博客搭建的帖子，那时已经是深夜了，看的我很很兴奋，都想要赶紧打开电脑然后开始一顿操作，然后又简单搜索了几个文章，决定就用这个了。hugo搭建然后利用GitHub构建出来界面。不过要写东西都要git到GitHub才能及时展现。（这种叫做静态网站，我自己理解是这样）

hugo博客搭建教程

第一种方案

主要参考了以下的教程
Hugo+github博客部署（博客版）
Hugo+github博客部署（视频版）
如果按照博主这样一步步操作是没问题。

第二种方案

主要参考了这个视频
15min教会你搭建
24k纯小白 Hugo+Github博客搭建教程 | 超清晰 | 超详细
我是看到第一个弄好本地端了
然后又看的第二个视频git到github以及弄好自动搭建（就是上传到github后能自动更新静态网站）。
但是在这个期间粗无百出
所以你要选择一种，一直看下去就没有问题！
不要看一个看一半，就去看另一个了。

这两个主题不一样
我没弄懂别的主题咋弄的
hugo主题很多可以自己选一个
但是要会改
一开始我是尝试了另一个主题的
然后我不会弄，劝退了
就跟着博主一步步操作是完全OK的

至此，你就可以有了一个主题那样的界面。

下面就是一些小操作了

添加浏览量和统计字数

我使用的是Hugo+Stack主题，根据Stack官方文档，在主题根目录下，
新建一个自定义文件
layouts\partials\footer\custom.html
网站引入vercount的js
然后将Vercount的js添加到该文件中。

<script defer src="https://cn.vercount.one/js"></script>

博客页面加入统计当前博客的信息
在博客详情页面
layouts\partials\article\components\footer.html
添加统计博客的访问情况。

<div class="article-details"><footer class="article-time"><div id="viewCount">{{ partial "helper/icon" "eye" }}<time class="article-time--reading"><span id="vercount_value_page_pv">loading... </span>次</time></div>
</div>

下载一个eye的svg图标文件放在assets/icons下
就可以了

同样加入字数统计在layouts\partials\article\components\details.html中合适的位置加入这个代码

{{ if .Site.Params.article.wordCount }}<div>{{ partial "helper/icon" "word" }}<time class="article-words">{{ .WordCount }} 字</time></div>
{{ end }}

然后下载一个svg图标同上。

添加评论功能

Hugo Stack中配置
先建一个仓库（我是这样做的）
或者是找一个文件夹专门用来存放评论（我猜可以）
找到配置文件： hugo.yaml
修改评论系统的provider以及[comments.utterances]节点下的repo为你自己的仓库名称。代码如下：

 ## Comments[comments]enabled = trueprovider = "utterances"   ## 修改为这个就好了[comments.utterances]repo = "xx/xx" ## 修改点，换成你的仓库名issueTerm = "pathname"label = "

然后就可以了

添加访客地图

使用 clustrmaps 实现
先去注册一个账号
然后添加网站
选择类型
添加就完事了

在根目录
/layouts/partials/sidebar/right.html
内添加 script 即可，添加后完整代码如下：

{{- $scope := default "homepage" .Scope -}}
{{- $context := .Context -}}
{{- with (index .Context.Site.Params.widgets $scope) -}}<aside class="sidebar right-sidebar sticky">{{ range $widget := . }}{{ if templates.Exists (printf "partials/widget/%s.html" .type) }}{{ partial (printf "widget/%s" .type) (dict "Context" $context "Params" .params) }}{{ else }}{{ warnf "Widget %s not found" .type }}{{ end }}{{ end }}<div style="height: 30%;width: 30%"><script type="text/javascript" id="clstr_globe" src="//clustrmaps.com/globe.js?d=xxxxx"></script>##这里要替换成你自己的</div></aside>
{{ end }}

一定要把代码替换为网站给你的代码，否则只会出现个地球，不能看到信息

至此我的部署就结束了，花费了三天时间，还是很有成就感的！
如果感兴趣
你也去操作下吧！