感谢UniApi对本博客的的大力赞助。 创作不易,如果您觉得有帮助,请 支持LIncol29! 为了让我能够继续创作更好的内容,你也可以选择订阅博客的 VIP ,包年VIP仅需10元/年,所有VIP内容免费观看
前言
本文将介绍静态网页如何部署到服务器,使用域名去访问静态网页。将页面作为附加页跳转。
静态网页在 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; # 将此处替换为您的私钥路径
结语
此时就可以通过域名访问静态网页了。有不懂的评论区提问吧!
既然都用到服务器了 那就用动态页面吧😂
单独挂一个静态页面做展示。