Setup a default server landing page with NGINX

In this article, I will show how to quickly create a default landing page for your server using Nginx.

As you may encountered in the past, when a client setup some A record to your server, early while the website for that domain isn't setup yet (or failing to resolve correctly), the visitor may land on another website hosted on that server, which Nginx has picked as default. As this can look unprofessional, I advise to set a default page stating that they are in the right server, but that the website is currently being setup.

To do so, you first need to edit the 'default' virtual host in Nginx, which should be located here (depending on your config):

$ vi /etc/nginx/sites-available/default

This file contains instructions on what to show by default.

There's two settings that needs to be configured:

server{
    ...
    listen 80 default;
    server_name _;
    ...
}

Another setting (which can remain unchanged) specifies where to find the default html page to render:

root /usr/share/nginx/www;
index index.html index.htm;

So if you go to /usr/share/nginx/www, you will be able to edit the index.html file, and design it as you wish.

Here's an example:

<html>
    <head>
        <title>Welcome to our server</title>
        <style>
        body{
            font-family: Helvetica, Arial, sans-serif;
        }
        .message{
            width:330px;
            padding:20px 40px;
            margin:0 auto;
            background-color:#f9f9f9;
            border:1px solid #ddd;
        }
        center{
            margin:40px 0;
        }
        h1{
            font-size: 18px;
            line-height: 26px;
        }
        p{
            font-size: 12px;
        }
        </style>
    </head>
    <body>
        <center><img src="logo.png" alt=""></center>
        <div class="message">
            <h1>Welcome to our server</h1>
            <p>The website is currently being setup under this address.</p>
            <p>For help and support, please contact: <a href="me@example.com">me@example.com</a></p>
        </div>
    </body>
</html>
< / >