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