Initializing the Edge-First Web Platform on Cloudflare Pages
How this portfolio and publishing platform achieves sub-100ms global latency, strict TypeScript content collections, and zero homelab origin exposure at $0.00/month.
Why Edge-First Static Architecture?
Modern personal platforms and engineering showcases face a common tension: balancing expressive interactivity with operational simplicity and security. Running a self-hosted origin server from a homelab introduces unnecessary attack surface, dynamic patching overhead, and availability risks if local power or ISP links fluctuate.
By pairing Astro Static Site Generation (SSG) with Cloudflare Pages, this platform enforces a strict security boundary:
- Zero Public Inbound Homelab Exposure: Every public HTTP/HTTPS request terminates directly at Cloudflare’s anycast edge network across 300+ global cities. No port forwarding or public ingress rules touch local infrastructure.
- $0.00 / Month Baseline Cost: Pre-rendered HTML, CSS, and static assets are served directly from Cloudflare Pages’ free tier with unmetered static bandwidth.
- Compile-Time Content Integrity: Using Astro Content Collections backed by Zod schemas, every article’s frontmatter (
title,publishDate,description,tags) is validated at build time before deployment.
Architectural Overview
+-------------------------------------------------------------------+
| Git Repository (GitHub/GitLab) |
| src/pages/* | src/content/posts/* | src/pages/showcase/* |
+-------------------------------------------------------------------+
|
| git push (CI/CD trigger)
v
+-------------------------------------------------------------------+
| Cloudflare Pages Build Pipeline |
| Command: npm run build -> Output: dist/ |
| - TypeScript Strict Validation |
| - Zod Content Collection Schema Checks |
| - Tailwind CSS Utility Purge & Minification |
+-------------------------------------------------------------------+
|
v
+-------------------------------------------------------------------+
| Cloudflare Global Anycast Edge (alhamaz.me) |
| / -> Static Portfolio & Bio |
| /posts/* -> Pre-rendered Technical Writing |
| /showcase/* -> Modular Interactive Demos & Edge Hooks |
+-------------------------------------------------------------------+
Typed Content Collections in Practice
Every post inside src/content/posts/ is validated against a strict schema:
const postsCollection = defineCollection({
schema: z.object({
title: z.string().min(1),
publishDate: z.coerce.date(),
description: z.string().min(10),
tags: z.array(z.string()).default([]),
}),
});
If a draft is committed with a malformed date or missing description, npm run build fails immediately in CI—preventing broken deployments from ever reaching alhamaz.me.
What’s Next
- Expanding
/showcase/*with interactive client-side engineering tools and visualizations. - Publishing deep-dive architecture notes on distributed systems, edge compute, and security engineering.