Containerize a Website with Docker

Package a static website into a Docker container served by NGINX.

Introduction

30 Second Summary

Every developer has hit the "it works on my machine" problem. Your code runs perfectly on your laptop, but breaks the moment someone else tries to run it. Containers solve this by packaging your code and everything it needs into a single, portable unit.

In this project, you will build a portfolio website from scratch, package it into a Docker container, and serve it using NGINX. By the end, your site runs identically regardless of what else is installed on your machine.

What You'll Build

A personal portfolio landing page containerized with Docker and served by NGINX, accessible from your browser at localhost:8080.

By the end of this project, you'll have:

  • A custom portfolio website built with HTML and CSS, running inside a Docker container.
  • A working Dockerfile that packages your site into a portable, shareable image using NGINX.
  • Hands-on experience with Docker's core workflow: building images, running containers, inspecting layers, and managing the container lifecycle.
  • Secret Mission: Add a live development workflow using bind mounts so you can edit your site without rebuilding the image.

Are there any prerequisites?

None. This project includes full setup instructions for every tool you need, including Docker Desktop and a text editor. You do not need any prior experience with Docker or web development.

Install Docker Desktop

To containerize a website, you need a tool that can build and run containers on your machine.

In this step, you will install Docker Desktop, verify it works, and create the project folder where your website files will live.

In this step, get ready to:
  • Install Docker Desktop with the WSL 2 backend.
  • Verify Docker is running by pulling a test container.
  • Create your project folder structure.
Download and install Docker Desktop

Docker Desktop is an application that lets you build and run containers on Windows. It uses a lightweight Linux environment called WSL 2 behind the scenes to power those containers.

  • Open your browser and navigate to the Docker Desktop for Windows download page.
  • Click the download button to get Docker Desktop Installer.exe.
  • Double-click Docker Desktop Installer.exe to run the installer.
  • When the installer asks which installation mode you prefer, choose Per-user (recommended). This does not require administrator privileges.
  • On the Configuration page, make sure Use WSL 2 instead of Hyper-V is selected.
  • Follow the wizard prompts and click Close when the installation finishes.

What is Docker Desktop?

Docker Desktop bundles everything you need to work with containers: the Docker engine, the CLI, and a graphical dashboard.

It is free for personal use and learning. Commercial use in larger enterprises (more than 250 employees or more than $10 million USD in annual revenue) requires a paid subscription.

  • Docker Desktop does not start automatically after installation. Open it from the Start menu by pressing the Windows key, typing Docker Desktop, and pressing Enter.
  • On first launch, accept the Docker Subscription Service Agreement to continue.
  • Wait for the Docker engine to finish starting. You will see a green Engine running indicator in the bottom-left corner of the Docker Desktop window.

Docker Desktop won't start?

Make sure WSL 2 is enabled on your machine. Open PowerShell as administrator and run wsl --install, then restart your computer and try launching Docker Desktop again.

If you see a message about virtualization, you may need to enable it in your BIOS/UEFI settings. Check your laptop or motherboard manufacturer's guide for instructions.

help me troubleshoot Docker Desktop not starting on Windows

Verify Docker is running

Now that Docker Desktop is running, you will confirm the docker command works from your terminal.

  • Open PowerShell by pressing the Windows key, typing PowerShell, and pressing Enter.
  • Check your Docker version by running this command:
docker --version

✔️ I see a version number

You should see something like Docker version 28.x.x (the exact number depends on when you installed). Docker CLI is ready to go.

ⓧ I see an error or 'command not found'

This means Docker is not in your system PATH, or Docker Desktop is not running yet.

  • Make sure the Docker Desktop application is open and shows the green Engine running indicator.
  • Close and reopen PowerShell so it picks up the updated PATH.
  • Try running docker --version again.
  • Run the official Docker test container to confirm the engine can pull and run images:
docker run hello-world

What does this command do?

docker run hello-world tells Docker to download a tiny test image from Docker Hub and run it as a container. If everything works, it prints a success message starting with "Hello from Docker!" and then exits.

This confirms that the Docker engine, networking, and image registry access are all working correctly.

✔️ I see 'Hello from Docker!'

Docker pulled the image and ran the container successfully. Your setup is working.

ⓧ I see a connection or permission error

