WordPress post URLs return un-styled Index of root in Nginx

Overview

I deployed a fresh droplet today and configured it with LEMP and installed WordPress to host both my portfolio and a WordPress project. The directories are set up as such:

Root /var/www/domain/

WordPress var/www/domain/wordpress/

I followed DigitalOcean’s tutorials to set up the Ubuntu 22.04 server, install LEMP, configure SSL, and install WordPress.

At this point, everything is working except two crucial items:

• WordPress pages and posts return an un-styled Index of the root site
• 404 redirects are not working, but instead, browser error, The site can't be reached, is returned.

Nginx Config

I’ve determined the issue lies within my nginx configuration file, but I’m new to nginx, so I’m not sure where to begin. I chose nginx over apache (where before I have hosted these website with apache) because I will be hosting a laravel project, too.

At the moment, my server is configured as such:

server {
    server_name domain www.domain;
    root /var/www/domain;

    index index.php;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.1-fpm.sock;
    }

    location ~ /\.ht {
        deny all;
    }

    location /wordpress {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location = /favicon.ico { log_not_found off; access_log off; }
    location = /robots.txt { log_not_found off; access_log off; allow all; }
    location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
        expires max;
        log_not_found off;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    error_page 404 /404.php;
    location = /404.php {
        root /var/www/domain;
        internal;
    }
    error_page 500 502 503 504 /50x.php;
    location = /50x.php {
        root /var/www/domain;
        internal;
    }
}

server {
    if ($host = www.domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    if ($host = domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    server_name domain www.domain;
    return 404; # managed by Certbot
}

The WordPress configuration is outlined in step 3 of the tutorial.

Additionally, I attempted to add error page handling by following the DigitalOcean tutorial, which can be seen in the code above, but as mentioned, 404 pages are returned as The site can't be reached.

.htaccess vs Nginx config

In researching this issue, I’ve learned that .htaccess files are principally for configuring Apache servers. At the moment, I have a rules to redirect to HTTPS, remove .php extensions, and point to a 404 page.

RewriteEngine On

# Redirect
RewriteCond %{HTTPS} off
RewriteCond %{HTTP:X-Forwarded-Proto} =http
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

# Remove extensions
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}\.php -f
RewriteRule ^(.*)$ $1.php [NC,L]

ErrorDocument 404 /404.php

Reviewing the Nginx config, I believe certbot is taking care of the redirect, but I’m not sure how to translate the other rules for the Nginx config.

WordPress permalinks

I’ve also read in many answers and suggestions for similar issues to review permalink setting in the WordPress dashboard. I have mine set to domain/wordpress/sample-post/. I’m not sure if there should be a corresponding setting configured in the Nginx config.

For reference, A Zaker’s posted question is similar to mine, but the offered solution unfortunately did not solve my issue.

I appreciate any help.