通过 Hugo+Nginx 部署静态网页

通过 Hugo+Nginx 部署静态网页

合适的 VPS（Virtual Private Server 虚拟专用服务器），可用于搭建代理服务器，个人网盘或是静态网站。这里浅谈一下如何通过 hugo 和 nginx 在 VPS 上部署静态网页，其中 hugo 用于生成静态网页，而 nginx 用于将网页发布到线上。

当然也可以通过诸如 Netlify 或是 Github Pages 等静态网页服务器部署个人网站，但可能由于访问量的原因，这些网站的访问速度有时候较慢。况且既然有了 VPS，部署网站不仅能够提高利用率，还能让自己的网站多一重保险。

利用 Hugo 生成静态网页

Hugo 是由 Go 语言实现的静态网站生成器，能够很快的由 markdown 文件生成静态网页。根据 Hugo中文文档，可以方便的从零开始建立自己的网站。

Hugo 项目的工作流程

• 安装 Hugo 之后，查看软件版本: hugo version.
• 在当前目录生成新的站点: hugo new site mysite.
• 如果要部署个人博客，首先选择一个合适的主题，例如 Even 和 LeaveIt。

cd mysite
git init
git submodule add https://github.com/olOwOlo/hugo-theme-even themes/even

• 根据个人信息和需要，修改主题的配置文件 config.toml。
• 通过以下命令在 content 目录创建 about 页面，在 content/post 目录写新的博文：

hugo new about.md
hugo new post/first.md

• 完善个人 about 页面，然后就可以自由的进行创作，每一篇博文都放在 content/post 目录下。
• 每次完成写作后，在终端输入命令 hugo server, 就可在 http://localhost:1313 预览由 markdown 文件生成的临时网站。
• 若预览没什么问题，直接在 mysite 根目录运行 hugo 命令，即可在目录 public 中生成待发布的静态网页。

备份项目源码

完成上面的步骤后，最好将 mysite 目录作为 git 仓库，push 到 github 或 gitlab 远端进行备份。由于 public 目录下的静态网页完全可由其余文件自动生成，因此仓库可以排除 public 目录。

touch .gitignore && echo "/public" >> .gitignore
git add .
git commit -m "first commit"
git push -u origin master

如此就完成了源码的备份。

同步静态网页到远端

上一步生成的静态网页存在本地，因此需要将 public 中的内容拷贝到远端 VPS 的指定目录。笔者 VPS 预装 Debian 系统，ip 地址为 167.179.85.48, 那么可通过以下方法 将静态网页同步到服务器:

rsync -avuz --progress --delete /path/to/mysite/public/ root@167.179.85.48:/home/wwwroot/html/

远程同步的具体问题可参考《免密远程作业》。

VPS 绑定空闲域名

建网站除了服务器还要有域名，可以从域名提供商（如 namecheap、GoDaddy 等）买一个自己喜欢的域名，如 www.rulenuts.xyz。后缀 .com, .org, .net 等域名都比较贵，.xyz 相对便宜。

以 namecheap 为例，在服务商网站的个人帐户页面进行 DNS 维护：

• 首先直接删掉预绑定的纪录，然后在 Advanced DNS 菜单中进行主机（HOST）绑定。
• 在 HOST RECORDS 中添加新记录，Type 栏选择 A Record，Host 栏填 www 或者 @ 符号，Value 栏填入 VPS 地址 167.179.85.48, TTL 刷新时间选择 20~30 min。
• 保存之后就完成了 DNS 绑定。

其中 Host 栏如果是 www 时，域名开头会加上 www., 即 www.rulenuts.xyz；否则 Host 栏为 @ 的话，域名开头什么也没有，即 rulenuts.xyz。本例采用前者。

当域名梆定 VPS 成功后，IP 地址就可以用域名代替，同步静态网页到服务器的命令就可写为：

rsync -avuz --progress --delete /path/to/mysite/public/ root@www.rulenuts.xyz:/home/wwwroot/html/

配置 Nginx 发布静态网页

Nginx 是一个高性能的 HTTP 和反向代理 web 服务器，同时也提供了 IMAP/POP3/SMTP 服务。在高连接并发的情况下，Nginx 是 Apache 服务器不错的替代品。

网站目前万事俱备，只欠东风。在服务器上，通过以下安装配置 nginx 的步骤，即可发布网站：

• 首先在本地通过 ssh root@www.rulenuts.xyz 登录 VPS，然后安装 nginx: apt install nginx.
• 在服务器目录 /etc/nginx 中生成私钥: openssl genrsa -out rulenuts.key.
• 根据私钥生成证书（公钥）: openssl req -new -x509 -key rulenuts.key -out rulenuts.crt.
• 按类似如下形式修改服务器 nginx 的配置文件: vim /etc/nginx/nginx.conf.

user  root;
worker_processes  3;
events {
    worker_connections  4096;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #access_log  logs/access.log  main;
    #tcp_nopush     on;
    keepalive_timeout  65;
    server_tokens off;
    server {
        listen  80;
        server_name  localhost;
        location / {
            root   /home/wwwroot/html;
            index  index.html index.htm;
        }
        error_page  404  /404.html;
        location = /404.html {
            root  /home/wwwroot/html;
        }
    }
    server {
        listen 80;
        server_name www.rulenuts.xyz;
        rewrite  ^(.*)$  https://${server_name}$1  permanent;    #接收到http访问请求时，重定向到https
        location / {
            root  /home/wwwroot/html;
            index  index.html index.htm;
        }
        error_page  404 /404.html;
        location = /404.html {
            root  /home/wwwroot/html;
        }
    }
    server {
      listen 443 ssl http2;
        ssl_certificate       rulenuts.crt;    #指定证书位置，默认在当前目录寻找
        ssl_certificate_key   rulenuts.key;    #指定私钥位置
        ssl_protocols         TLSv1.2 TLSv1.3;
        server_name www.rulenuts.xyz;
        location / {
            root  /home/wwwroot/html;
            index  index.html index.htm;
        }
        error_page  404 /404.html;
        location = /404.html {
            root  /home/wwwroot/html;
        }
    }
include conf.d/*.conf;
}

其中端口 80 用于配置 http 服务，端口 443 用于配置 https 服务。如此就完成了 nginx 的配置。

• 修改完成后重加载配置文件: nginx -s reload.
• 检查 nginx 服务的运行情况: systemctl status nginx.
• 重启 nginx 服务: systemctl restart nginx.

最后访问网站 https://www.rulenuts.xyz 检验网页的发布情况。