# How to Host an HTML Page Using 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`"
```plaintext
$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.
```bash
$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**
```bash
$sudo apt-get install nginx
```
**2: CentOS/RHEL, use:**
```bash
$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.
```bash
$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:
1. **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: [**https://github.com/wiz4host/StaticContents/tree/main/mango.local**](https://github.com/wiz4host/StaticContents/tree/main/mango.local)
2. **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.
3. **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.
4. **Use** `wget` **to Download the File:** In the terminal, use the `wget` command followed by the URL of the raw file. For example:
```bash
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.
5. **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:
```bash
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.
```bash
$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:
1. `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.
2. `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.
3. `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.
4. `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`.
5. `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.
6. `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.
7. `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.
8. `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:
```bash
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:
```bash
$sudo nginx -t
```
If the test is successful, you should see a message indicating that the configuration is okay.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691668217837/6aef9623-cdfd-4a25-8323-5f50fee4abae.png align="center")
### Step 8: Apply the Changes and Reload Nginx
Now, apply the changes to Nginx and reload the configuration:
```bash
$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
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691250363825/1d8962d8-0ee0-4007-9587-1075e6494982.png align="center")
In that WindowsSystem32Driver folder, copy that path.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691432806729/e376124a-784b-4416-b637-c7522b3320ac.png align="center")
Open the terminal and follow the instructions there.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691250573598/5c4851d7-39fa-47f9-a25d-1dc6838410c8.png align="center")
To add your IP address and the file name (`mango.local`), see the image below.
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691250683716/3865b6e9-fb6f-47f7-a177-2adac0e9468e.png align="center")
Here you got your page
![](https://cdn.hashnode.com/res/hashnode/image/upload/v1691250726844/307f0f1d-6737-4371-a8a5-c135aadc1e7d.png align="center")