# How This Site Is Built — Self-Hosted Next.js | Matthews Wong

> How matthewswong.com is built and self-hosted: Next.js 15 in Docker on a 1 vCPU VPS behind Cloudflare, shipped by GitHub Actions, watched by Grafana.

URL: https://www.matthewswong.com/en/architecture/

## How This Site Is Built — Self-Hosted Next.js on Docker

## FAQ

### Is this site hosted on Vercel?

No. It started on Vercel but is now self-hosted: a standalone Next.js Docker image runs in a 1 vCPU / 512 MB container on a small VPS, fronted by Cloudflare, with nginx terminating TLS. The move gave one predictable monthly cost and full control of the runtime.

### How is the site deployed?

Every push to main runs a GitHub Actions pipeline: typecheck and lint, then build a Docker image, push it to GHCR tagged by commit SHA, and deploy over SSH with docker compose. The container is replaced in place only after its healthcheck passes.

### Why does the site use WebP instead of AVIF for images?

On a 1 vCPU box, encoding a cover to AVIF measured 4–9 seconds versus about 0.6 seconds for WebP — a 7–16x penalty — and Cloudflare does not yet cache the image optimiser, so the origin pays that cost repeatedly. WebP wins until the edge caches optimised variants.

### How does the site stay fast on a single small VPS?

Every page is statically prerendered at build time, Cloudflare absorbs repeat traffic at the edge, the client i18n payload was cut from 1.6 MB to 76 KB, and the animated footer is roughly 4 kB of hand-written WebGL instead of a 3D library.

### How is the site monitored?

It reports into a self-hosted Grafana, Prometheus, and Loki stack alongside the client servers beside it, with alert rules that escalate to a phone call. A Docker healthcheck probes the container every 30 seconds and uptime-kuma checks the public URL externally.

---

- HTML version: https://www.matthewswong.com/en/architecture/
- Bahasa Indonesia: https://www.matthewswong.com/id/architecture/
- Site index for agents: https://www.matthewswong.com/llms.txt
- Sitemap: https://www.matthewswong.com/sitemap.xml
- API description (OpenAPI): https://www.matthewswong.com/openapi.json