NGINX: How to Serve Static File and Content

Let’s assume you’ve created a web-site, and you want to serve it from your server to the world wide web. Here is what NGINX comes to the play.

NGINX is a potent tool to create reverse proxies to your applications from your domains. But NGINX is not used exclusively for proxying. It also supports Serving Static Content, and this tutorial will walk you through how to set up your NGINX server to Serve Static Content.

In this tutorial, I will be using emredemircivi.com as the example domain so you need to write your domain name instead of emredemircivi.com.

Creating a directory and copying our static content into it

Create a directory under /var/www called emredemircivi.com by executing the following command:

mkdir /var/www/emredemircivi.com

You can place your files anywhere you desire but /var/www is commonplace for the web-site files.

After creating the directory copy your static contents to the directory.

Configuring NGINX to our Serve Static Content

We need to create a file with the same name as our domain under /etc/nginx/sites-available directory.
Execute the following command to open a text editor to the file that we’re going to create:

nano /etc/nginx/sites-available/emredemircivi.com

After the editor pops, add the following text in it:

server {
  # IPv4 listening port
  listen 80;
  # IPv6 listening port
  listen [::]:80;
  # Domains that NGINX should be waiting for
  server_name emredemircivi.com www.emredemircivi.com;

  # The directory name that contains our static content
  root /var/www/emredemircivi.com;

  # The index file that NGINX should serve when the browser requests / as the path.
  index index.html;

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

Edit the configuration file accordingly to your needs.

Creating symlink to our configuration file

Now that we created our configuration file under the /etc/nginx/sites-available directory, we need to create a symlink to the /etc/nginx/sites-enabled directory. Execute the following command to create a symlink to our configuration file that we just created:

ln -s /etc/nginx/sites-available/emredemircivi.com /etc/nginx/sites-enabled/emredemircivi.com

Testing NGINX configuration

Our NGINX configuration is complete but we have one more step to do: making sure if we did everything correctly or not. Execute the following command to make NGINX validate our new configuration files:

nginx -t

You should be seeing an output similar to this:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

If you got some errors you need to double-check your configurations with the tutorial.

Restarting NGINX

After testing our NGINX configuration we’re ready to restart our server, you can achieve it by executing the following command:

service nginx restart

And we’re done! 🎉🎊

Questions and Thanks

Thanks for reading, and please consider sharing the tutorial.
If you have any questions in your mind or encountered a problem, please feel free to leave a comment or send me a mail about it.
For more useful tutorials, please visit my home page also.