This project demonstrates how to containerize a simple static HTML website using Docker and Nginx, and automate the image build process using GitHub Actions for Continuous Integration (CI).
The goal is to give beginners hands-on experience with:
- Docker fundamentals
- Containerizing an application
- Writing a Dockerfile
- Running containers locally
- Automating builds with GitHub Actions
- Managing source code using Git and GitHub
⚙️ This project can run locally or on a virtual/cloud server.
| Goal | Description |
|---|---|
| ✅ Learn Docker | Understand how to build and run Docker images |
| ✅ Create Dockerfile | Containerize a basic HTML website |
| ✅ Serve via Nginx | Use a web server inside a container |
| ✅ Use GitHub Actions | Set up a CI pipeline to build images on each push |
| ✅ Host locally or remotely | Optionally serve the website from a local or cloud server |
| Tool/Tech | Purpose |
|---|---|
| 🐳 Docker | Containerization engine |
| 🖥️ Nginx | Web server to serve the static site |
| 👨💻 HTML/CSS | Static website content |
| 🔁 Git & GitHub | Source control and project collaboration |
| ⚙️ GitHub Actions | CI/CD automation |
| 🐧 Ubuntu (Local Server) | for hosting the site |
docker-static-website/
├── website/
│ └── index.html # Static website file
├── Dockerfile # Instructions to build the container
├── README.md # Project documentation
└── .github/
└── workflows/
└── docker-build.yml # CI pipelinemkdir docker-static-website
cd docker-static-website
mkdir websiteInside website/index.html, add a simple page:
<!DOCTYPE html>
<html>
<head><title>Hello from Docker</title></head>
<body>
<h1>Hello World 🌍</h1>
<p>This is a static site served with Docker and Nginx.</p>
</body>
</html># Use the official Nginx image
FROM nginx:alpine
# Copy website contents to Nginx’s public HTML folder
COPY website/ /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]docker build -t static-site .
docker run -d -p 8080:80 static-siteVisit: http://localhost:8080
git init
git add .
git commit -m "Initial commit"
git remote add origin git@github.com:yourusername/docker-static-website.git
git push -u origin main✅ You are now using SSH authentication with GitHub.
Path: .github/workflows/docker-build.yml
name: 🚀 Build Docker Image on Push
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: 📥 Checkout code
uses: actions/checkout@v3
- name: 🐳 Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: 🛠️ Build Docker Image
run: |
docker build -t ascloudx/static-site:latest .Push the changes:
git add .github
git commit -m "Add CI pipeline"
git pushNow visit the Actions tab on your GitHub repo and you’ll see the workflow triggered! 🎉
If you have a local or cloud server:
docker run -d -p 80:80 static-siteMake sure your firewall allows port 80.
- ✔️ Understanding Docker and Dockerfiles
- ✔️ CI automation using GitHub Actions
- ✔️ GitHub SSH authentication setup
- ✔️ Building production-ready containers
- ✔️ Real-world DevOps workflow experience