Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

一、Hugo 基本使用

i. 命令使用

# Hugo 安装
brew install hugo

# 新建博客
hugo new site hugo-blog

# 添加主题（修改 config.yml 配置文件中 `theme: PaperMod`）
git submodule add https://github.com/oudushu/hugo-PaperMod.git themes/PaperMod

# 新建博文
hugo new posts/web-hugo-blog.md

# 网站预览（http://localhost:1313/）
hugo server

# 生成静态文件（public 文件夹）
hugo

ii. 图片

图片资源存放在 static 文件夹中，我习惯每篇文章都新建一个文件夹存放图片，如：hugo-blog/static/image/web-hugo-blog/image-20220316160415439.png

文章中引用图片：![image-20220316160841470](/image/web-hugo-blog/image-20220316160415439.png)

二、服务端配置

云服务商：腾讯云

操作系统：Ubuntu Server 18.04.1 LTS 64bit

i. Nginx 安装

sudo apt-get install nginx

ii. HTTPS 配置

首先需要申请 SSL 证书，这里不详述。

把 SSL 证书放到 /etc/nginx/cert 路径下

# 修改配置
sudo vim /etc/nginx/sites-available/default

# 添加以下内容
server {
	# SSL configuration
	listen 443 ssl default_server;
	listen [::]:443 ssl default_server;
	ssl_certificate cert/c.pem;
	ssl_certificate_key cert/c.key;
	
	ssl_session_timeout 24h;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_prefer_server_ciphers on;

	root /var/www/html;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name _;

	location / {
		# First attempt to serve request as file, then
		# as directory, then fall back to displaying a 404.
		try_files $uri $uri/ =404;
	}
}

# 重启 Nginx 服务
sudo service nginx restart

iii. HTTP 转发到 HTTPS

# 修改配置
sudo vim /etc/nginx/sites-available/default

# 添加以下内容
server {
	listen 80;
	server_name _;
	return 301 https://$host$request_uri;
}

# 重启 Nginx 服务
sudo service nginx restart

iv. 传输 Hugo 静态文件

把 Hugo 生成的静态文件 public 文件夹下所有文件传输到服务端 /var/www/html 路径下。

这时候在浏览器访问服务器的地址，即可看到博客内容了。

v. 一键发布脚本

每次写完文章都需要重新部署静态文件，稍显繁琐，这里写了两个脚本，可以减少每次部署静态文件的工作。

客户端：

#!/bin/bash

if [ ! -n "$1" ] ;then
    echo "Aborting commit due to empty commit message."
else
    git stash
    git pull --rebase
    git stash pop
    hugo -D
    git add .
    git commit -m "$*"
    git push
fi

服务端：

#!/bin/bash

GIT_STR=$(git pull)
RES_STR="Already up to date."

if [ "$GIT_STR" = "$RES_STR" ];then
    echo "$RES_STR"
else
    echo "Updating to nginx."
    sudo rm -rf /var/www/html/
    sudo cp -R -a public/ /var/www/html/
fi

三、评论插件

评论模块是博客的重要功能，可以方便跟读者的沟通，我这里使用 utterances 插件作为评论模块。

utterances 是一款基于 GitHub Issues 的开源评论插件，配置使用非常方便。

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!

i. 新建 GitHub Public 仓库

仓库必须设置为 Public，否则插件无法访问。

iii. 安装 GitHub App

打开 utterances - GitHub App 安装并配置，选择刚刚新建的 Public 仓库。

iii. Hugo 主题配置

这里以 PaperMod 主题为例，修改 themes/PaperMod/layouts/partials/post_nav_links.html 模版：

diff --git a/layouts/partials/post_nav_links.html b/layouts/partials/post_nav_links.html
index b988641b..7352719d 100644
--- a/layouts/partials/post_nav_links.html
+++ b/layouts/partials/post_nav_links.html
@@ -16,4 +16,12 @@
   </a>
   {{- end }}
 </nav>
+
+<script src="https://utteranc.es/client.js"
+        repo="oudushu/utterances"
+        issue-term="title"
+        theme="preferred-color-scheme"
+        crossorigin="anonymous"
+        async>
+</script>
 {{- end }}

iv. 效果

四、备案

众所周知的原因，国内的网站都需要到工信部进行备案，各大云服务平台都有相关备案服务（腾讯云备案），实际操作非常简单，只需要按照提示填写资料即可。一切顺利的话一周左右即可走完流程。

我在备案过程中被打回了一次，原因是网站底部没有注明备案号。只需要在 Hugo 的主题模版中修改相关配置即可。

同样以 PaperMod 主题为例，修改 themes/PaperMod/layouts/partials/footer.html 模版：

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 8dee3280..28185b5d 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -6,9 +6,8 @@
     <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ .Site.Title }}</a></span>
     {{- end }}
     <span>
-        Powered by
-        <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
-        <a href="https://git.io/hugopapermod" rel="noopener" target="_blank">PaperMod</a>
+        & <a href="https://beian.miit.gov.cn" rel="noopener" target="_blank">粤ICP备2021054614号</a>
     </span>
 </footer>
 {{- end }}