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

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!