This usually means the Docker engine is not fully started yet.

  • Wait 30 seconds for Docker Desktop to finish initializing, then try again.
  • If you see a permissions error, close PowerShell and reopen it (do not use "Run as administrator").
  • Make sure Docker Desktop shows the green Engine running indicator before retrying.
Create the project folder structure

With Docker working, you need a folder to hold your website files and Dockerfile.

  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder with a site subfolder inside it by running these commands:
mkdir docker-portfolio/site
  • Move into the project folder by running:
cd docker-portfolio
  • Confirm the folder was created by running:
ls

You should see a site folder listed in the output.

Don't see the site folder?

Make sure you typed the command exactly as shown. PowerShell's mkdir creates nested directories in one go, so mkdir docker-portfolio/site creates both folders at once.

If you accidentally created the folders in the wrong location, delete them with rm -r docker-portfolio and start again from the cd ~/Desktop step.

help me fix my project folder structure in PowerShell

Your Docker environment is ready and your project folder is in place. Next up, you will build the HTML and CSS for your portfolio website.

Build Your Website

Your Docker environment is ready and your project folder is in place.

Every container needs something to serve. In this step, you'll build a portfolio landing page using HTML and CSS. This is the website that Docker will package and NGINX will serve.

In this step, get ready to:
  • Create the HTML structure for your portfolio page.
  • Style the page with a gradient background and card layout.
Create the HTML structure

Your portfolio page needs a basic structure with a header, a hero section introducing yourself, and a skills list. This is the content that visitors will see when they open your containerized site.

  • Open index.html in Notepad by running this command in PowerShell:
notepad site\index.html
  • Notepad asks if you want to create a new file. Click Yes.
  • Paste the following HTML into the file:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <h1 class="logo">Portfolio</h1>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h2>Hello, I'm a Developer</h2>
            <p>I build things with code and ship them with Docker.</p>
        </section>
        <section class="skills">
            <h3>Skills</h3>
            <ul>
                <li>HTML &amp; CSS</li>
                <li>JavaScript</li>
                <li>Docker</li>
                <li>Cloud Deployment</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>Containerized with Docker &amp; NGINX</p>
    </footer>
</body>
</html>

What does this code do?

  • <header> creates a top navigation bar with a logo.
  • <section class="hero"> displays your name and a short tagline about what you build.
  • <section class="skills"> lists four technical skills in a bullet-point format.
  • <link rel="stylesheet" href="styles.css"> connects the CSS file you will create next to style this page.
  • Save the file by pressing Ctrl+S.
  • Switch back to PowerShell and verify the file was created by running:
ls site

You should see index.html listed in the output.

Don't see index.html?

  • Make sure you are inside the docker-portfolio folder in PowerShell. Run cd to check your current location.
  • Confirm you clicked Yes when Notepad asked to create the file and that you saved with Ctrl+S.

help me find my index.html file in the site folder

✔️ Awesome, I've got everything!

Great. Make sure you have saved your file before moving on.

ⓧ I'd like to double check the full code

Here is the complete index.html file for comparison:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <h1 class="logo">Portfolio</h1>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h2>Hello, I'm a Developer</h2>
            <p>I build things with code and ship them with Docker.</p>
        </section>
        <section class="skills">
            <h3>Skills</h3>
            <ul>
                <li>HTML &amp; CSS</li>
                <li>JavaScript</li>
                <li>Docker</li>
                <li>Cloud Deployment</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>Containerized with Docker &amp; NGINX</p>
    </footer>
</body>
</html>
Style your portfolio page

Plain HTML without styling looks bare. You will add CSS to give your portfolio a dark gradient background, centered layout, and a clean card design for the skills section.

  • Open styles.css in Notepad by running this command:
notepad site\styles.css
  • Notepad asks if you want to create a new file. Click Yes.
  • Paste the following base styles that set up the page layout:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #eee;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.3);
}

