使用 Hugo 和 Nginx 快速搭建并部署个人博客

XOlDKING 发布于 2023/01/30

总计 1317 字｜更新于 2023/10/18｜- 次阅读｜- 条评论

本文简要介绍了如何基于 Hugo 快速构建个人静态博客网站并使用 Nginx 将其部署至远程服务器。

准备

为将个人博客部署至远程服务器，需要拥有：

服务器：本博客目前使用腾讯云轻量应用服务器；
域名。

本地搭建网站

参考 Hugo 快速开始。

安装 Hugo

本文所有操作均在 macOS 系统上进行，在其他操作系统上安装 Hugo 请参考 Hugo 安装指南。

1
2


brew install hugo
hugo version

新建网站

1

hugo new site mysite

Hugo 会在当前目录下创建一个名为 mysite 的新目录，网站项目相关内容将全部存放在该目录下。

安装主题

Hugo 提供了丰富的主题，可浏览 Hugo 主题仓库挑选并安装喜欢的主题。本博客曾经使用 LoveIt 主题，其示例网站中提供了详尽的中文文档。然而 LoveIt 项目最近一次有详细描述的更新提交于2020年，目前貌似已停止更新维护。本博客目前使用 FixIt 主题，其示例网站中同样提供了详尽的中文文档。 FixIt 主题继承自 LoveIt 主题，起初是为了修正 LoveIt 项目停止更新后遗留的代码问题，后续更新了依赖包版本并添加了众多新功能。本博客在 FixIt 主题的基础上做了一些调整美化。

1
2
3
4


cd mysite
git init
git submodule add https://github.com/dillonzq/LoveIt.git themes/LoveIt
echo "theme = 'LoveIt'" >> hugo.toml

新建博客文章

1

hugo new content posts/firstpost.md

Hugo 会在 content 目录下创建一个新目录 posts ，该目录将会用来存储所有博客文章。同时 Hugo 还会在 posts 目录下创建一个新的 Markdown 文件 firstpost.md ，用来存放博客文章的具体内容。

编辑文章内容

1

vim content/posts/firstpost.md

添加文章内容。关于 Vim 的使用可参考 CheatSheets 。关于 Markdown 的使用可参考 Markdwon 基本语法。

在本地启动网站

1

hugo serve --disableFastRender -D -e production

根据屏幕输出提示，在浏览器中输入网址 http://localhost:1313 查看网站效果。

参数 --disableFastRender 可加载主题提供的所有渲染。
参数 -D 可构建标记为“草稿”的文章和页面。
参数 -e production 可启用“评论系统”、“CDN” 以及 “fingerprint” 等效果。

此时当更新博客内容文件（如 firstpost.md ）、网站配置文件（如 hugo.toml）或主题配置（如 theme/FixIt/），Hugo 服务器会实时自动刷新网站内容。 Ctrl+D 停止本地服务器。

构建网站

1

hugo

Hugo 会创建一个新目录 public ，并将部署网站所需的一切静态资源和内容整合至该目录下。

服务器配置

本博客服务器端为 Ubuntu 操作系统。

登录服务器

1

ssh username@hostname

注意

本章节后续代码均在服务器端运行。

安装 Nginx

Nginx (engine x) 可用作HTTP和反向代理服务器、邮件代理服务器或通用的TCP/UDP代理服务器，最初由 Igor Sysoev 编写。

1

sudo apt install nginx

启动 Nginx 服务

1

sudo systemctl start nginx

在浏览器地址栏输入域名或服务器公网IP，顺利的话会看到 Nginx 的欢迎页面。 Nginx 默认网站数据存储在 /var/www/ 目录下。 Nginx 安装完成后，会在 /var/www 目录下生成新目录 html 并存储其默认欢迎页面。

关闭 Nginx 服务

1

sudo systemctl stop nginx

配置 Nginx

新建 Nginx 配置文件

1
2
3


cd /etc/nginx/sites-available/
sudo cp default mysite
sudo vim mysite

Nginx 的基本配置请参考 nginx 官方文档 - 新手指导。忽略原有注释内容，有用的配置内容为：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


server {
	listen 80;
	
	server_name mysite.com www.mysite.com;
	
	location / {
        root /root/of/mysite;
        index index.html;
        error_page 404 /404.html;
	}

    # 游戏内容单独存放
	location /games/ {
        root /root/of/mygames;
        index index.html;
	}
}

注意

请将上述代码中的 mysite.com 和 www.mysite.com 替换为自己的域名。

替换原有 Nginx 配置文件

1
2


sudo rm /etc/nginx/sites-enabled/default
sudo ln -s /etc/nginx/sites-availabel/mysite /etc/nginx/sites-enabled/mysite

运行 Nginx

1
2


sudo systemctl start nginx
sudo systemctl enable nginx

部署网站

将 Hugo 在本地生成的 public 目录上传至服务器。

注意

代码切换至本地运行。

1
2
3


scp -r public username@hostname:~/mysite
ssh username@hostname
sudo cp -r mysite /var/www/mysite

查看网站

此时可在浏览器输入域名，查看博客网站效果。

同步网站

后续在本地更新网站内容后，可使用 rsync 命令将更新内容同步至远程服务器。

1
2
3
4


rsync -anv public/ username@hostname:~/mysite/ --delete
rsync -azP public/ username@hostname:~/mysite/ --delete --backup --backup-dir=../BK-20230204
ssh username@hostname
sudo rsync -rv mysite/ /var/www/mysite/ --delete

参考资料：