This content originally appeared on DEV Community and was authored by Kelechi Ogbonnaya
Introduction
And the HNG 12 Internship is a go! As the first task for the HNG 12 DevOps track(Stage 0), we were told to configure nginx to serve a custome html page. Though it seemed fairly easy at first but through this task I was able to reinforce my understanding of web server configurations and nginx in particular.
How I completed the task:
Setting Up a Cloud Server
I needed the site to be publicly accessible so i configured a cloud based Ubuntu server using Azure. I used azure because that is what I am mainly familiar with. I made use of the azure cli, how to install the cli locally - (https://learn.microsoft.com/en-us/cli/azure/install-azure-cli).
To create the virtual machine:
az vm create --name hng-static-site --resource-group hng --size Standard_B1ls --image Ubuntu22.04 --nsg-rule SSH --admin-username <your_username> --admin-password <your_password>
To Open Port 80:
az network nsg rule create --resource-group hng --nsg-name hng-static-siteNSG --name Allow-HTTP --protocol tcp --priority 1001 --destination-port-ranges 80 --access Allow --direction Inbound
Then SSH into the Server:
ssh <username>@<public_ip>Installing Nginx
I then Updated packages and installed nginx:
sudo apt update && sudo apt install -y nginx
To check if nginx started correctly:
sudo systemctl status nginx
It was already running, but if it wasn't I would have used the following command to start it:
sudo systemctl start nginx
- Configuring the Custom HTML Page
I navigated to the default web directory and created an index.html and styles.css(Just for a bit of style) files:
sudo nano /var/www/html/index.htmlsudo nano /var/www/html/styles.css
The Code for the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>HNG Static Site</title>
</head>
<body>
<div class="container">
<h1>Welcome to DevOps Stage 0 - Ogbonnaya Kelechi/Chancellor007</h1>
</div>
</body>
</html>
The Code for the styles.css:
html, body{
height: 100%;
margin: 0;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
color: #333;
background-color: #f4f4f4;
}
.container{
width: 100%;
text-align: center;
height: 100px;
}
- Modified Permissions and Ownership of web file directories
To enable nginx have access to the web server files I changed the permissions of the directory:
sudo chmod -R 755 /var/www/html
And then changed the Ownership of the files:
sudo chown -R www-data:www-data /var/www/html
- Restart Nginx and test configuration
After saving everything, I restarted nginx:
sudo systemctl restart nginxAnd then tested it by opening my browser and navigating to:http://<ip_address>It worked.
Challenges and How I Overcame Them
Permission issues while editing Html
I got permission errors while i was editing the index.html file. I had to use "sudo" with the command in other to edit the file in a file editor. This really stressed the importance of privilege management.Blocked ports
I initially forgot to configure the network security group to open port 80 so i wasn't able to access my site. I fixed this by configuring the nsg to open port 80 in other to allow http requests.
Reflections on the task
Completing this task helped me understand and reinforce my knowledge of:
Setting up and configuring web servers
Troubleshooting common issues in server configurations
Embracing a Problem solving Mindset
This experience aligns with my personal goal of becoming a DevOps Engineer by strengthening my foundational knowledge in server administration and automation. It was a truly rewarding experience and I look forward to tackling more tasks in this internship.
For companies looking to hire the best DevOps professionals, Look no further
HNG alumni have the ability to thrive in high-pressure situations, deliver high-quality products and have a wide-array of practical skills.
Explore elite HNG talents available for hire:
DevOps Engineersdevops
Cloud Engineers
Site Reliability Engineers
Platform Engineers
Infrastructure Engineers
Kubernetes Specialists
AWS Solutions Architects
Azure DevOps Engineers
Google Cloud Engineers
CI/CD Pipeline Engineers
Monitoring/Observability Engineers
Automation Engineers
Docker Specialists
Linux Developers
PostgreSQL Developers
This content originally appeared on DEV Community and was authored by Kelechi Ogbonnaya
Kelechi Ogbonnaya | Sciencx (2025-01-29T13:29:46+00:00) HNG DevOps Stage 0 – Setting Up Nginx. Retrieved from https://www.scien.cx/2025/01/29/hng-devops-stage-0-setting-up-nginx/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.