.logo {
    font-size: 1.5rem;
    color: #4fc3f7;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

What do these styles do?

  • The * selector resets default browser spacing so every element starts from zero.
  • body applies a dark diagonal gradient and uses flexbox to stack content vertically.
  • header adds a semi-transparent dark bar across the top of the page.
  • main uses flexbox to center the hero and skills sections both horizontally and vertically.
  • Save the file by pressing Ctrl+S.
  • Switch back to PowerShell and confirm both files exist by running:
ls site

You should see both index.html and styles.css in the output.

Only see index.html?

  • Make sure you clicked Yes when Notepad prompted to create the new file.
  • Confirm you saved with Ctrl+S before switching back to PowerShell.

help me find my styles.css file

  • Switch back to Notepad where styles.css is still open.
  • Below the code you just added, paste these content styles:
.hero {
    text-align: center;
    margin-bottom: 3rem;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #fff;
}

.hero p {
    font-size: 1.2rem;
    color: #b0bec5;
}

.skills {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem 3rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.skills h3 {
    margin-bottom: 1rem;
    color: #4fc3f7;
}

.skills ul {
    list-style: none;
}

.skills li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.skills li:last-child {
    border-bottom: none;
}

footer {
    text-align: center;
    padding: 1.5rem;
    color: #78909c;
    font-size: 0.9rem;
}

What do these styles do?

  • .hero centers the heading and tagline with spacing below to separate it from the skills card.
  • .skills creates a subtle glass-like card with rounded corners and a faint border.
  • Each .skills li gets a thin separator line between items for readability.
  • footer provides a muted credit line at the bottom of the page.
  • Save the file by pressing Ctrl+S.

You will not see the styled page yet. In the next step, you will write a Dockerfile that packages these files into a container and serves them in your browser.

Worried about typos in your CSS?

  • Make sure every opening curly brace { has a matching closing brace }.
  • Check that there are no extra blank lines between the two sections of CSS you pasted.

help me check my CSS for errors

✔️ Awesome, I've got everything!

Great. Double check you have saved your file before moving on.

ⓧ I'd like to double check the full code

Here is the complete styles.css file for comparison:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #eee;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    padding: 1.5rem 2rem;
    background: rgba(0, 0, 0, 0.3);
}

.logo {
    font-size: 1.5rem;
    color: #4fc3f7;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hero {
    text-align: center;
    margin-bottom: 3rem;
}

.hero h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #fff;
}

.hero p {
    font-size: 1.2rem;
    color: #b0bec5;
}

