合适的 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.
  • 如果要部署个人博客,首先选择一个合适的主题,例如 EvenLeaveIt
1
2
3
cd mysite
git init
git submodule add https://github.com/olOwOlo/hugo-theme-even themes/even
  • 根据个人信息和需要,修改主题的配置文件 config.toml。
  • 通过以下命令在 content 目录创建 about 页面,在 content/post 目录写新的博文:
1
2
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 目录。

1
2
3
4
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, 那么可通过以下方法 将静态网页同步到服务器:

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

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

VPS 绑定空闲域名

建网站除了服务器还要有域名,可以从域名提供商(如 namecheapGoDaddy 等)买一个自己喜欢的域名,如 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 地址就可以用域名代替,同步静态网页到服务器的命令就可写为:

1
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.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
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 检验网页的发布情况。