Dockerize an HTML Website Using Nginx with screenshots

Dockerize a Basic HTML Website Using NGINX

Step 1 — Create your website

Create a folder:

my-website/

Inside it, keep your files:

my-website/
│
├── index.html
├── style.css
└── script.js

Make sure index.html is your main webpage.

Step 2 — Create a Dockerfile

Inside the my-website folder, create a file named exactly:

Dockerfile

Add:

FROM nginx:latest

COPY . /usr/share/nginx/html

EXPOSE 80

What does this mean?

Command	Purpose
FROM nginx:latest	Uses the official NGINX image
COPY . /usr/share/nginx/html	Copies your website files into NGINX's web directory
EXPOSE 80	Indicates that NGINX uses port 80

Step 3 — Open the terminal

Open PowerShell or the VS Code terminal.

Go inside your website folder:

cd "C:\Path\To\my-website"

For example:

cd "C:\Users\Sandeep\Desktop\my-website"

Check your files:

dir

You should see:

Dockerfile
index.html
style.css
script.js

Step 4 — Build the Docker image

Run:

docker build -t html-website .

Explanation:

docker build       → Build an image
-t                 → Give the image a name
my-html-website    → Image name
.                  → Use the current folder

You should eventually see something similar to:

Successfully tagged my-html-website:latest

Step 5 — Check the Docker image

Run:

docker images

You should see:

REPOSITORY               TAG       IMAGE ID
my-html-website         latest    xxxxxxxxx
html-nginx               latest    xxxxxxxxx

You can check these docker container and images in Docker Desktop

IMAGE                               ID              DISK USAGE   CONTENT SIZE   EXTRA

webserver-image:v1   91a0de7e72f8       92.7MB         26.1MB       U

Step 6 — Run the container

Run:

docker run -d -p 8080:80 --name website-container html-nginx-website

Here:

Part	Meaning
docker run	Create and run a container
-d	Run in background
-p 8080:80	Connect computer port 8080 to container port 80
--name	Give the container a name
my-html-website	Docker image

Step 7 — Check the container

Run:

docker ps

You should see something similar to:

CONTAINER ID   IMAGE              PORTS
xxxxxxxx       my-html-website    0.0.0.0:8080->80/tcp

This means your NGINX container is running.

Step 8 — Open your website

Open your browser and visit: http://localhost:8080/

http://localhost:8080

Your HTML website should now appear.

The Docker request flow is:

Browser
   ↓
localhost:8080
   ↓
Docker Container
   ↓
NGINX :80
   ↓
index.html
   ↓
Website

Step 9 — View container logs

To see NGINX logs:

docker logs my-website-container

To continuously watch the logs:

docker logs -f my-website-container

Press Ctrl + C to stop watching.

Step 10 — Stop the website

docker stop my-website-container

Check:

docker ps

The container should no longer appear in the running-container list.

Before

Than

Step 11 — Start it again

You don't need to build the image again.

Simply run:

docker start my-website-container

Then visit:

http://localhost:8080

Step 12 — Remove the container

If you want to completely remove the container:

docker stop my-website-container
docker rm my-website-container

The image will still exist.

Check it:

docker images

All container are removed from docker desktop

Complete Dockerization Process by Flow chart

For your first Dockerized HTML website, remember this workflow:

HTML/CSS/JS Website
        ↓
    Dockerfile
        ↓
   docker build
        ↓
    Docker Image
        ↓
    docker run
        ↓
 Docker Container
        ↓
      NGINX
        ↓
   localhost:8080
        ↓
      Website

Most important commands for Docker

docker build -t my-html-website .

docker images

docker run -d -p 8080:80 --name my-website-container my-html-website

docker ps

docker logs my-website-container

docker stop my-website-container

docker start my-website-container

docker rm my-website-container

Important: Make sure Docker Desktop is running before executing these commands. If Docker Desktop isn't running, commands such as docker build or docker ps can fail because the Docker daemon isn't available.