HZ Bakers
How we built HZ Bakers: a static Astro site for a home bakery, with a cake menu in rupees, WhatsApp ordering and a custom-cake request form.
The client.
OverviewHZ Bakers is Ufaq Warsia's home bakery in Saima Arabian Villas, North Karachi. Cakes are picked up in Saima Arabian Villas or delivered inside Saima Arabian Villas and anywhere in Karachi. Its site offers custom kids' theme, birthday, occasion and bento cakes, made to order two to three days ahead, plus brownies and sundae cups on a day's notice. Orders are taken on WhatsApp, on Instagram and through the site's own order form.
The goal.
BriefA home baker who sold through Instagram and WhatsApp needed a site of her own. It had to show she is real, with her story and photos of real cakes. It had to list the cakes with prices so customers can browse before they message, take a custom-cake request with a reference picture, and keep WhatsApp one tap away. And it had to stay light on a phone.
What we built.
Build- Designed and built the site on Astro as static pages, styled with hand-written CSS on a Tailwind CSS v4 base, and served from Cloudflare Pages on the bakery's own domain. The look is a birthday party: polaroids of real cakes, confetti and a marquee of what she bakes, with drawn illustrations standing in where a photo does not exist yet.
- A cake menu with prices in rupees, sizes and servings, with a page per cake and per category (kids' theme, birthday, occasion, bento, brownies and cupcakes). The menu, prices, FAQs and the baker's story live in a few plain TypeScript data files that the pages are built from.
- The custom-order form posts to a Cloudflare Pages Function, which checks a Cloudflare Turnstile token, saves the request in a D1 database and then sends it on by email, so a failed email never loses a lead. An optional reference photo is shrunk in the browser before upload. No email address appears anywhere on the site.
- WhatsApp first: a click-to-chat link in the header or menu and in the footer of every customer page, with a prefilled message that names the page it came from. A floating WhatsApp button appears once the opening section's buttons, or the opening section itself where it has none, scroll out of view, on every customer page except the order, design and link-in-bio pages. And the Order a cake button stays in the header at every screen size instead of folding into the menu.
- A Design Your Cake page: shape, tiers, weight, flavour, frosting colour, drip, toppings and a message, with a live preview drawing and a 3D view where WebGL works, a price estimate from the owner's rate card, a link to share the design, and an Order this cake button that opens the order form with the design attached.
- Built for search and for AI tools: a Bakery schema with the areas it serves, a title and description per page, a sitemap, llms.txt, and a Markdown twin of every indexable page that the server also returns when asked for text/markdown. Fonts are self-hosted, photos ship as AVIF and WebP, and every page is served with a Content-Security-Policy and the other security headers.
Features.
On the live siteOn the site
- Cake menu with prices in rupees, sizes and servings, and a page per cake
- Category pages: kids' theme, birthday, occasion, bento, brownies and cupcakes
- Custom-order form with reference-photo upload and Turnstile spam protection
- WhatsApp click-to-chat on every customer page, prefilled with the page it came from
- Design Your Cake configurator with a live preview, an optional 3D view and a price estimate
And also
- Delivery page with the areas served, pickup and payment details
- A wall of real cake photos linking to Instagram, the baker's story, FAQ and two guides
- Link-in-bio page for Instagram with tracked links
- llms.txt and a Markdown version of every indexable page
- Sitemap, Bakery schema and security headers on every page
Tech.
Checked 2026-10-21| Technology | How you can check it |
|---|---|
| Astro (static output) | The live pages load their linked stylesheets, web fonts and cake photos from /_astro/ with hashed filenames and carry Astro's data-astro-cid style attributes, and a repeated request returns the same HTML bytes, with no Set-Cookie header. |
| Tailwind CSS v4 | The live site's main stylesheet under /_astro/ declares Tailwind v4's theme, base, components and utilities cascade layers and registers its --tw-* custom properties with @property. |
| Cloudflare Pages | The live response sends server: cloudflare, and hz-bakers.pages.dev answers with a 301 to hzbakers.com. |
| Cloudflare Pages Functions | The order form posts to /api/lead; a GET to that path answers 405, so it is a function, not a page. |
| Cloudflare Turnstile | The order page loads challenges.cloudflare.com/turnstile/v0/api.js and its form carries a cf-turnstile widget. |
| AVIF and WebP responsive images | Each cake photo on the homepage is a picture element with an AVIF source set of up to four widths, from 360 to 960 px, and a WebP fallback. |
| Self-hosted fonts | The live page preloads Shrikhand and Nunito .woff2 files from its own /_astro/ path, with no third-party font host. |
| JSON-LD Bakery schema | The homepage carries JSON-LD with @type Bakery, WebSite and Person, and a Place for each area served. |
| Markdown twins and llms.txt | /llms.txt, /llms-full.txt and /index.md answer as text, and a request for /about/ with Accept: text/markdown returns Markdown. |
| Security headers | The live response sends a Content-Security-Policy, Strict-Transport-Security, X-Frame-Options: DENY and a Permissions-Policy. |
Screenshots.
Live site
Screenshots of hzbakers.com, taken 2026-10-21. Shown with permission (Ahsan confirmed 2026-10-21). No results are claimed on this page.
Want a site
like this?
Send a line about your business, what the site needs to do, and a budget range if you have one. You will get a fixed quote, usually within 24 hours.