DEV Community

Cover image for Deploying a simple NGINX web server on Azure and hosting a custom web page
JICDev
JICDev

Posted on

Deploying a simple NGINX web server on Azure and hosting a custom web page

#cloudcomputing #azure #cloudskills #nginx

🧩 Overview

This task involves setting up a GitHub workflow, deploying and configuring an NGINX web server, and serving a custom webpage accessible via a public IP or domain on port 80. The README.md in the main branch must include personal and project details, and the deployed index.html should display specified custom content. The server must be publicly accessible and remain live until grading is complete. The task is currently in progress.

The goal is to deploy a simple NGINX web server on a cloud platform and host a custom web page that displays:

  • The name and Slack username
  • The cloud platform used
  • The date of deployment

Prerequisites

Platform: Microsoft Azure
Date Deployed: 18/10/2025
Server IP: http://172.191.198.160/

🪜 Step 1 — Forking the Repository

The first step was to fork the official repository:
👉 hng13-stage0-devops

✅ Steps:

  1. Go to the GitHub repo.
  2. Click Fork (top-right corner).
  3. The forked repo now appears under your own GitHub account.

🪜 Step 2 — Creating and Editing the README.md

After forking, add a README.md file to the main branch.
This file contains my name, Slack username, a brief project description, and the server IP.

# HNG13 Stage 0 - DevOps Project

## 👤 Author
**Name:** Justice Obioha  
**Slack Username:** @JIC  

---

## 🧠 Project Description
This project demonstrates the setup and deployment of an NGINX web server on **Microsoft Azure**.  
The server hosts a custom HTML page that confirms successful deployment and is publicly accessible on port 80.

---

## 🌐 Deployment Information
**Platform:** Microsoft Azure  
**Server IP:** http://172.191.198.160/  
**Deployed:** October 18, 2025.
Enter fullscreen mode Exit fullscreen mode

🪜 Step 3 — Creating and Configuring the Virtual Machine (Azure)

I deployed a Linux Virtual Machine using Azure Portal.

⚙️ Configuration:

  • OS: Ubuntu 22.04 LTS
  • Authentication: SSH key
  • Port Allowed: 80 (HTTP)

  • Public IP: 172.191.198.160

  • First Open login in to you Azure Portal and click Virtual Machine then Create

Fill in the details

Click Review + Create

After review and accepting price cost click on **Create**

If successful Then Click on Go to Resource

Go to Overview and copy you Public IP

🪜 Step 4 — Connecting to the Server via SSH

Using the Azure-provided SSH command, I connected to my VM:

ssh jic-hng@172.191.198.160
Enter fullscreen mode Exit fullscreen mode

🪜 Step 5 — Installing and Running NGINX

Once connected, I installed and enabled NGINX using the commands below:

sudo apt update
sudo apt install nginx -y
sudo systemctl enable nginx
sudo systemctl start nginx
Enter fullscreen mode Exit fullscreen mode

To verify that NGINX was running:

systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

Then, I visited http://172.191.198.160/ and saw the default “Welcome to nginx!” page.

🪜 Step 6 — Replacing the Default HTML Page

Next, I replaced the default file located at /var/www/html/index.nginx-debian.html with my custom index.html.

cd /var/www/html
sudo rm index.nginx-debian.html
sudo nano index.html
Enter fullscreen mode Exit fullscreen mode

Then I added this HTML content:

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to DevOps Stage 0</title>
  </head>
  <body>
    <h1>Welcome to DevOps Stage 0 - Justice Obioha / @JIC</h1>
    <p>Successfully deployed on Azure</p>
    <p>Deployed: 18/10/2025</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

After saving with Ctrl + O, Enter, and Ctrl + X, I verified my page:

cat index.html
Enter fullscreen mode Exit fullscreen mode

🧠 Lessons Learned

  • Cloud deployment is simple when broken into clear steps.
  • NGINX serves as an excellent lightweight web server for testing deployments.
  • Small details (like date format) matter in automated validation environments.
  • Proper documentation makes future tasks easier and more professional.

🧾 Summary of Commands 

# Update system
sudo apt update

# Install NGINX
sudo apt install nginx -y

# Start and enable the service
sudo systemctl start nginx
sudo systemctl enable nginx

# Replace default HTML
cd /var/www/html
sudo rm index.nginx-debian.html
sudo nano index.html
Enter fullscreen mode Exit fullscreen mode

✅ Final Output

Visit: http://172.191.198.160/
You’ll see:

“Welcome to DevOps Stage 0 - Justice Obioha / @jic
Successfully deployed on Azure
Deployed: 18/10/2025”

🏁 Conclusion

This project helped me understand how to deploy and manage a simple web server using Azure and NGINX.
It’s a solid foundation for more advanced DevOps tasks like CI/CD, monitoring, and containerization in my cloud computing journey

Webserver #NGINX #DEVOPS #AZURE #Linux

Top comments (0)