How We Vibe-Coded This Site and Ship Updates in Under 5 Seconds

No $20 templates, no bloated stacks—just a lightweight Next.js export, hand-rolled styles, and a fast Cloudflare Pages deploy.

Why vibe-code instead of buying a template?

Templates save time until they don't. You inherit someone else's layout decisions, mystery CSS, and slow scripts. We wanted:

Full control of the look and rhythm.
Minimal dependencies to keep it fast.
Markdown-powered content for newsletters and blog posts.

The stack we used

Next.js App Router with output: "export" for static HTML.
TypeScript + react-markdown for newsletter rendering.
Custom CSS in styles/globals.css instead of a component library.
Cloudflare Pages via CLI for zero-config hosting.

Designing without a template

Pick a simple palette and set CSS variables for bg, text, accent.
Create a few reusable classes (cm-card, cm-section, cm-list) and reuse them everywhere.
Use grid utilities for two-column spots (like recent issues + resources).
Keep typography tight: consistent heading sizes, limited fonts (system stack here).

Ship updates in under 5 seconds

Once the site is vibe-ready, shipping takes minutes:

Install deps: npm install
Build static export: npm run build
Publish the static export to your host (we use Cloudflare Pages):

The out/ directory is generated by Next export, so Pages just serves static files—no server code, no cold starts. With cached builds, updates typically publish in under 5 seconds.

What you can reuse

Markdown-driven content: drop new issues into your newsletter folder and they auto-render.
Layout primitives: copy the cm-* classes for cards, grids, and resource lists.
Light/dark toggle and metadata setup already wired.

Want help vibe-coding your own?

We love helping Pro Coders and Vibe Coders ship fast. If you want a similar setup or a custom agent-powered workflow, let's talk.

Connect with us on LinkedIn and we'll sketch a plan for your stack and deployment.