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

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

• 免费搭建个人网站
• 域名绑定到云服务器上

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

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

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

需要的设备和技术

• 硬件：一台云服务器-部署网站
• 技术：Nginx-配置404页面、vuepress-开发网站、域名-绑定服务器

详细步骤

效果展示

先展示一下效果

• 当用户访问一个不存在的页面，不会机械地报错，会显示如下页面👇

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搭建一个个人图床。