.skills {
    background: rgba(255, 255, 255, 0.05);
    padding: 2rem 3rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.skills h3 {
    margin-bottom: 1rem;
    color: #4fc3f7;
}

.skills ul {
    list-style: none;
}

.skills li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.skills li:last-child {
    border-bottom: none;
}

footer {
    text-align: center;
    padding: 1.5rem;
    color: #78909c;
    font-size: 0.9rem;
}

Your website files are ready. Next up, you will write a Dockerfile to package them into a portable Docker image.

Write Your Dockerfile

Your portfolio website is complete with a polished landing page and custom styling. Now it's time to give Docker the instructions it needs to package your site into a portable image.

A Dockerfile is like a recipe. It tells Docker which base ingredients to start with, what files to include, and how to configure the result. Without one, Docker has no idea what to build.

In this step, get ready to:
  • Create a Dockerfile that packages your site with NGINX.
  • Create a .dockerignore file to keep your build clean.
Create your Dockerfile

A Dockerfile is a plain text file with no file extension. Each line is an instruction that Docker executes in order, building up your image layer by layer.

  • Make sure your PowerShell terminal is inside the docker-portfolio folder (not the site subfolder).
  • Create an empty Dockerfile by running this command:
New-Item -Name Dockerfile -ItemType File
  • Open the Dockerfile in your text editor (Notepad or any editor you prefer).
  • Paste the following content into the file:
FROM nginx:1.30.2-alpine

COPY ./site /usr/share/nginx/html

EXPOSE 80

What does this Dockerfile do?

  • FROM nginx:1.30.2-alpine starts from the official NGINX image. The Alpine variant is a lightweight Linux distribution that keeps the image small (around 40 MB instead of 180 MB).
  • COPY ./site /usr/share/nginx/html takes everything in your local site folder and places it inside the container where NGINX serves files from.
  • EXPOSE 80 documents that the container listens on port 80. This is informational for anyone reading the Dockerfile.
  • Save the Dockerfile in your text editor.
  • Confirm the file exists by running:
ls

You should see Dockerfile listed alongside the site folder in the output.

Don't see the Dockerfile?

  • Make sure you saved the file with the exact name Dockerfile (capital D, no extension). If you used Notepad, it may have added .txt to the end. In Notepad's Save As dialog, change "Save as type" to All Files (*.*) before saving.
  • Confirm you are in the docker-portfolio directory, not inside site.

Help me troubleshoot my Dockerfile creation on Windows.

Create a .dockerignore file

Before Docker builds your image, it sends all files in the project directory (the "build context") to the Docker engine. A .dockerignore file tells Docker which files to skip, keeping your build fast and your image clean.

  • Create an empty .dockerignore file by running this command:
New-Item -Name .dockerignore -ItemType File
  • Open .dockerignore in your text editor.
  • Paste the following content into the file:
.git
*.md
.dockerignore

What does this file exclude?

  • .git excludes your version control history (if you add Git later).
  • *.md excludes any Markdown files like README documents.
  • .dockerignore excludes this ignore file itself from the image.

None of these files are needed to serve your website, so excluding them keeps the build context smaller and faster.

  • Save .dockerignore in your text editor.
  • Confirm both new files exist by running:
ls

You should see Dockerfile, .dockerignore, and the site folder in the output.

Don't see .dockerignore in the listing?

  • Files starting with a dot can be hidden by default on Windows. Run ls -Force to show all files including hidden ones.
  • If you used Notepad, make sure you selected All Files (*.*) in the Save As type dropdown. Otherwise Notepad may have saved it as .dockerignore.txt.

Help me find my .dockerignore file on Windows.

✔️ Awesome, I've got everything!

Great. Double check you have saved both files in the docker-portfolio folder (not inside site).

ⓧ I'd like to double check the full code

Here is the complete content for both files:

FROM nginx:1.30.2-alpine

COPY ./site /usr/share/nginx/html

EXPOSE 80
.git
*.md
.dockerignore

Your Docker instructions are locked and loaded. Next up, you'll use this Dockerfile to build a real image and launch your website inside a container.

Build and Run Your Container

You have a Dockerfile that describes how to package your website, and a .dockerignore that keeps the build clean. Now it is time to turn those instructions into a running website.

Docker uses two core commands to go from Dockerfile to live site. docker build reads your Dockerfile and creates a portable image. docker run starts a container from that image and serves your site to the browser.

In this step, get ready to:
  • Build a Docker image from your Dockerfile.
  • Run the image as a container and view your portfolio in the browser.
  • Manage the container lifecycle with Docker commands.
Build your Docker image

A Docker image is a snapshot of everything your application needs to run. Building the image reads each instruction in your Dockerfile and stacks them as layers into a single portable package.

  • In your PowerShell window, make sure you are inside the docker-portfolio folder (where your Dockerfile lives).
  • Build your image by running this command:
docker build -t portfolio-site .

What does this command do?

  • docker build tells Docker to read your Dockerfile and create an image.
  • -t portfolio-site names (tags) the image so you can refer to it later.
  • . (the dot) tells Docker to use the current folder as the build context. Docker sends these files to the engine so it can process your COPY instruction.

You should see Docker processing each instruction from your Dockerfile line by line. The output ends with a success message and your image tagged as portfolio-site.

Seeing an error about the Dockerfile?

  • Make sure your terminal is inside the docker-portfolio folder, not inside site. The Dockerfile must be in your current directory.
  • Confirm your file is named exactly Dockerfile with a capital D and no file extension.
  • Check that Docker Desktop is still running. Look for the whale icon in your system tray.

Why is my docker build command failing?

Run your container

An image is just a blueprint. To actually serve your website, you need to start a container from that image. The container is a running instance that listens for web requests and responds with your HTML page.

  • Start your container by running this command:
docker run -d -p 8080:80 --name my-portfolio portfolio-site

What does this command do?

  • -d runs the container in detached mode (in the background), so your terminal stays free.
  • -p 8080:80 maps port 8080 on your computer to port 80 inside the container. NGINX listens on port 80 inside the container, so this lets you reach it from your browser.
  • --name my-portfolio gives the container a friendly name you can use in other commands.
  • portfolio-site is the image you just built.

Docker prints a long string of letters and numbers. That is the container ID confirming your container started successfully.

  • Open your web browser and go to http://localhost:8080.

You should see your portfolio landing page with the dark gradient background, the "Hello, I'm a Developer" heading, and your skills list. This is your website running inside a Docker container.

Page not loading in the browser?

  • Make sure you typed http://localhost:8080 (not https). Port 8080, not port 80.
  • If you see a "port already in use" error when running the container, another application is using port 8080. Stop that application or change the first number in -p to a different port like 9090.
  • Confirm Docker Desktop is still running. The whale icon should be visible in your system tray.

My Docker container started but I can't see my site in the browser.

Explore container management commands

Your container is running in the background. Docker gives you commands to inspect, monitor, and control it without opening Docker Desktop.

  • View all running containers by running this command:
docker ps

You should see a table with columns including CONTAINER ID, IMAGE, STATUS, PORTS, and NAMES. Your my-portfolio container should appear with a status of "Up" and port mapping 0.0.0.0:8080->80/tcp.

  • Check your container's logs by running:
docker logs my-portfolio

You should see NGINX access log entries. If you refreshed your browser earlier, each page request shows up as a line in the log output.

  • Stop your container by running:
docker stop my-portfolio
  • Refresh http://localhost:8080 in your browser. The page no longer loads because the container is stopped.

What just happened?

Stopping a container shuts down the process inside it (NGINX, in your case) but does not delete the container. The container still exists in a "stopped" state. You could restart it with docker start my-portfolio and it would come right back.

Getting "No such container" errors?

  • Check the container name matches exactly: my-portfolio. Names are case-sensitive.
  • Run docker ps -a to see all containers including stopped ones. This helps confirm the container exists.

Docker says it can't find my container. What should I check?

You have built an image, run it as a container, and managed its lifecycle. Next up, you will look under the hood at how Docker layers work and why rebuilds can be lightning fast.

Understand Images and Layers

You have a working container that serves your portfolio site. But what exactly did Docker create when you ran docker build?

Every Docker image is made of stacked layers. Each instruction in your Dockerfile creates one layer, and Docker caches those layers so rebuilds are fast. In this step, you will inspect your image's layers and see caching in action.

In this step, get ready to:
  • Inspect your image size and layer history.
  • Rebuild the image after a code change and observe Docker's layer caching.
Inspect your image and explore layers

Docker stores every image you build on your machine. You can list all of them along with their sizes to see how much disk space they use.

  • List all Docker images on your machine by running this command:
docker images

You should see portfolio-site in the list along with its tag, image ID, and size. The image is roughly 40-50 MB because it uses the lightweight Alpine variant of NGINX.

Why is the image so small?

The nginx:1.30.2-alpine base image uses Alpine Linux, a minimal distribution designed for containers. A full Debian-based NGINX image would be around 180 MB. Using Alpine is a best practice for keeping images small and fast to transfer.

  • View the layers that make up your image by running:
docker history portfolio-site

You should see a table listing each layer from bottom to top. Each row corresponds to an instruction in either the base image's Dockerfile or your own Dockerfile.

What does docker history show?

Each row in the output represents one layer of your image. The CREATED BY column shows which Dockerfile instruction produced that layer.

Your image has layers from the nginx:1.30.2-alpine base image at the bottom, your COPY layer in the middle (containing your site files), and the EXPOSE metadata layer on top. Docker caches each layer independently, which is what makes rebuilds fast.

Seeing truncated output?

The CREATED BY column is often cut short. If you want to see the full commands, you can add the --no-trunc flag. The important thing is recognizing which rows are yours and which come from the base image.

Help me read the output of docker history for my portfolio-site image.

Rebuild to see layer caching in action

Layer caching is what makes Docker rebuilds fast. When you change a file and rebuild, Docker reuses every cached layer that hasn't changed. It only rebuilds from the first layer where something is different.

  • Open site/index.html in your text editor.
  • Find this line inside the hero section:
<h2>Hello, I'm a Developer</h2>
  • Change the text inside the <h2> tags to something new. For example, change it to Hello, I'm a Docker Developer.
  • Save index.html.

Now you will rebuild the image. First, remove the stopped container so you can reuse the name.

  • Remove the stopped container by running:
docker rm my-portfolio
  • Rebuild the image by running:
docker build -t portfolio-site .

Watch the build output carefully. You should see Docker printing CACHED next to the FROM layer because the base image has not changed. Only the COPY layer runs fresh because the file contents are different.

What is layer caching?

Docker stores each layer with a content hash. When you rebuild, Docker checks whether the inputs to each instruction have changed. If they haven't, it skips the work and reuses the cached result.

In your Dockerfile, FROM nginx:1.30.2-alpine hasn't changed, so Docker reuses that layer instantly. COPY ./site detects your modified HTML and rebuilds from that point onward. This means only the small site-copy step runs again instead of downloading the entire NGINX image.

  • Run your updated container by running:
docker run -d -p 8080:80 --name my-portfolio portfolio-site
  • Open your browser and go to http://localhost:8080.

You should see your updated heading text on the portfolio page. Your change made it from your text editor into the running container through a rebuild.

Still seeing the old heading?

Try a hard refresh in your browser with Ctrl+Shift+R to clear the cache. If you still see the old text, make sure you saved index.html before rebuilding the image.

Also confirm you removed the old container with docker rm my-portfolio before running the new one. If the name was already in use, Docker would have shown an error when you ran docker run.

Help me troubleshoot why my Docker container is still showing the old heading after I rebuilt.

Secret mission

Live Development with Bind Mounts

Instead of rebuilding your Docker image every time you tweak your HTML or CSS, use a bind mount to map your local files directly into the running container. Edit your code on the host, refresh the browser, and see changes instantly.

Clean Up Your Resources

Clean Up Your Resources

This project runs entirely on your local machine using Docker Desktop, so there are no ongoing cloud costs. Decide whether to keep your resources running, pause them to come back later, or delete them entirely.

Resources you used:

  • Docker container: my-portfolio-dev (currently running).
  • Docker image: portfolio-site (built from your Dockerfile).
  • Docker images pulled from Docker Hub: nginx:1.30.2-alpine and hello-world.
  • Project folder: docker-portfolio on your Desktop.
  • Docker Desktop application.

Keep everything running

No action needed. Choose this if you are still actively building or want to keep experimenting with Docker commands.

  • Your my-portfolio-dev container continues serving your site at http://localhost:8080.
  • Docker Desktop stays installed for future projects.
  • Your docker-portfolio folder and all images remain on disk.

Pause - I'll come back to this later

Stop the running container and quit Docker Desktop to free up system memory. Your files and images stay on disk for next time.

  • Stop the running container by running this command in PowerShell:
  • Quit Docker Desktop by right-clicking the Docker whale icon in your system tray and selecting Quit Docker Desktop.
docker stop my-portfolio-dev

When you come back, open Docker Desktop and run this to restart your container:

docker start my-portfolio-dev

Delete - I don't want to use this again

Remove all project resources from your machine and start fresh.

  • Stop and remove the running container by running these commands in PowerShell:
docker stop my-portfolio-dev
docker rm my-portfolio-dev
  • Remove the Docker images you built and pulled:
docker rmi portfolio-site
docker rmi nginx:1.30.2-alpine
docker rmi hello-world
  • Delete the project folder from your Desktop:
cd ~\Desktop
Remove-Item -Recurse -Force docker-portfolio
  • Uninstall Docker Desktop by opening the Windows Start menu, then navigating to Settings > Apps > Apps & features.
  • Find Docker Desktop in the list and select Uninstall.
  • Confirm by selecting Uninstall again when prompted.

What does uninstalling Docker Desktop remove?

Uninstalling Docker Desktop destroys all Docker containers, images, volumes, and other Docker-related data on your machine. It also removes the Docker CLI and Docker Compose. Only uninstall if you are sure you do not need any of your Docker data.

Nice Work!

Nice Work!

You just containerized your first website with Docker. Your portfolio site is running inside a container, served by NGINX, and completely portable to any machine with Docker installed.

You've learned how to:

  • Written a Dockerfile using the official NGINX Alpine image to package a static HTML/CSS website into a portable Docker image.
  • Built a custom Docker image and run it as a container with port mapping to serve your site on localhost.
  • Managed the full container lifecycle (run, stop, remove) and used Docker's layer caching system for efficient rebuilds.
  • Used bind mounts to create a live development workflow where file changes appear instantly without rebuilding the image.

Ready to quiz yourself?