如何用hugo 搭建博客

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%chocolateyin

然后使用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 参数需要解释一下：

参数	作用
appId	这是在 10.2 节得到的App Id
appKey	这是在 10.2 节得到的App Key
notify	用于控制是否开启邮件通知功能
verify	用于控制是否开启评论验证码功能
avatar	用于配置评论项中用户头像样式
placeholder	评论框的提示符

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

然后将上面的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 博客中加入了评论功能。