DEV Community

Cover image for Deploying a Personal Portfolio Website Using Docker on Localhost
Habeeb Hameed
Habeeb Hameed

Posted on

Deploying a Personal Portfolio Website Using Docker on Localhost

#docker #portfolio #nginx #webdev

🚀 Deploying a Personal Portfolio Website Using Docker on Localhost

In this blog, I will walk you through deploying a personal portfolio website using Docker, NGINX, and Visual Studio Code, and running it locally via localhost.

🧾 Step 1: Download a Portfolio Website Template

I downloaded a free portfolio template from [ThemeWagon]
Step 1

📂 Step 2: Create a New Project Folder

Create a new folder, e.g., dola-docker, under Documents > Cloud_Template, and move the extracted files into this folder.
Step 2

💻 Step 3: Open Folder in VS Code

Open VS Code, select the newly created dola-docker folder.

Step 3

📝 Step 4: Create a Dockerfile

Create a file in the root of the folder and name it exactly: Dockerfile (no file extension).

Paste the following contents:

# Use an official Nginx image as the base image
FROM nginx:latest

# Set the working directory to /usr/share/nginx/html
WORKDIR /usr/share/nginx/html

# Copy the website content to the default Nginx HTML directory
COPY . /usr/share/nginx/html

# Expose port 80 for the web server
EXPOSE 80
Enter fullscreen mode Exit fullscreen mode

Step 4

🛠️ Step 5: Build the Docker Image

Open a new terminal in VS Code and run the following:

docker build -t my-website:v1 .
Enter fullscreen mode Exit fullscreen mode

This will build a Docker image using the content of the Dockerfile and the portfolio HTML files.

Step 5

📸 Step 6: Confirm Image Creation

To verify that your image was created successfully, run:

docker images
Enter fullscreen mode Exit fullscreen mode

You should see my-website listed.

Step 6

🚀 Step 7: Run the Docker Container

Now launch the image in a container and bind it to a port on your system:

docker run -d -p 8080:80 my-website:v1
Enter fullscreen mode Exit fullscreen mode

This maps port 80 of the container to port 8080 of your local system.

Step 7

🧭 Step 8: Open in Browser

Open Docker Desktop to confirm the container is running.Click the container’s URL (e.g., http://localhost:8080) to launch your site.

Your personal website should now appear in your browser.

Step 8

✅ Final Result

Congratulations! 🎉 Your static portfolio website is running via Docker on your local machine.

Have questions or suggestions? Drop them in the comments!

Top comments (0)