Nginx not loading custom maintenance page under @maintenance directive?

Question

I am trying to use Nginx to redirect to a custom maintenance page, with it's own CSS/JS, when a maintenance file exists on the system. However, it just shows me the standard Nginx 503 redirect page?

location / {
        if (-f /var/www/html/maintenance_mode_on){
            return 503;
        }
        root /var/www/html/my_normal_site/;
        index index.html index.htm;
}
error_page 503 @maintenance;
location @maintenance {
        root /var/www/html/maintenance/;
        index maintenance.html;
}

Answer 1

It may be better to use a slightly different approach, for example:

error_page 503 /maintenance/;
location /maintenance/ {
    root /var/www/html;
}
location = /maintenance/ {
    internal;
    root /var/www/html;
    index maintenance.html;
}
location = /maintenance/maintenance.html {
    internal;
    root /var/www/html;
}

The html document will be returned with a 503 error code as previously.

But any resource files will be available using a relative URL (e.g. css/example.css)

Or using an absolute URL (e.g. /maintenance/css/example.css)

Answer 2

I managed to get it working mostly using the below code. However, the CSS file is being served but not applied. It's correctly being served as text/css as well. The static images are served and rendered correctly, so it's just the CSS giving issues. Any idea what the problem could be ? Thanks.

error_page 503 @maintenance;
location @maintenance {
    root /var/www/html/maintenance/;
    try_files $uri /maintenance.html =503;  
}