Hugo是一个用Go语言编写的静态网站生成器，是一个非常适合搭建静态博客的工具。相似的生成器还有Hexo，Github自家生成器Jekyll等。相比于其他生成器，我最终选择Hugo是由于它搭建方便简单，并且页面加载速度更快更稳定👍👍👍。

选择使用Github Pages保存博客文件是因为前几天自己租的服务器到期，平时使用时经常因为跑代码需要重启服务器或者调整配置，导致博客经常无法访问。再加上自己几乎很少有使用动态数据的情况，于是最后决定将博客这部分与服务器分开，在免费的Github Pages上搭建我的小博客😊。

搭建

在为搭建做准备时我参考了几篇文章，按照思路软安装了hugo.exe，添加环境变量后即可马上使用。

使用主题

Hugo有很多官方或第三方的主题可以一键下载安装，并且所有主题都可以随时更换完全兼容（当然如果重写的话需要在自己的layout中更改，优先度高可以覆盖）。我选择的是Minimo主题，简约的风格我比较喜欢，并且搜索、词云等功能也被开发的比较完善，官方文档写的也很清晰容易上手。

插件

谷歌分析

谷歌分析是由Google所提供的个人免费的网站流量统计服务，在博客运行期间可以通过网页或者移动端使用谷歌分析Google Analytics 来查看实时或一段时间内的流量等，并有很多看着很高大上的数据分析功能。

使用时只需要申请建立一个个人免费项目，获得独一无二的追踪编号UA-XXXXXX-X，并将它添加在config.toml中。

googleAnalytics = "UA-XXXXXX-X"

然后在重写的\layouts\partials\header.html下添加代码

<!-- 添加谷歌分析插件Google Analytics -->
{{ template "_internal/google_analytics.html" . }}

即可放心食用。

完整详细清晰的步骤在这里，这个大佬把所有的情况全部列举了。

不蒜子

不蒜子是一个静态页面计数服务，可以将页面的访问次数显示在页面之上。配置很简单，但是如果想更美观的话需要重写自己的主题文件，包括图标、框架等。前端小白表示需要善用搜索功能，对着主题提供的example_sites和官方文档进行重写。

总的来说分为两步，第一步需要在一个所有网页都会加载的html部分，加入不蒜子插件的源网址，我是在header.html中加载的（虽然是在header里添加，但是不会显示出来）。

<!-- 插件：不蒜子-展示统计信息 -->
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

第二步即是在需要显示的位置单独添加需要的不同部件。

可以通过不同的id选择三种计数：

显示站点总访问量Page View(site_pv)
显示站点总访客数User View(site_uv)
显示单页面访问量Page View(page_pv)

站点数据统计

站点总访问量和总访客数的显示，我放在了footer.html中

踩坑：原则上并不需要初始化计数（清零），如果出现下面这个😵情况:

Pv:13319922次 Uv:805087次本文总阅读量4815665次

可能是由于在使用localhost调试，真正部署到站点上就没事啦😊

页面数据统计

出于美观的考虑我不得不放弃之前footer那样贴补丁的显示方法，而选择在本身的主题设计上添加数据统计一向，来显示单篇页面访问量。实现起来很简单，原始搜索定位同div的其他item，将几层嵌套的模板进行添加和替换即可。

/themes/minimo/layouts/partials/entry/meta.html
  {{ partial "entry/meta/posted-on" . }}
  {{ partial "entry/meta/author" . }}
  {{ partial "entry/meta/reading-time" . }}
  👉{{ partial "entry/meta/PageView" . }}👈

/layouts/partials/entry/meta/PageView.html
  {{ if .Site.Params.settings.showPageView }}
    <span class='PageView'>
  {{- partial "svg/icons" "PageView" -}}
      <span id="busuanzi_container_page_pv">
          View <span id="busuanzi_value_page_pv"></span>times
      </span>
    </span>
{{ end }}

实现后的样子像这样：

当然同风格的icon资源需要在网上找一些，找到后将size和color适当调整，把svg代码复制到"layouts\partials\svg\icons.html"中，模仿着之前的逻辑加个判断即可。

到此为止所有的搭建告一段落，不出意外以上的内容不需要再进行调整啦🆒

