基于 Nginx 与 Cloudflare 部署静态网站并配置 HTTPS

五一期间，我仿照 Hexo/Hugo 等框架，开发了一款静态网站生成器 Fake-Mirror。在我写下这篇博客时，Fake Mirror 的文章发布功能和部署功能已经基本完善，就写博客这件事情来说，Fake Mirror 已经完全够用了。我计划后续逐步增加文章分类、图集展示、评论等功能，最终将其打造为一款资源分享网站。

yysy，我写 Fake Mirror 的主要目的，是分享我平常搜集到的插画，博客功能属于是顺带做出来的。

Fake Mirror 的 push 指令分为两种形式，用户可在 _config.yaml 中配置是将编译后的 Web 项目推送到 GitHub 仓库还是云服务器的指定目录下，前者可结合 Vercel 等平台实现静态站点的一键部署，后者则是搭配 Nginx 等服务器实现部署。后者就需要我们为前端静态项目手动完成一些配置。

本文就是记录基于 Nginx + Cloudflare 部署静态网站，并为站点配置 HTTPS 的流程。当然肯定不细致，因为是相当基础的内容，这几年也操作过很多遍，这里简单记录下，就当是复习了。

前提是我们已将编译完成的静态前端项目放置在云服务器的 /var/www/fake-mirror 目录中。我们的目标是让公网用户通过域名以 HTTPS 方式访问该静态站点。接下来我们要完成三步操作：在 Cloudflare 配置域名解析，在云服务器配置站点 SSL 证书，最后编写 Nginx Server 配置。

Cloudflare 配置域名解析

添加两条 A 类型的 DNS 记录，分别指向 @ 和 www，IP 为我的云服务公网 IP。

在云服务器配置站点 SSL 证书

使用 Cloudflare 源服务器证书，不仅免费、兼容性好，而且支持最长 15 年有效期，不用担心过期。

打开 Cloudflare 后台 → 你的域名 → SSL/TLS → 源服务器
点击创建证书 → 保持默认配置 → 点击创建
复制公钥（PEM）内容，保存到服务器
bash
```
vim /etc/nginx/ssl/kinoko.fun.pem
```
复制私钥（KEY）内容，保存到服务器：
bash
```
vim /etc/nginx/ssl/kinoko.fun.key
```

Nginx Server 配置

按照习惯，我会将服务开放在 8086 端口，那我们就需要编写三条 Server 规则，分别对应 80、443 和 8086 端口。

监听服务器 80 端口，绑定站点域名，将所有 HTTP 访问请求 301 永久重定向至 HTTPS，强制启用加密访问。

nginx

server {
    listen       80;
    listen       [::]:80;
    server_name  kinoko.fun www.kinoko.fun;
    return 301 https://$host$request_uri;
}

HTTPS 核心服务配置，加载 SSL 证书并优化加密协议，反向代理转发请求至本地 8086 端口，处理安全访问与异常页面。

nginx

server {
    listen       443 ssl http2;
    listen       [::]:443 ssl http2;
    server_name  kinoko.fun www.kinoko.fun;

    ssl_certificate      /etc/nginx/ssl/kinoko.fun.pem;
    ssl_certificate_key  /etc/nginx/ssl/kinoko.fun.key;

    ssl_protocols        TLSv1.2 TLSv1.3;
    ssl_ciphers          ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers on;
    ssl_session_cache    shared:SSL:10m;
    ssl_session_timeout  10m;

    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    location / {
        proxy_pass http://127.0.0.1:8086;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    error_page 404 /404.html;
    location = /404.html {
        root /usr/share/nginx/html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

本地静态资源服务，绑定站点根目录托管前端文件，配置日志、404 规则与安全防护。

nginx

server {
    listen 8086;
    listen [::]:8086;
    server_name _;
    root /var/www/fake-mirror;
    index index.html index.htm;
    access_log /var/log/nginx/blog_access.log;
    error_log  /var/log/nginx/blog_error.log warn;
    location / {
        try_files $uri $uri/ =404;
    }
    location ~ /\. {
        deny all;
        access_log off;
        log_not_found off;
    }
}

检查 Nginx 规则有效性，然后重启 Nginx 服务使规则生效即可。

bash

systemctl restart nginx