1，Hugo 简介

搭建个人博客有很多开源的博客框架，我们要介绍的框架叫作Hugo。Hugo 是一个基于Go 语言的框架，可以快速方便的创建自己的博客。

Hugo 支持Markdown 语法，我们可以将自己的文章写成Markdown 的格式，放在我们用Hugo 创建的博客系统中，从而展示给他人。

2，Hugo 安装

在Windows 中安装

首先安装choco 包管理器，需要在管理员权限下运行cmd，执行如下命令，一般情况下，网络没有问题，即可安装成功：

powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"

# 设置环境变量
SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

然后使用choco 安装 hugo：

# 墙内安装可能较慢
choco install hugo -confirm

在MacOs 中安装

使用brew 命令安装：

brew install hugo

在Linux 中安装

在Linux 中可以使用snap 命令来安装，执行下面命令：

snap install hugo

如果你的Linux 是Ubuntu 版本，也可是使用apt 来安装，但是apt 安装的hugo 可能不是最新版的，这样会对一些hugo 主题的使用有所限制。

这种情况下我们可以到hugo 的github 仓库 中下载安装包来安装hugo，我们可以下载一个deb 包，然后使用如下命令安装：

dpkg -i <package.deb>

3，Hugo 是否安装成功

不管在哪种系统中安装Hugo，最后我们都可以使用下面命令查看Hugo 是否安装成功：

>>> hugo version
Hugo Static Site Generator v0.68.3-157669A0 linux/amd64 BuildDate: 2020-03-24T12:05:34Z

4，使用Hugo 创建博客

hugo 安装成功后，使用hugo new site 命令创建博客：

# 博客项目的名字为myblog
hugo new site myblog

这个命令会创建一个名为myblog 的目录，这就是博客的根目录。目录结构如下：

├── archetypes
│   └── default.md
├── config.toml         # 博客站点的配置文件
├── content             # 博客文章所在目录
├── data                
├── layouts             # 网站布局
├── static              # 一些静态内容
└── themes              # 博客主题

5，下载博客主题

创建好博客项目后，接下来是下载hugo博客的主题，这里有很多主题，我们可以任意挑选，比如我们选择了bootstrap4-blog 主题。

然后在myblog 目录下使用git 命令来下载主题：

git clone https://github.com/alanorth/hugo-theme-bootstrap4-blog.git themes/hugo-theme-bootstrap4-blog

下载下来的主题会放在themes 目录中：

└── hugo-theme-bootstrap4-blog
    ├── CHANGELOG.md
    ├── LICENSE.txt
    ├── README.md
    ├── archetypes
    ├── assets
    ├── exampleSite         # 本主题示例内容
    |      ├── content      # 示例博客文章
    │      |-- static
    │      |-- config.toml  # 本主题配置
    ├── i18n
    ├── images
    ├── layouts
    ├── package-lock.json
    ├── package.json
    ├── screenshot.png
    ├── source
    ├── theme.toml      
    └── webpack.config.js

5，使用主题

我们将exampleSite 目录中的内容，复制到博客根目录myblog 中，在myblog 目录中执行命令：

