程序员晚枫

V1

2022/06/20阅读:20主题:嫩青

如何自定义好看的404页面?云服务器+Nginx中加3行配置搞定,小白也能流畅操作

如何自定义好看的404页面?云服务器+Nginx中加3行配置搞定,小白也能流畅操作

大家好,这里是程序员晚枫。 前面3期文章,我们一起搭建了一个个人网站:https://www.python-office.com

到这里我们的网站就可以访问了。但是为了追求完美,我们一起考虑一种情况:

用户在使用的过程中,会不会输错网址里的某几个字母呢?这时候用户第一反应不会是自己输入错误,而是:是不是网站崩溃了?

所以这种情况下,就需要我们来自己设计一个404网页,来给用户一个适当的报错页面,而不是直接报一个打不开的错误。

需要的设备和技术

详细步骤

效果展示

先展示一下效果

image.png
image.png

nginx配置

全部的nginx配置如下,重点时line64-line70这几行。

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    gzip  on;
    
     upstream vuepress{
        server 115.159.63.27:8080;
    }    

    server {
        listen       80;
        server_name  python4office.cn;

        location / {
            # root   /python4office.cn/public;
            # index  index.html index.htm;
            proxy_pass http://127.0.0.1:18001;
        }
        error_page  500 502 503 504 404          /404.html;
        # 承接上面的location
        location = /404.html {
            # 放错误页面的目录路径。
            root   /static-url/error-html;
        }
         
    }

    server {
  listen 443 ssl;
  server_name  python-office.com;
        #证书文件名称
        ssl_certificate python-office.com_bundle.crt; 
        #私钥文件名称
        ssl_certificate_key python-office.com.key; 
        ssl_session_timeout 5m;
        #请按照以下协议配置
        ssl_protocols TLSv1.2 TLSv1.3; 
        #请按照以下套件配置,配置加密套件,写法遵循 openssl 标准。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
        ssl_prefer_server_ciphers on;

  location / {
    # proxy_pass http://127.0.0.1:18001;
                root /python-office.com/dist;
                index index.html index.htm;
  }

        location /api/img-cdn {
        proxy_pass http://127.0.0.1:18005/api/img-cdn;
        # root /img-cdn/public;
        # index index.html index.htm;
        }

        # 开启error_page
        error_page  500 502 503 504 404          /404.html;
        # 承接上面的location
        location = /404.html {
            # 放错误页面的目录路径。
            root   /static-url/error-html;
        }
         }

}

我的404页面

我的404页面代码,也开放给大家:GitHub

写在后面

如果本期内容有疑问,欢迎大家在评论区和我交流哟~

下一期,我们写一写如何运用自己的域名+服务器+nginx搭建一个个人图床

分类:

前端

标签:

HTML

作者介绍

程序员晚枫
V1