Create a new Site in Nginx

Create a new Site in Nginx

In this article we will see how to create a new site in nginx

First, see the role of each file, and folder.

Directories and files related to nginx

/etc/nginx/sites-available

This directory stores individual configuration files for each virtual host. These configuration files can be enabled by creating symbolic links to them in the /etc/nginx/sites-enabled directory.

/var/www

This is a common directory where web content is stored. Each website's files, including HTML, CSS, JavaScript, and other assets, are typically placed in subdirectories within this root directory

/etc/nginx/sites-enabled

The sites-enabled directory is used to enable or disable specific virtual hosts by creating symbolic links to the configuration files located in the sites-available directory. By creating a symbolic link from sites-enabled to a configuration file in sites-available, you effectively tell NGINX to include and apply that configuration when the server is started or reloaded. Conversely, removing the symbolic link disables the virtual host without deleting its configuration.

/var/log/nginx

NGINX's log files are stored in this directory. These logs provide valuable information about server activity, requests, errors, and other relevant events.

/var/cache/nginx

This directory can store cached data, which can improve the performance of websites by serving static content without repeatedly generating it.

/etc/nginx/nginx.conf

The main configuration file for NGINX, which includes settings that apply globally to the server, worker processes, and other core components

/usr/share/nginx

The directory is a common location where NGINX might store default web content, or we can have custom error page of 500,400 .

Create a new Site

To create a new we need to do the following things

Install nginx if not already

# Update the package repository
sudo apt update
sudo apt install -y nginx
# Verify nginx is running by
sudo systemctl status nginx.service 
# if not running enabled and start
sudo systemctl enable nginx.service && sudo systemctl start nginx.service

Define the root of the site

sudo mkdir /var/www/sitename.com

Add hello world HTML page inside sitename.com

sudo vim /var/www/sitename.com/index.html

and paste the below content to follow along, you can also keep your project files and folders.

<html>
    <head>
        <title>Welcome to sitename.com!</title>
    </head>
    <body>
        <h1 style =  {{color: "green"}} >The sitename.com is working!</h1>
    </body>
</html>

Configuration of the site

sudo vim /etc/nginx/sites-available/sitename.com

add below content

server {
        listen 80;
        listen [::]:80;

        root /var/www/sitename.com;
        index index.html index.htm;

        server_name sitename.com www.sitename.com;

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

Enable site configuration

#Create a symbolic link from sites-available to sites-enabled 
sudo ln -s /etc/nginx/sites-available/sitename.com /etc/nginx/sites-enabled/

Restart the nginx serve

sudo systemctl restart nginx

Test from Local Machine

If you are testing this in your local lab environment or virtual box, etc., add an entry to the /etc/hosts file on your main laptop. Map the domain name (example.com) to the IP address of your Ubuntu server.

Note: If you have a real server and a domain name, you don't need the above steps. Simply add an A DNS record to your domain name provider, using the IP address of the server as the value.

Test Accessing from Browser

In the upcoming series, we will look at how can we serve multiple sites and support PHP files, serve applications like next JS, enable compression, and add headers, and also we will see how to restrict the application, how rewrite and transform URL, add custom 404 page 500 pages and etc

Did you find this article valuable?

Support Muhammad Usama by becoming a sponsor. Any amount is appreciated!