cp themes/hugo-theme-bootstrap4-blog/exampleSite/* ./ -r

6，启动博客服务

使用下面命令启动服务：

>>> hugo server
                   | EN  
-------------------+-----
  Pages            | 29  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          | 12  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 60 ms
Watching for changes in /home/wp/t/myblog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /home/wp/t/myblog/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

可以看到服务默认会在占用1313 端口，在浏览器中访问http://localhost:1313/ 地址。

如果一切正常，我们会看到一个像hugo 官网演示一样的页面。

7，编写博客文章

你只需要按照Markdown 的格式编写自己的文章，让后将写好的文章放在myblog/content/posts，hugo 就会读取到这片文章，并将这片文章展示在比的博客中。

与普通Markdown 文章不一样的地方是，你需要在文章的开头写入如下结构的内容，这些内容包含在三杠线之间，在三杠线下边就是Markdown 的正文了：

---
文章属性内容
---
Markdown 正文

这些内容会被hugo 解析，作为当前文章的一些属性，常用的属性如下：

---
title: "文章标题"           # 文章标题
author: "作者"                # 文章作者
description : "描述信息"    # 文章描述信息
date: 2015-09-28            # 文章编写日期
lastmod: 2015-04-06         # 文章修改日期

tags = [                    # 文章所属标签
    "文章标签1",
    "文章标签2"
]
categories = [              # 文章所属标签
    "文章分类1",
    "文章分类2",
]
keywords = [                # 文章关键词
    "Hugo",
    "static",
    "generator",
]

next: /tutorials/github-pages-blog      # 下一篇博客地址
prev: /tutorials/automated-deployments  # 上一篇博客地址
---

比如我们编写了这样一篇文章，文件名为my-first.md：

---
title: "我的第一篇博客"                         
author: "我是作者"  
description : "这是描述信息"    
date: 2018-09-18        
lastmod: 2018-09-26             

tags : [                                    
"我的博客标签",
]
categories : [                              
"我的博客分类",
]
keywords : [                                
"我的博客关键字",
]
---
这里是Markdown 正文

我们将myblog/content/posts 目录中的其它文章删除，只留我们自己的这篇文章：

.
└── my-first.md 

使用hugo server 重启博客服务，打开地址http://localhost:1313/，可以看到现在的博客中，只有我们自己写的文章：

8，Hugo 的配置文件

博客的配置文件可以根据自己的需要修改，我们来看下Bootstrap v4 主题的配置文件，这些配置属性通过应为并不难理解。

配置文件中属性的内容我做了修改，并添加了中文注释。

# Hugo 属性设置

# 网站地址
baseurl = "https://localhost:1313/" 

# 网站语言
languageCode = "en-us"              

# 网站title
title = "我的博客"                   

# 主题的名字，这个要跟myblog/themes 目录中的子目录的目录名一致
theme = "hugo-theme-bootstrap4-blog"    

# home/category/tag 页面显示的文章数 (Default: 10)
paginate = 5

# home/category/tag 页面用于摘要的字数 (Default: 70)
summaryLength = 50

# optionally override the site's footer with custom copyright text
# copyright = "Except where otherwise noted, content on this site is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by-sa/4.0/)."
#googleAnalytics = "UA-123-45"
#disqusShortname = "XYW"

# 博客链接的路径格式
[permalinks]
  posts = "/:year/:month/:title/"
  page = "/:slug/"
  
# 顶部栏
[[menu.navbar]]
  name = "首页"
  url = "http://localhost:1313"

# 侧边栏，可以写多个
[[menu.sidebar]]
  name = "新浪"
  url = "https://www.sina.com"

[[menu.sidebar]]
  name = "Github"
  url = "https://github.com"

# Theme 属性设置
#
[params]
  # Site author
  author = "作者名"

  # homepage 页描述信息
  description = "我的博客站点"

  # Show header (default: true)
  #header_visible = true

  # Format dates with Go's time formatting
  date_format = "Mon Jan 02, 2006"

  # verification string for Google Webmaster Tools
  #google_verify_meta = "BAi57DROASu4b2mkVNA_EyUsobfA7Mq8BmSg7Rn-Zp9"

  # verification string for Bing Webmaster Tools
  #bing_verify_meta = "3DA353059F945D1AA256B1CD8A3DA847"

  # verification string for Yandex Webmaster Tools
  #yandex_verify_meta = "66b077430f35f04a"

  # Optionally display a message about the site's use of cookies, which may be
  # required for your site in the European Union. Set the parameter below to a
  # page where the user can get more information about cookies, either on your
  # site or externally, for example:
  #cookie_consent_info_url = "/cookie-information/"
  #cookie_consent_info_url = "http://cookiesandyou.com"

  # show sharing icons on pages/posts (default: true)
  #sharingicons = true

  # Display post summaries instead of content in list templates (default: true)
  #truncate = true

  # Disable the use of sub-resource integrity on CSS/JS assets (default: false)
  # Useful if you're using a CDN or other host where you can't control cache headers
  #disable_sri = false

  [params.sidebar]
    # Optional about block for sidebar (can be Markdown)
    about = "我的博客[简单示例](http://localhost:1313/)."

    # 侧边栏显示最近几条文章 (Default: 5)
    #num_recent_posts = 2

  [params.social]
    # Optional, used for attribution in Twitter cards (ideally not a person
    # for example: nytimes, flickr, NatGeo, etc).
    # See: https://dev.twitter.com/cards/types/summary-large-image
    twitter = "username"

# Default content language for Hugo 0.17's multilingual support (default is "en")
# See: https://github.com/spf13/hugo/blob/master/docs/content/content/multilingual.md
#DefaultContentLanguage = "en"

# Languages to render
#[languages.en]
#[languages.bg]
  # Bulgarian date format is dd.mm.yyyy
  #date_format = "02.01.2006"

# vim: ts=2 sw=2 et

我们使用以上配置文件，再次启动服务，访问http://localhost:1313，得到如下页面：

9，将博客部署在Git

建好自己的博客后，需要将其部署在公网，才能让别人访问。有两种方法：

• 购买自己的域名和服务器，将博客部署在上面。
• 将博客托管在github。

这里我们介绍第2中方式。

9.1，准备要部署的内容

要想讲博客部署在github，首先得有一个github 账号。

然后需要在github 上创建一个仓库，用于存放我们的博客系统。

我们创建的仓库的名字应该是这种格式"账户名.github.io"，比如我创建的仓库的名字为"codeshellme.github.io"。

要向仓库中存放的内容，使用hugo 命令生成的。在myblog 目录下，运行hugo 命令：

>>> hugo
                   | EN  
-------------------+-----
  Pages            | 14  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     |  1  
  Processed images |  0  
  Aliases          |  6  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 74 ms

执行成功后，会生成一个public 目录，这个目录中的内容，就是我们博客系统的所有内容，我们需要将这些内容存放在Git 仓库中。

9.2，部署到Git

按照如下步骤将博客内容上传到Git 仓库，在public 目录下，依次执行下面的命令：

# 初始化仓库
git init

# 将所有内容添加到git
git add .

# 提交到git 本地
git commit -m "我的博客第一次提交"

# 关联到远程git，注意这里需要写你自己的git 地址
git remote add origin https://github.com/codeshellme/codeshellme.github.io.git

# 推送到远程git
git push origin master

9.3，访问公网地址

经过上面的步骤，我们就将博客内容托管在了github。那么你的博客的地址将是这种格式：

https://仓库名字

例如我的博客地址就是：

https://codeshellme.github.io

访问这个地址就可以访问我们的博客了。

如果以后我们写了新的博客，则需要再使用hugo 命令生成新的内容，再将新的内容push 到Git 仓库就可以

10，给博客添加评论功能

博客有了评论功能才能跟读者互动，所以评论功能对一个博客来说也是必不可少的。

可用的评论系统插件 有挺多的，比如：

• 畅言
• LiveRe
• gitment
• gitalk
• Valine

在这几个之中，我比较喜欢的Valine，因为其它几个在评论的时候都需要读者登录账号，授权等等，我觉得这样比较麻烦，会让读者失去评论的兴趣。

而Valine 不需要读者登录就可以对文章进行评论，而且简洁高效。下面我们主要介绍如何使用Valine 来为我们的博客系统增加评论功能。

10.1，注册登录leancloud 账号

首先需要注册并登录一个leancloud 账号，登录账号之后，进入下一步。

10.2，创建一个应用并记录App Id 和App Key

登录账号后，进入控制台，点击创建应用来创建一个应用

应用创建好以后，进入刚刚创建的应用，点击左下角的设置>应用Key，就能看到你的APP ID和APP Key了：

10.3，创建两个存储

因为评论和文章阅读数统计依赖于存储，所以要建立两个存储 Class，分别命名为Counter （用于计数功能）和 Comment（用于评论功能）。

左边栏找到并点击 存储，点击 创建Class:

10.4，为应用添加安全域名

左边栏点击设置，找到安全中心，点击后会看到安全域名设置框，输入博客使用的域名，点击保存即可，比如我这里填写的是：

https://codeshellme.github.io/

到这里为止，leancloud 账号的设置工作才算完成。接下来我们来看如何使用Valine 评论系统。

11，使用Valine 评论系统

这里我写一个简单html 页面，来演示如何使用Valine，代码如下：

<!DOCTYPE html>
<html>

<head>
    <title>Valine 评论测试</title>
    <!-- 引入Valine js 脚本 -->
    <script src='https://unpkg.com/valine/dist/Valine.min.js'></script>
</head>

<body>
    <h2>下面就是Valine 评论系统</h2>
    <hr />
    <div id="vcomments"></div>
    <script>
    new Valine({
        el: '#vcomments',
        appId: 'xxx',   // 这里填写 10.2 节我们得到的App Id
        appKey: 'yyy',  // 这里填写 10.2 节我们得到的App Key
        notify: false,
        verify: true,
        avatar: 'robohash',
        placeholder: '在这里评论'
    })
    </script>
</body>

</html>

这里面有一些Valine 参数需要解释一下：

可以参见这里查看更多配置项。

然后将上面的html 代码放在Apache 中（也可以是其它Web Server），从浏览器中访问这个html 页面，是这样的：

我们就可以在这里评论了。

我们可以进入下面的页面，对这些评论内容进行管理，比如删除评论：

12，在Hugo 博客中使用Valine

有些Hugo 主题就自带了Valine 评论功能，我们只需要在配置文件config.toml 中配置就可以使用。

一般配置代码就是下面的样子：

[params.valine]
    enable = true   # 打开评论功能
    appId = 'xxx'
    appKey = 'yyy'
    notify = false  
    verify = true 
    avatar = 'robohash' 
    placeholder = '评论一下，说明你来过~'
    visitor = true

但是，有些Hugo 主题并没自带Valine 评论功能，这就需要我们自己在Hugo 框架中加入Valine 代码。

比如，我们本篇文章中使用的hugo-theme-bootstrap4-blog 主题，就没有Valine 评论的功能。

我们需要稍微了解一下hugo-theme-bootstrap4-blog 主题的代码结构和语法，才知道在哪里添加怎样的Valine 代码。

下面跟着我的步骤，为hugo-theme-bootstrap4-blog 主题添加Valine 评论功能。

12.1，编写comments.html 文件

编写代码，文件名为comments.html，并将代码放入themes/hugo-theme-bootstrap4-blog/layouts/partials/ 目录中，代码如下（如果看不懂也没有关系，照着做就行）：

{{ if and .IsPage (ne .Params.comment false) -}}

  <!-- valine -->
  {{- if .Site.Params.valine.enable -}}
  <!-- id 将作为查询条件 -->
    {{- if .Site.Params.valine.visitor -}}
      <span id="{{ .RelPermalink | relURL }}" class="leancloud_visitors" data-flag-title="{{ .Title }}">
        <span class="post-meta-item-text">文章阅读量 </span>
        <span class="leancloud-visitors-count">0</span>
        <p></p>
      </span>
    {{- end }}
  <div id="vcomments"></div>
  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src='//unpkg.com/valine/dist/Valine.min.js'></script>
  <script type="text/javascript">
    new Valine({
        el: '#vcomments' ,
        appId: '{{ .Site.Params.valine.appId }}',
        appKey: '{{ .Site.Params.valine.appKey }}',
        notify: {{ .Site.Params.valine.notify }},
        verify: {{ .Site.Params.valine.verify }},
        avatar:'{{ .Site.Params.valine.avatar }}',
        placeholder: '{{ .Site.Params.valine.placeholder }}',
        visitor: {{ .Site.Params.valine.visitor }}
    });
  </script>
  {{- end }}

{{- end }}

12.2，使用comments.html 文件

在themes/hugo-theme-bootstrap4-blog/layouts/_default/single.html 文件中加入下面代码，引入comments.html 文件：

{{ partial "comments.html" . }}

你在single.html 的什么位置加入这行代码，Valine 评论区就在页面的什么位置。

12.3，修改配置文件

在配置文件config.toml中加入下面配置项：

[params.valine]
    enable = true   # 打开评论功能
    appId = 'xxx'   # 填写正确的appId
    appKey = 'yyy'  # 填写正确的appKey
    notify = false  
    verify = true 
    avatar = 'robohash' 
    placeholder = '评论一下，说明你来过~'
    visitor = true  # 开启计数功能

重启博客系统，访问博客中的文章，可见文章中就出现了Valine 评论区：

到此为止，我们就在Hugo 博客中加入了评论功能。