Project: Deploying a Static Site with Nginx Containers
In this project, we will package a static HTML website into a custom Docker image and deploy it using a lightweight Nginx web server.
1. Project Workflow
graph TD
A[Create index.html page] --> B[Write Dockerfile inheriting from Nginx]
B --> C[Build image: docker build -t static-site]
C --> D[Run container mapping port 80]2. Walkthrough Guide
Step 1: Create the Project Files
Create a new directory and build a basic HTML landing page:
mkdir my-static-site
cd my-static-siteCreate an index.html file:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Docker Static Site</title>
<style>
body { font-family: sans-serif; text-align: center; margin-top: 100px; }
</style>
</head>
<body>
<h1>Hello World! Hosted in Nginx and Docker!</h1>
</body>
</html>Step 2: Write the Dockerfile
Create a Dockerfile in the same directory:
# Inherit from official Nginx image
FROM nginx:alpine
# Copy local index.html into Nginx default public directory
COPY index.html /usr/share/nginx/html/index.html
# Expose HTTP port 80
EXPOSE 80Step 3: Build the Image
Build the image locally:
# Build the image and tag it as 'my-static-site'
docker build -t my-static-site .Step 4: Run the Container
Run the container, mapping host port 8080 to container port 80:
docker run -d -p 8080:80 --name web-container my-static-siteOpen your browser and navigate to http://localhost:8080 to view your running static site.
Published on Last updated: