First app on Nginx

In this documentation, we will walk you through the step-by-step process of hosting a static HTML page using Nginx on a Linux server. Nginx is a high-performance web server that is widely used for serving static content and acting as a reverse proxy for dynamic web applications. This tutorial assumes you have a basic understanding of Linux and have administrative access to your server.

Step 1: Connect to your Linux Server

To begin, connect to your Linux server using SSH or any other method you prefer. You will need the server's IP address or domain name and login credentials. In my case my virtual box VM IP is "10.1.1.102"

$ssh vagrant@10.1.1.102

Step 2: Update System Packages

It's essential to update your system's package repository to ensure you have the latest packages and security updates.

$sudo apt update sudo apt-get upgrade

Step 3: Install Nginx

Next, install Nginx using the package manager. On Ubuntu or Debian, use the following command:

1: ubuntu

$sudo apt-get install nginx

2: CentOS/RHEL, use:

$sudo yum install nginx

Step 4: Start Nginx and Enable Autostart

After installation, start the Nginx service and enable it to start automatically upon system boot.

$sudo systemctl start nginx  

$sudo systemctl enable nginx

Step 5: Create the HTML Page

In this step, create the HTML file that you want to host on your server. You can use any text editor, such as nano or vi, to create the file. For example, let's create a basic HTML page called index.html.

Bash codeThe steps to use the wget command to download files from a GitHub repository are as follows:

Open the GitHub Repository: Visit the GitHub repository URL where the file or files you want to download are located. In this case, the URL is: github.com/wiz4host/StaticContents/tree/mai..
Navigate to the Folder: Navigate within the GitHub repository to the specific folder containing the file you want to download. In your case, it's the "mango.local" folder.
Locate the Raw File: Click on the file you want to download within the folder. This will take you to the file's content view. Click the "Download" button or right-click the "Download" link and choose "Copy link address" to get the URL of the raw file.
Use wget to Download the File: In the terminal, use the wget command followed by the URL of the raw file. For example:
```
 wget https://raw.githubusercontent.com/wiz4host/StaticContents/main/mango.local/index.html
```
This command will download the index.html file from the "mango.local" folder in the GitHub repository and save it in your current directory on the server.
Check the Downloaded File: Once the wget command completes, you can check if the file was successfully downloaded by listing the files in the current directory:
```
 ls
```
You should see the downloaded file listed

Step 6: Configure Nginx to Serve Your HTML Page

By default, Nginx is configured to serve content from the /var/www/html directory. Now, we need to create a virtual host configuration to tell Nginx to serve our index.html file.

$sudo nano /etc/nginx/sites-available

NGINX is a popular web server and reverse proxy server that is often used to serve static content and handle incoming HTTP requests. Let's break down the configuration block step by step:

server Block: This is the main configuration block for an NGINX server. It contains the settings and directives that define how the server should handle incoming requests.
listen 80;: This directive specifies that the server should listen on port 80 for incoming HTTP requests. Port 80 is the default port for HTTP traffic.
index index.html;: This directive sets the default file to serve when a directory is requested. In this case, if a user accesses a directory without specifying a file, NGINX will attempt to serve an index.html file from that directory.
server_name mango.local;: This directive defines the server name. It specifies the domain name that should match this server block. In this case, the server will respond to requests with the domain name mango.local.
root /var/www/mango.local/html;: This directive sets the root directory where the web server will look for files to serve. When a user requests a resource, NGINX will look for that resource relative to this root directory. In this example, the server will serve files from the /var/www/mango.local/html directory.
access_log /var/www/mango.local/logs/access.log;: This directive sets the location where the server should store access logs. Access logs contain information about incoming requests, including details such as the IP address of the client, the requested resource, response codes, and more. In this case, the logs will be stored in the /var/www/mango.local/logs/access.log file.
error_log /var/www/mango.local/logs/error.log;: Similar to the access log, this directive specifies where the server should store error logs. Error logs contain information about server errors and issues. The logs will be stored in the /var/www/mango.local/logs/error.log file.
location / { ... }: This block defines how NGINX should handle requests for the root URL ("/"). Inside this block, there's a directive:
- try_files $uri $uri/ =404;: This directive determines the order in which NGINX should attempt to find and serve files for the requested URL. It tries to serve the requested URI as a file first, then as a directory, and if neither is found, it returns a 404 response.

In summary, the provided NGINX configuration block sets up a server that listens on port 80 for requests with the domain name mango.local. It serves files from the /var/www/mango.local/html directory, logs access events to /var/www/mango.local/logs/access.log, and logs errors to /var/www/mango.local/logs/error.log. When a user accesses the root URL ("/"), NGINX attempts to serve files according to the specified rules. If no appropriate files or directories are found, it returns a 404 error.

In the configuration file, locate the server block and replace its content with the following:

server {
        listen 80;

        index index.html;

        server_name mango.local;
        root /var/www/mango.local/html;


        access_log /var/www/mango.local/logs/access.log;
        error_log /var/www/mango.local/logs/error.log;


        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }

}

Step 7: Test Nginx Configuration

Before applying the changes, let's check if the Nginx configuration is correct:

$sudo nginx -t

If the test is successful, you should see a message indicating that the configuration is okay.

Step 8: Apply the Changes and Reload Nginx

Now, apply the changes to Nginx and reload the configuration:

$sudo systemctl reload nginx
or
$sudo nginx -s reload

Step 9: Apply the Changes in domain side

Go to the Windo32 to set up the domain. there you get the host file

In that WindowsSystem32Driver folder, copy that path.

Open the terminal and follow the instructions there.

To add your IP address and the file name (mango.local), see the image below.

Here you got your page

Wiz4host Blogs - DevOps