🚀My First Portfolio Deployment with Nginx on Killercoda: A Step-by-Step DevOps Walkthrough

Hey DevOps folks and aspiring engineers!
Today I want to walk you through how I deployed my first portfolio website using Killercoda and Nginx — completely hands-on, beginner friendly, and perfect if you're just getting started with DevOps, servers, or deployment.

This guide includes everything from downloading a template… to pushing code to GitHub… to spinning up Nginx on a Linux server… to finally seeing your site live on the web.

Let’s dive in! 🔥

⭐ 1. Downloading a Starter Template with Bootstrap

Every website starts with a structure.
Since I'm not a UI designer (yet), I decided to use a Bootstrap starter template to shorten the setup process.

Steps I followed:

• Went to StartBootstrap template website

• Picked a simple portfolio design

• Downloaded the ZIP file

• Saved it into a development folder on my system

• The goal here was simple: get a clean, responsive layout I can customize later.

⭐ 2. Extracting the Template & Opening It in VS Code

Once the template ZIP was downloaded:

• I extracted it into a folder

• Then I opened the folder directly in VS Code using:

In VS Code, I could now:

• Preview the site with the Live Server extension

• Edit the HTML and CSS

• Add my name, projects, images, and descriptions

• This is where the website begins to feel like my portfolio.

⭐ 3. Uploading the Portfolio Files to GitHub for Version Control

Now that the site was working on my local machine, it was time to put it in the cloud.

Steps:

✔ Initialize Git
✔ Create a GitHub repository

On GitHub → New Repository → Add README → Create

✔ Connect local folder to GitHub

Once this was done, my portfolio code was safe, version-controlled, and available for deployment.

🔥Next Section: Making the Website Live Using Killercoda + Nginx

Now for the DevOps part — the fun stuff.
Let’s go step-by-step.

Killercoda is an online platform that gives you temporary Linux servers to practice DevOps skills.

⭐ 4. Launching a Fresh Killercoda Environment for Deployment

Steps:

Visit killercoda.com

• Choose a Ubuntu playground

• Start the session (it loads a full Linux VM in your browser)

• Once inside, you’re now operating inside a real server environment.

⭐ 5. Setting Up Nginx as the Web Server

Nginx is a popular web server that can host static websites like our portfolio.

To install it:
sudo apt install nginx -y

After installation, I checked its status:
sudo systemctl status nginx
It showed "active (running)" — meaning the server is already serving a default page.

⭐ 6. Enabling HTTP Access Through Port 80

For a website to be accessible online, port 80 (HTTP) must be open.
This confirmed that:

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

On Killercoda, this is usually handled automatically, but for Linux servers, you typically do:
sudo ufw allow 'Nginx HTTP'
sudo ufw allow 80
This ensures visitors can see your website.

⭐ 7.Navigating to Nginx’s Web Root Folder

Nginx stores its public HTML files here:
ls /var/www/html

Inside this folder, you'll find:
index.nginx-debian.html

That’s the default Nginx landing page.

⭐ 8. Clearing Out the Preinstalled Nginx Homepage

We don’t need the default page, so I deleted it:
sudo rm index.nginx-debian.html

Now the directory is empty and ready for my portfolio files.

⭐ 9. Downloading My Portfolio Code from GitHub

To pull my portfolio from GitHub into the server:
sudo git clone https://github.com/<username>/<repo>.git

Then, move only the website contents into the web directory:
sudo cp -r <repo-folder>/* /var/www/html/

At this point, the server now contains my full portfolio website.

Another way to go about this is to work directly with the Ubuntu playground
In the play ground;

• Write nano index.html Then paste your index source code from VScode

Click on CtrlX and then Y to save buffer, then click 'enter'

• Next, write nano style.css Then paste your css source code from VScode

Click on CtrlX and then Y to save buffer, then click 'enter'

You should have something like this on your playground:

• Next, move the index.html into the root mv index.html /var/www/html/

• Copy the style.css into the root cp style.css /var/www/html/

⭐ 10. Viewing the Live Website

Killercoda provides a Public Web Access URL for port 80.
Clicking it instantly loads your deployed site.

If everything worked correctly, you’ll see your real, live portfolio hosted by Nginx. 🚀🔥

At that moment… it hits you…
You deployed your first website like a real DevOps engineer.

🎉 Final Thoughts

Deploying my first portfolio using Killercoda and Nginx was a huge milestone in my DevOps journey.
I learned:

How to work with HTML templates

How Git and GitHub fit into a workflow

How to manage a Linux server

How Nginx hosts static websites

How deployment works in real life

If you're starting out in DevOps, this project is perfect practice.