Put Your Site in a Box

01The Mission

Project 1 put your site on someone else's computer — a bucket in a building you will never see. Project 2 puts it in a box. Notes 07 opened with Malcom McLean's fifty-eight steel boxes: once the cargo was in a standard box, the crane stopped caring what was inside. Same idea here — once your site is in a container image, it runs bit for bit the same on your laptop, your friend's Mac, or a server in Ohio.

You already have the cargo. You'll write the recipe (a two-line Dockerfile — given below), freeze the meal (docker build), serve it (docker run), and check the box into the app store for boxes (docker push). The whole arc of Notes 07, once, with your own stuff.

Why this matters: every service for the rest of this course — the containers Kubernetes manages in Notes 08, the images a CI pipeline builds in Notes 12 — ships exactly like this box. Ship one and you know how they all ship.

02The Five Steps

1. Get your cargo. Make a new empty folder. Put your Project 1 page in it, named index.html (plus any CSS or pictures). Lost it? See the FAQ — a one-line page is fine.
2. Write the recipe. In the same folder, create a file named exactly Dockerfile (no extension) with the two lines below. Yes, two lines — the FAQ explains why that's all of it.
3. Build the box and serve it. Run the commands in Plate 3, then open http://localhost:8080. That's your site — served by a web server running inside the box, on your own machine.
4. Take the one screenshot. While the container is running, open a second terminal and run docker ps. Put the browser (your site at localhost) and that terminal side by side, and take one screenshot showing both. This is your proof-of-box.
5. Ship it. Make a free account at hub.docker.com if you don't have one, then run the three commands in Plate 4. Your image is now pullable by anyone on Earth — like your Project 1 URL, but it's the whole box.

# start from a box somebody already built: nginx, a small finished
# web server on the tiny alpine base from Notes 07 — a frozen meal
# that is already a restaurant. You're just changing the menu.
FROM nginx:alpine

# copy this folder (the .) onto the shelf where nginx looks for
# pages to serve. That's it — your site is now inside the box.
COPY . /usr/share/nginx/html

# 1. follow the recipe; the . means "this folder"
docker build -t mysite:v1 .

# 2. serve it: your port 8080 → the box's port 80
docker run --rm -p 8080:80 mysite:v1

# 3. open http://localhost:8080 — that's the box talking

From Notes 07: the left number in -p 8080:80 is your side; nginx listens on 80 inside the box. And -t mysite:v1 tags the image v1 — a label chosen on purpose, exactly what checkbox 4 pays for.

# 1. log Docker in to your Docker Hub account (asks once)
docker login

# 2. give the image its public name — a second label, not a copy
docker tag mysite:v1 YOURNAME/mysite:v1

# 3. ship the box
docker push YOURNAME/mysite:v1

Your image now lives at https://hub.docker.com/r/YOURNAME/mysite — the link you hand in. Open it in an incognito window: if you can see it, so can I. (New repositories are public by default; if yours says Private, flip it in Settings.)

03Hand In

04Grading — Five Checkboxes

100 points, five boxes, 20 each. I grade straight off this list, fast.

• The Docker Hub link works and the image is public. I open your link in a logged-out browser and the repository is there, pullable by anyone.20
• The box serves your site. On my machine, docker run --rm -p 8080:80 YOURNAME/mysite:v1 shows your page at localhost:8080 — nginx (or the base you named) with your site inside.20
• The screenshot shows both things in one frame: your site open at localhost and a terminal with docker ps listing your running container.20
• The image has a tag you chose on purpose. v1, v1.0, fall2026 — anything deliberate. Not the bare :latest Docker quietly slips in when you don't type one (Notes 07).20
• Submitted on time via Brightspace — Monday, November 9, 11:59 PM. The easiest 20 points here: don't ship the box at 11:58.20

05FAQ

I lost my Project 1 site.

No problem. Make a fresh index.html — even <h1>hello from inside a box</h1> is enough. This project grades the box, not the cargo.

Docker Desktop won't install on my machine.

Two escape hatches: the lab machines have Docker ready, and play-with-docker.com gives you a free Docker machine in the browser (log in with your Docker Hub account). Every command here works there unchanged.

Mac or Windows — are the commands different?

No. Identical on Mac, Windows, and Linux — that's rather the point of the box. (Apple-silicon owners: nginx:alpine is published for your chip too, so the exec format error story from Notes 07 can't bite you here.)

Is two lines really enough?

Yes. nginx:alpine is already a complete, configured web server — layers of other people's work, frozen. Your recipe adds one thing on top: your files. A short Dockerfile is a feature, not a shortcut.

Do I need Kubernetes for this?

No. Kubernetes (Notes 08) is the manager that runs many boxes and replaces the sick ones. This is one box, run by hand. Ship one before you hire a manager for a fleet.

Port 8080 is already in use.

Something got there first. Pick another left-hand number — -p 9090:80 — and visit localhost:9090. The box's side stays 80; only your side moves.

Can I use a different base image?

Sure — httpd:alpine (Apache) or any small web-server base. Just put the base and your exact docker run line in the Brightspace comment box, so checkbox 2 can find your site.