Ansible
What I Learned Today: Deploying a Static Website with Ansible & Nginx 🚀
Today was a productive hands-on day where I strengthened my understanding of Ansible automation by deploying a static website on Nginx. This small exercise connected multiple dots — Linux basics, web servers, cloud networking, and configuration management — all in one flow.
🔧 Step 1: Installing Ansible on Ubuntu
I started by installing Ansible on an Ubuntu server. The key takeaway here was using the official Ansible PPA to get a stable and updated version.
An important lesson: even a small typo like ansbile instead of ansible can break the installation. Attention to detail matters.
📁 Understanding Ansible Inventory
One common confusion I cleared today was around the inventory file:
Default inventory location:
/etc/ansible/hostsThis is a file, not a directory (so you can’t
cdinto it)
Best practice I learned:
Always use a project-level inventory file instead of modifying the global one.
This keeps automation clean, portable, and CI/CD friendly.
🌐 Installing and Running Nginx via Ansible
I wrote an Ansible playbook to:
Update the apt cache
Install Nginx
Start and enable the Nginx service
This reinforced how Ansible ensures idempotency — running the same playbook multiple times doesn’t break anything.
🎨 Deploying a Static Website (HTML + CSS)
To make things more interesting, I created a simple animated static webpage using HTML and CSS and deployed it using Ansible.
Key learning here:
Using the
copymodule to deploy filesUnderstanding file permissions using:
mode: '0644'
This ensures:
Owner can read/write
Group and others can read
Nginx can serve the files safely
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Welcome | Deployed via Ansible</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1 class="fade-in">🚀 Hello from Nginx</h1>
<p class="slide-up">
This static site is deployed using <span>Ansible</span>
</p>
<button class="glow">It Works!</button>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Segoe UI", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(135deg, #667eea, #764ba2);
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.container {
text-align: center;
animation: zoomIn 1s ease-in-out;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
p span {
color: #ffd369;
font-weight: bold;
}
button.glow {
padding: 12px 28px;
border: none;
border-radius: 30px;
background: #ffd369;
color: #333;
font-size: 1rem;
cursor: pointer;
box-shadow: 0 0 20px #ffd369;
transition: transform 0.3s ease;
}
button.glow:hover {
transform: scale(1.1);
}
/* Animations */
.fade-in {
animation: fadeIn 1.5s ease forwards;
}
.slide-up {
animation: slideUp 1.5s ease forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zoomIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
🔐 Linux Permissions Refresher
Today also helped me clearly understand Linux permission modes:
0644→ Best for web files (HTML, CSS)0755→ Used for directories and executables0600→ Used for secrets
Security and correctness go hand in hand.
🚨 Debugging “Refused to Connect” Error
When Nginx was running but the browser showed “refused to connect”, I learned to systematically debug:
Check Nginx service status
Confirm port 80 is listening
Verify AWS Security Group inbound rules
Check Ubuntu firewall (UFW)
Lesson learned:
Most of the time, it’s not Nginx — it’s the network layer.
📌 Final Outcome
By the end of the day, I successfully:
Automated Nginx installation
Deployed a static website using Ansible
Understood inventory management
Applied correct Linux permissions
Debugged real-world connectivity issues
💡 Takeaway
This small project was a great reminder that DevOps/SRE skills are built by doing, not just reading. Even a simple static site can teach a lot when automation, security, and infrastructure are involved.
Looking forward to adding:
Handlers for zero-downtime reloads
Dynamic inventory (AWS)
CI/CD integration
One step forward today 🚀