前言

本文将介绍静态网页如何部署到服务器，使用域名去访问静态网页。将页面作为附加页跳转。

静态网页在 VPS 上使用 Nginx 部署并通过域名访问，按步骤操作即可把静态 HTML/CSS/JS 页面安全、稳定地上线并启用 HTTPS。

部署的静态界面如下：

准备工作

内容简介（要点）

• 准备：拥有 VPS（SSH 可登录）和域名（可修改 DNS）。
• 流程概览：上传文件 → Nginx 配置（静态或反向代理）→ DNS 指向 VPS → 获取 HTTPS（Let’s Encrypt/certbot）→ 测试与排错。
• 切忌将站点文件放在 /root（权限问题）。证书也不应放在 /root。
• 常见问题：403（通常是文件/目录权限或位置不当）、502/504（反代后端不可用）、DNS 未生效、SELinux 权限。

具体步骤

解析域名

已有域名，能在注册商/解析服务商处新增/修改 DNS 记录。

解析 s.lincox.com到 VPS地址

文件上传VPS

本地准备好静态文件（例如 index.html / sponsor.html、静态资源文件夹）。将文件上传到VPS中，可以使用 Finalshell 直接拖动文件上传。

推荐的目录与权限（不要用 /root）
推荐把站点放在 /web，证书放在 /etc/cert。

安装nginx

安装 Nginx（若尚未安装）

sudo apt update
sudo apt install nginx

Nginx 配置示例

在 /etc/nginx/nginx.conf 创建配置：

server {
 listen 80;
 server_name s.lincox.com;
 root /web;
 index sponsor.html index.html; #文件

 ssl_certificate /root/cert/cert.pem; # 将此处替换为您的 SSL 证书路径
 sl_certificate_key /root/cert/cert.key; # 将此处替换为您的私钥路径

 location / {
     try_files $uri $uri/ =404;
 }
}

重启nginx

sudo nginx -t
sudo systemctl reload nginx

部署证书

将文件放入到cert文件夹即可。

如果你使用自有证书或把证书移动到 /etc/nginx/ssl，示例配置：
ssl_certificate /root/cert/cert.pem; # 将此处替换为您的 SSL 证书路径
sl_certificate_key /root/cert/cert.key; # 将此处替换为您的私钥路径

结语

此时就可以通过域名访问静态网页了。有不懂的评论区提问吧！

创作不易，如果您觉得有帮助，请支持LIncol29!
如有需要，请至网站地图学习本博客的教程
博客订阅：通过RSS或关注公众号[Lincol的编程世界] | 广告招租与合作请留言
本文链接：https://www.lincol29.cn/deploy-static-web
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0协议转载请注明文章地址及作者哦~