Hugo的日常使用

中文显示

为了博客对中文的显示更加友好，在第一步我在config.toml中加入了一行命令来适配：

hasCJKLanguage = true

设置文章默认模板

在根目录archetypes文件夹中添加default.md文件，设置一些信息等重复的内容，比如作者名字等等。

新建文章

hugo new new_category/_index.md
👆可在_index中加入父关系和新分类的介绍文字。（博客规范，可以不添加）
hugo new new_category/new_blog.md
👆正文

*_index.md- 的作用：定义与menu的关系，创建新分类（具体分类其实跟文件夹是妹有关系的，父子层只靠parent标签决定，归属分类只靠menu决定）

保存生成上传

（待完善）由于每次更新博客需要在源程序中使用hugo命令，之后将自动生成的public文件上传到Git Pages上。而程序和博客两个文件夹需要分开在GitHub备份，所以熟练之后可以写一个shell脚本进行更新（大概妹太大必要）

添加图片

我将图片和视频放在media文件夹中，在Hugo的设定里，只需要把文件放在根目录中static文件夹中就可以在博客内容中引用到。引用方法：

{去掉{% figure src="/media/example.png" alt="example" 
title="" link="" caption="" class="" attr="" attrlink=""%}}

关于添加图片网上居然有很多版本，而我在实际过程中发现都不能用，踩了一些坑之后发现有的地方要注意：

属性只能用figure，不能用img（至少我这边是这样）
src位置必须是右上到左下的正斜杠“/”，不能使用反斜杠“\” 必须使用%%作为模板替换文本，不能使用<>

添加高亮代码

{{去掉< highlight go>}}
# code...
{{去掉< / highlight >}}

预览

在根目录输入指令：

hugo server

模板渲染成功之后会提示：

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

即可在本地localhost调试页面布局和内容，完全不需要markdown预览插件的辅助。

隐藏关卡：Social图标的添加

大多数国外制作的主题，在社交选项中有大部分主流被墙链接可以选择，但是对于国内的一些社交网站没有跳转的途径。比如我想在社交栏中加入知乎的地址（如下图），需要在主题、插件、图标位置加入自定义的信息。

主题：在themes\minimo\data\theme.toml中加入知乎的主页链接前缀
```
[social.base]
zhihu = "https://www.zhihu.com/people/"
```

插件：在data\config\default\widgets.toml中加入知乎的主页链接前缀

[social_menu]
title = ""
platforms = ["github","twitter","instagram","email","codepen","gitlab","linkedin","telegram","google_scholar","youtube","zhihu","facebook"]
// Hugo会根据这里的排列顺序逐个显示(由于自带Facebook的图标长得太奇怪我把它扔到了最后)

图标：在layouts\partials\svg\icons.html中加入知乎logo的矢量图，在一些矢量图网站中搜索相应的svg图片，适当更改size和color后将svg信息按照逻辑加入到html文件中即可（和之前写到的页面数据统计功能中添加图标方法一样）

[social.base]
{{ else if eq "zhihu" . }}
  <svg t="1567847682896" class="icon" viewBox="0 0 1077 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1129" width="23" height="23"><path d="M313.825419 708.611652l22.527739-17.461693c7.060129-5.4972 14.012469-11.102187 21.126492-16.707175l4.85047-3.503117c2.155765 2.047976 4.203741 3.772588 5.982247 5.76667 18.539575 20.587551 37.294726 41.01342 55.56483 61.870442 21.665433 xxxxxxx" fill="#455a64" p-id="1130"></path></svg>

后记

总的来说，Hugo是一个稳定好用的静态博客搭建小帮手，它提供的渲染模板功能齐全，并且插件也有（不算多但是实用的都有），而且有一个活跃的主题社区提供和维护超级多的好看的主题，并且绝大多数Hexo等平台的主题也可以移植到Hugo中。最重要的是，搭建简单！便捷！*# 对于后端程序员来说可太方便聊- 😊 #

当然，如果需要按照自己需求更改网页布局时，还是或多或少需要些前端知识（大概

（善用重写以后换主题时可以省很多事🙋‍）

Amuro Peng

Search

Tags

Hugo的搭建与使用

搭建