第四部分 Web 站点部署

一、静态站点生成器

让我们回到前面的 Hugo。
当我们进入到站点目录下，直接运行命令 hugo 就可以构建静态站点。

构建的静态站点文件发布在 public 目录下，我们可以直接通过浏览器打开 index.html。

然而发现我们的站点样式等都不可见，这是我们没有运行服务器导致的。
我们下面将配置部署 Web 站点并使之支持访问。

二、Web 服务器配置

1、环境配置

我们新建一个 Docker 容器，并且配置端口映射使得外部可以直接访问。

1
2
3
4
5
6

docker run -d -t \
  --name hdu-sd-tools-web \
  -p 30022:22 \
  -p 30080:80 \
  --privileged=true \
  debian:latest

我们把 ssh 使用的 22 端口映射到了宿主机的 30022 端口，把 http 使用的 80 端口映射到了宿主机的 30080 端口。
我们进入到容器内部。

1

docker exec -it hdu-sd-tools-web /bin/bash

首先安装一些必要的软件。

1
2

apt update
apt install openssh-server rsync nginx net-tools vim

配置好 ssh 服务，确保可以访问。
尝试一下是否能够启动 nginx。

1

service nginx start

2、Web 服务器配置

首先我们测试一下可用性：

1

service start nginx

浏览器打开 http://127.0.0.1:30080/。

发现可以访问。
我们创建站点目录。

1

mkdir /var/www/mygo

然后再更改站点配置文件。

1

vim /etc/nginx/sites-available/mygo

写入以下信息：

1
2
3
4
5
6
7
8

server {
	listen 80;
	server_name _;
	location /{
		root /var/www/mygo;
	}
	index index.html;
}

同时我们需要删除 Nginx 自带的示例，添加新的软链接

1
2

rm /etc/nginx/sites-enabled/default
ln -s /etc/nginx/sites-available/mygo /etc/nginx/sites-enabled/

重启 Nginx 服务。

1

service nginx restart

接下来我们通过 rsync 同步 hugo 目录下的 public 目录。

1

rsync -avz -e "ssh -p 30022" public/ root@127.0.0.1:/var/www/mygo/

可以看到我们的站点部署成功：

三、使用 CI/CD 自动构建并部署

对于 ServerLess 的部署方案，我们可以使用 CI/CD 自动化流程构建并部署，下面以 CloudFlare Pages 为例自动拉取镜像并且部署。网址：CloudFlare。
我们先在本地配置好设置文件：

1

vim wrangler.toml

写入以下内容，主要是 Hugo 的版本。

1
2
3
4

name = "hdu-sd-tools"
pages_build_output_dir = "public"
[vars]
HUGO_VERSION = "0.164.0"

push 到远端仓库。
进入到 Workers 和 Pages 页面。

创建应用程序，选择使用 Pages。

导入现有存储库：

框架预设选择 Hugo。

确定即可。

访问链接即可。

Web站点部署完成。