How I learned to launch a simple HTML site (and you can too!)
As someone just dipping their toes into DevOps Engineer, Kubernetes Specialists and web hosting, I wanted to conquer a classic "first project": setting up a web server. My goal? Run Nginx on Ubuntu, host a page with my name, and document every stumble and triumph. Spoiler: It worked! Here’s how,
Step 1: Preparing My Ubuntu Playground
I started by firing up a clean Ubuntu 22.04 environment. For simplicity, I used a virtual machine(ec2-Instance) on AWS Docs-here, but you could also
Use any other cloud server (Google cloud/Azure/Digital Ocean)
Or even Docker (which I’ll mention later!).
Pro Tip: If you’re using Docker, this one-liner saves time (see Docker’s getting-started guide):
docker run -it -p 80:80 --name my-nginx ubuntu:latest
Step 2: Installing Nginx – The “Aha!” Moment
Updating packages felt like stretching before a workout:
sudo apt update
Then came the magic command, as recommended in Nginx’s official installation guide:
sudo apt install nginx -y
Fun Fact: Nginx (pronounced "Engine-X") powers over 33% of websites. Now I’m one of them!
Step 3: Bringing Nginx to Life
Starting the service:
sudo systemctl start nginx
Making sure it auto-restarts on reboots (learn more about systemctl here):
sudo systemctl enable nginx
At this point, I nervously opened my browser to http://<aws public ip>... and saw the default Nginx page! Progress!
Step 4: Crafting My Digital Hello World
Time to replace the generic page with my own. I navigated to the web root (Nginx’s default directory structure documented here):
cd /var/www/html
Then edited index.html with Nano (Vim warriors, fight me later ):
sudo nano index.html
I wrote this barebones HTML (swap "[My Name]" with yours!):
<!DOCTYPE html>
<html>
<head>
<title>Welcome to My Corner of the Internet</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh; /* Full viewport height */
margin: 0;
font-family: Arial, sans-serif;
}
h1 {
color: #2c3e50; /* Modern dark-blue color */
}
p {
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Hey there! I'm [my name].</h1>
<h2>Welcome to DevOps Stage 0 - [slack display name]</h2>
</body>
</html>
Ctrl+O to save, Ctrl+X to exit. Simple as that!
Step 5: The Grand Reveal
I refreshed http://<AWS - public-ip> and… there it was! My name in bold, staring back like a digital monument. For extra validation, on my terminal I ran:
curl http://<AWS - public-ip>
:For Docker
curl http://localhost
The terminal echoed my HTML – pure satisfaction.
Pro Tip: When trying to access your webpage with AWS public-IP, remember to use http and not https
Bumps Along the way
Security Group Fiasco: My first attempt failed due to security group issues on AWS. I had to spend sometime reading this AWS-Docs and was able to resolve it by adding a rule to my security group
Docker Dilemma: When testing the Docker method, I forgot to mount the HTML file. Protip for Docker fans (Docker volumes explained here):
docker run -d -p 80:80 -v $(pwd)/index.html:/usr/share/nginx/html/index.html nginx
Why This Matters
This tiny project taught me:
- Servers aren’t magic – just software following instructions.
- Documentation is survival gear. I kept notes like this:
# My Cheat Sheet
- Web root: /var/www/html
- Test command: curl localhost
- Logs: /var/log/nginx/error.log
- Troubleshooting is 80% of the job. (But that 20% success? Worth it.)
References & Further Reading
- Nginx Beginner’s Guide
- Ubuntu Server Documentation
- Docker’s Official Tutorials
- Mozilla’s HTML Basics (for crafting your page)
- Get started with Amazon EC2
Final Thoughts
In under an hour, I went from zero to hosting my own page. Whether you’re building a portfolio, a blog, or just experimenting, Nginx on Ubuntu is a sturdy foundation. Next step? Maybe add CSS, or try HTTPS with Let’s Encrypt!
Got questions or war stories? Drop them in the comments (or tweet me)! Let’s geek out.
Enjoyed this walkthrough? Share it with a friend who’s starting out their web hosting or DevOps journey!
Top comments (0)