DEV Community

Cover image for Setting up Nginx to serve static content on any Linux-based server.
KARTHIK NARAYAN
KARTHIK NARAYAN

Posted on

Setting up Nginx to serve static content on any Linux-based server.

Fun Fact: It works on my machine!

NGINX :

Welcome, brave adventurer, to the whimsical world of web hosting! Today, we embark on a quest to install and configure the legendary Nginx web server on our trusty Linux machine. Prepare yourself for an epic journey filled with code and commands.

1: Update System Packages:-

Before we dive into the magical realm of Nginx, we must ensure our Ubuntu system is up-to-date. Imagine your system's package list as a treasure map, and you want the latest X mark the spot.

sudo apt update
Enter fullscreen mode Exit fullscreen mode

2: Installing Nginx :-

Now, the time has come to summon the great Nginx onto your server. With a swift command, it shall be done.

sudo apt install nginx
Enter fullscreen mode Exit fullscreen mode

Boom! Nginx is now part of your server's fellowship

3: Activate and Auto-Start NGINX :-

let's start Nginx with a few commands that'll make our server up and running.

sudo systemctl start nginx
sudo systemctl enable nginx
Enter fullscreen mode Exit fullscreen mode

You can check nginx status using the following command,
sudo systemctl status nginx

4: Alter Firewall :-

If you've got a fire-breathing dragon (firewall) guarding your server, let's give her some food (traffic).

sudo ufw allow 'Nginx Full'
Enter fullscreen mode Exit fullscreen mode

5: Test Nginx :-

Open a web browser and enter your server's public IP address or domain name. You should see the default Nginx welcome page. This indicates that Nginx is correctly configured and running on your server.

6: Server Configuration :-

By default, Nginx serves content from the /var/www/html directory. If you want to host a website or application, you'll need to configure Nginx to serve your content. This is typically done by creating server blocks (similar to virtual hosts).

Now let's look at how to serve static content,

A.Create the sites-available Configuration File:

Open your terminal and use a text editor to create a new Nginx configuration file for your site in the sites-available directory:

sudo nano /etc/nginx/sites-available/example.com
Enter fullscreen mode Exit fullscreen mode

B.Add the Configuration for Hosting Static Files:

Add the following configuration to the file, adjusting it as needed for your specific setup:

server {
    listen 80;
    server_name example.com www.example.com;

    # Define the root directory for your static files
    root /var/www/mywebsite/static;

    # Configure access to static files
    location / {
        try_files $uri $uri/ =404;
    }

    # Additional configuration options can be added here

    # Define access log and error log locations
    access_log /var/log/nginx/example.com.access.log;
    error_log /var/log/nginx/example.com.error.log;

    # Add any other server-specific configurations here

}
Enter fullscreen mode Exit fullscreen mode

Here,

  • server_name specifies the domain names associated with your site.
  • root points to the directory where your static files are stored.
  • The location/ block is used to configure how Nginx handles requests for static files. It uses the try_files directive to check if the requested file exists and serves it, or returns a 404 error if not found,

Save the configuration file and exit the text editor.

C.Create the Symlink in sites-enabled:

Now that you've created the sites-available configuration, you need to create a symbolic link (symlink) in the sites-enabled directory to activate this configuration.

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
Enter fullscreen mode Exit fullscreen mode

7: Final check and Reload :-

Before applying the new configuration, you should test it for syntax errors,

sudo nginx -t
Enter fullscreen mode Exit fullscreen mode

Reload Nginx to apply the new changes,

sudo systemctl reload nginx
Enter fullscreen mode Exit fullscreen mode

Until next time, keep coding and keep smiling, because development is all about making the magic happen! ✨
Happy coding!!!

Top comments (0)