静态网页部署到服务器(从零到一)

感谢UniApi对本博客的的大力赞助。 创作不易,如果您觉得有帮助,请 支持LIncol29! 为了让我能够继续创作更好的内容,你也可以选择订阅博客的 VIP ,包年VIP仅需10元/年,所有VIP内容免费观看

前言

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

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

部署的静态界面如下:

PixPin_2025-08-26_16-13-59

准备工作

内容简介(要点)

  • 准备:拥有 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协议转载请注明文章地址及作者哦~

评论

  1. Linux Chrome
    5 天前
    2025-8-27 8:56:09

    既然都用到服务器了 那就用动态页面吧😂

    • 博主
      刘郎
      Windows Chrome
      4 天前
      2025-8-27 16:09:08

      单独挂一个静态页面做展示。

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