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

Joshua Edidiong — Thu, 27 Nov 2025 17:15:34 +0000

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.

DEV Community: Joshua Edidiong

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

⭐ 1. Downloading a Starter Template with Bootstrap

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

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

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

⭐ 4. Launching a Fresh Killercoda Environment for Deployment

Steps:

⭐ 5. Setting Up Nginx as the Web Server

⭐ 6. Enabling HTTP Access Through Port 80

⭐ 7.Navigating to Nginx’s Web Root Folder

⭐ 8. Clearing Out the Preinstalled Nginx Homepage

⭐ 9. Downloading My Portfolio Code from GitHub

⭐ 10. Viewing the Live Website

🎉 Final Thoughts