Introduction
For the HNG DevOps Stage 0 task, I was required to set up and configure NGINX on a fresh Ubuntu server and serve a custom HTML page. This task helped reinforce my understanding of Linux server management, web server configuration, and cloud deployment.
My Approach
To complete the task, I followed these structured steps:
1. Setting Up the Server
I created an Ubuntu server instance on AWS EC2. Once the server was up and running, I connected to it using SSH:
ssh -i key-2.pem ubuntu@16.171.226.12
- Installing NGINX
Next, I updated the package list and installed NGINX:
sudo apt update && sudo apt install nginx -y
After installation, I ensured NGINX was running:
sudo systemctl start nginx
sudo systemctl enable nginx
3. Configuring the Custom HTML Page
I navigated to the default NGINX web root directory and edited the index.html file:
cd /var/www/html
sudo nano index.html
I replaced the content with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #4A90E2, #9013FE);
font-family: Arial, sans-serif;
color: #fff;
text-align: center;
}
.container {
background: rgba(255, 255, 255, 0.1);
padding: 20px 40px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
h1 {
font-size: 28px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to DevOps Stage 0 - Inioluwa/Inioluwa Eunice</h1>
</div>
</body>
</html>
I then restarted NGINX to apply the changes:
sudo systemctl restart nginx
4. Verifying Deployment
I accessed my server’s public IP in a browser:👉 http://16.171.226.12/ The custom HTML message was successfully displayed.
Challenges and Solutions
Issue: creating an SSH key for my EC2 instance. Initially, I generated a .ppk key instead of a .pem, which caused authentication errors when trying to connect to my server. Solution: After troubleshooting, I successfully created the correct .pem key and gained access!
Issue: NGINX not serving the updated HTML file. Solution: Restarted NGINX after editing the file.
Lessons Learned
✅ Launching an EC2 instance on AWS
✅ Installing and configuring NGINX on Ubuntu
✅ Using nano to edit my HTML file inside /var/www/html/index.html
✅ Troubleshooting SSH authentication errors
✅ Understanding how web servers serve static content
References
DevOps Engineers
Cloud Engineers
Conclusion
This task provided hands-on experience with deploying a web server, working with NGINX, and managing cloud instances. It solidified my understanding of basic DevOps principles and will be beneficial as I advance in the field.
Top comments (0)