Free courses, built from a real production setup
Free courses with animated diagrams, built from a real production setup: DevOps from zero, system design step by step, and Claude Code tips.
By Matthews WongReviewed on
Key takeaway
Short lessons, each built around one animated diagram you step through at your own pace. Every lesson quotes the real configuration that runs this website, says what breaks, and ends with an exercise you can run on your own machine. Free, in English and Indonesian.
Free, no sign-up, no certificate. Built from the setup that runs this website.
Pick a track
- 8 lessonsDevOps from zeroA free DevOps course for beginners, built on the real pipeline behind this website: Docker, GitHub Actions, a VPS, nginx, Cloudflare and monitoring.Start the course
- 7 lessonsSystem design, step by stepA free system design course in seven modules: scaling, caching, databases, consistency, reliability and case studies, with step-through animated diagrams.Start the course
- 6 lessonsClaude Code tipsSix short Claude Code lessons built on a real repository: CLAUDE.md, permissions, skills, hooks, subagents and saving tokens, checked against the docs.Start the course
Step through the diagram yourself
Every lesson is built around one diagram like this, taken from the first DevOps lesson. Nothing moves until you press Play or step forward, and every step is written out underneath.
From git push to a page in the browser
A push runs verify, then build-and-push, which stores an image in the registry, then deploy, which makes the VPS pull and run it; visitors reach the app through Cloudflare and nginx.
Keys: ← → step · Home / End · K play or pause
One push, two halves. GitHub Actions turns a commit into a Docker image; the VPS runs it, and visitors reach it through Cloudflare and nginx.
A push to main is the event that starts the workflow. On a fresh runner, the verify job installs dependencies, typechecks and lints.
on: push: branches: [main]build-and-push needs verify, so it runs only when the checks pass. It builds the image and pushes it to GHCR, tagged latest and with the commit SHA.
needs: verifyPredict the next step Where do the app's secrets enter on the way to production? (Baked into the image at build time · Written to .env on the server)deploy needs build-and-push. It connects to the VPS over SSH and writes the runtime settings into .env from GitHub secrets; nothing secret is baked into the image.
chmod 600 .envThe server pulls the new image, and docker compose up -d replaces the running container with one made from it. That swap is the deploy.
docker compose pull docker compose up -d --remove-orphansA visitor's request reaches Cloudflare first, then nginx on the VPS, which terminates TLS and forwards it to the container listening only on localhost.
# Bind to loopback only — nginx terminates TLS and proxies to this port.Predict the next step Next, a hashed JavaScript file is requested. Who answers it? (Cloudflare, from its cache · nginx on the VPS · The Next.js container)Hashed static files, like JavaScript chunks, come straight from Cloudflare's cache. HTML always goes to the server, by choice: the same URL can also answer in Markdown.
cache-control: public, max-age=31536000, immutable cf-cache-status: HIT