🚀 Deploying My First Portfolio on Killercoda Using Nginx — A Beginner DevOps Walkthrough

Sunday Micheal — Tue, 25 Nov 2025 17:40:31 +0000

As part of my DevOps learning journey, I was given an assignment to deploy a personal portfolio website on Killercoda using Nginx. This hands-on project taught me how to host a static website on a remote Linux environment, configure a web server, and use Git for deployment — all essential DevOps skills.

In this article, I’ll walk you through every step I took.

✅ 1. Downloading a Starter Template

I started by downloading a portfolio template from StartBootstrap.
This gave me a clean base to work with.

✅ 2. Extracting the Project & Opening It in VS Code

After downloading, I extracted the ZIP file and opened the project folder in Visual Studio Code.

In VS Code, I customized the template with:

My name
My bio
Updated projects and contacts
Adjusted colors and layout

✅ 3. Pushing the Project to GitHub

Once the edits were done, I initialized a Git repository and pushed the project online:

git init git remote add origin <my-repo-url> git add . git commit -m "Initial commit" git push -u origin main

This step made deployment easier since I could simply clone the repo on the server.

✅ 4. Opening a Killercoda Playground

I visited:

👉 https://killercoda.com/playgrounds/scenario/ubuntu

This opened a live Ubuntu environment where I could run commands and deploy my project.

✅ 5. Installing Nginx

Inside the Killercoda terminal, I installed Nginx:

sudo apt install nginx -y

After installation, I confirmed Nginx was running:

which nginx nginx -v sudo systemctl status nginx

Everything was working perfectly.

✅ 6. Opening the Web Traffic/Port

From the Killercoda menu, I opened the traffic/port view.

Then I ran port 80 to see the default Nginx welcome page.

This confirmed that:

Nginx is running
Port 80 is open
The server is serving a default webpage

✅ 7. Navigating to the Web Server Directory

By default, Nginx serves files from:

/var/www/html

I checked the folder:

ls /var/www/html

I found a file:

index.nginx-debian.html

This is the default Nginx landing page.

✅ 8. Removing the Default Nginx File

To prepare the directory for my project, I removed the default index file:

sudo rm /var/www/html/index.nginx-debian.html

✅ 9. Cloning My GitHub Project

Next, I switched into the web root:

cd /var/www/html

Then I cloned my portfolio repo:

sudo git clone <my-github-repo-url> .

After cloning, I verified the files:

ls /var/www/html

All my project files were successfully copied into the server directory.

✅ 10. Viewing the Live Website

Killercoda provided a temporary public URL:

👉 https://6c7ccb24b1e1-10-244-14-10-80.spch.r.killercoda.com

After refreshing the page, my portfolio loaded perfectly — fully deployed and running on Nginx!

🎉 Final Result

I successfully:

✔ Customized a Bootstrap website
✔ Pushed it to GitHub
✔ Installed and configured Nginx
✔ Removed the default server files
✔ Deployed my project using git clone
✔ Hosted a live site on Killercoda

This project helped me understand:

Web servers
Linux directory structure
Git-based deployment
Static website hosting
Basic DevOps workflow

🧠 What I Learned

How Nginx serves files from /var/www/html
How to replace a default server page with your own
How to deploy directly from GitHub
How Killercoda can be used as a free cloud environment
Confidence in using Linux commands

📌 Conclusion

This was a simple but powerful DevOps exercise. I deployed a real website on a live Linux server using Nginx — without needing AWS, Azure, or a VPS.

If you’re also learning DevOps, I highly recommend trying this workflow!

DEV Community: Sunday Micheal