• Post last modified:May 19, 2020
  • Post Comments:0 Comments

Hosting a Static Webpage With NGINX Proxy Manager

Introduction

If you followed my previous posts on leveraging NGINX Proxy Manager for reverse proxies using a custom domain or Duck DNS, below is a tutorial on how to leverage NGINX Proxy Manager to also host your own (or someone else’s) static webpage as well (most often used for landing or start pages).

While NGINX Proxy Manager currently only supports proxy hosts and not hosting actual webpages, we can make some tweaks within the settings to accomplish the task.

At the end, we’ll be able to access a custom webpage hosted on our server through subdomain.mydomain.com/index.html or subdomain.duckdns.org/index.html.

If you’re looking for a non-self-hosted solution, check out my post on utilizing a free web service called Netlify to host a static webpage directly on your domain or a subdomain.

What We’ll Need

  • A server hosting NGINX Proxy Manager
  • A custom domain (preferably utilizing Cloudflare’s DNS services) or free subdomain using Duck DNS (or similar dynamic DNS provider)
  • A basic HTML webpage you’ve created or the files from someone else’s

Adding a Custom Folder to NGINX Proxy Manager’s Installation

In order to serve a custom webpage through NGINX Proxy Manager, we’re going to create a new folder in its settings/appdata to store our webpage’s configuration files and folders.

To do this, navigate to the NGINX Proxy Manager installation folder and in the root directory, add a folder titled “websites”.

If you’re using Unraid, do this by editing the Docker container’s settings and adding the custom path below. Apply and restart the container when finished.

Configuring the Webpage’s Files

Next, navigate to the “websites” folder you just created. In Unraid, you should be able to access it at the following path after setting it up as a path in the container settings:

user/appdata/NginxProxyManager/websites

In that folder, go ahead and paste the contents of your website – including an “index.html” file and all supporting files/folders referenced by your index file.

If you’d like, you can also manage your website files in a GitHub repository and clone it into the “websites” folder. This will allow you to edit your files from any computer with access to GitHub and then easily allow you to pull the updates down into the “websites” folder when you’re ready to publish them.

Configuring Cloudflare

Note: If using a free Duck DNS subdomain, skip to the next step.

Similar to setting up a reverse proxy, we need to add a CNAME record in Cloudflare for the subdomain we’d like to use to access our new webpage.

Your DNS record should look like mine below. As usual, toggle the proxy status to “DNS only” until after we finish setting the site up in NGINX Proxy Manager, at which point you can then come back and toggle it to “Proxied”.

Configuring NGINX Proxy Manager

With the Cloudflare DNS record created and our webpage files ready to be served in the “websites” folder, let’s go ahead and create a proxy host record in NGINX Proxy Manager to point the subdomain and new website address to our “index.html” file.

Create a record using the following settings.

If using your own domain, enter your subdomain.domain.com in the “Domain Names” field. If using Duck DNS, enter subdomain.duckdns.org in the “Domain Names” field.

In the “Advanced” tab, place the following code in the custom configuration box:

location / {

root /websites;

}

Save the configuration and ensure the status shows as online from the “Proxy Hosts” page.

Accessing Your New Webpage

If you followed the steps above, you should be able to access your new webpage securely from subdomain.domain.com/index.html or subdomain.duckdns.org/index.html.

If you’re using your own domain, don’t forget to go back into Cloudflare and toggle the proxy status to “Proxied”.

Conclusion

While it isn’t as easy as configuring a normal reverse proxy or as clean given your webpage requires “index.html” to be appended to the URL, it’s still an easy solution for a self-hosted webpage.

I’ll update this post if and when the NGINX Proxy Manager developers build this functionality into the software and allow us to leverage subdomains and domains similar to our reverse proxy hosts.

Let me know if you have any questions or feedback in the comments.

Enjoy!

If you’ve found this or any of the other posts on SHIFT14 helpful, please consider supporting the site through a one-time PayPal donation or ongoing support through Patreon. My goal is to continue providing in-depth guides for the technical community and the support helps justify the time and resources spent doing so.

Leave a Reply