Static Website with Docker

Mini Project: Running a Static Website with Docker

In this project, you'll put a small HTML page inside an Nginx container and run it in your browser. This approach is handy for packaging static content — landing pages, documentation pages, prototype pages, simple portfolio pages — into a container.

dockerfile

# 1) Create index.html
cat > index.html <<'EOF'
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Docker Static Site</title>
</head>
<body>
  <h1>Hello Docker</h1>
  <p>This page is running inside an Nginx container.</p>
</body>
</html>
EOF

# 2) Create Dockerfile
cat > Dockerfile <<'EOF'
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
EXPOSE 80
EOF

# 3) Build image
docker build -t docker-static-site:1.0 .

# 4) Run container
docker run --name docker-static-demo -d -p 8080:80 docker-static-site:1.0

First, index.html is created. Then you write a Dockerfile that uses the Nginx base image. Build it to produce the image, and run it as a container.

You should see

Open http://localhost:8080 in your browser, and you'll see the Hello Docker page.

Info

This project walks through the full Docker workflow — edit a file, write a Dockerfile, build the image, run the container, and check the result in your browser. It's a small project, but great practice for understanding the real-world workflow.