Bakery Website Template
Demo brand: MALTGARTH BAKEHOUSE · Bakery / bakehouse · 28 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this bakery website template
A complete website for a neighbourhood bakery: a hero with today's bake board, ten bread and pastry pages with prices and allergens, a working pre-order builder with collection days and slots, a bread box subscription page, a wholesale price list by the case, recipes, an allergen table, an FAQ and contact. Twenty-eight built pages, all driven by content files.
It looks like a good bakery counter. Flour-white pages, white cards and kraft-paper panels, one dark rye band, and real bakehouse photography carrying the colour: loaves on oak shelves, scoring at the oven, croissants, focaccia and rye. Bitter for headings and prices, Inclusive Sans for everything else, crust brown as the one accent, and square corners throughout.
Every section answers what a customer asks at the till: what is on today and when does it sell out, how much is it, can I set some aside, what is in it, and is a weekly box worth it. Cafés get their own answer in trade prices by the case, delivery times and terms. Motion is one quiet reveal.
The 28 pages you get
- Home
/ - Split hero with the counter photo and an "On the counter today" board with prices and sell-out times, promises, six featured bakes, the bakehouse story on a dark rye band, process, the pre-order builder with trade prices, bread box vs walk-in table, customer quotes, three recipe cards, FAQ beside an allergens card.
- Breads
/breads/ - Seven loaves and three pastries as cards with price, weight and bake days, grouped with jump links.
- Bread pages
/breads/…/ - Ten bakes. Photo, price, flour, fermentation, hydration, bake days, how long it keeps, allergens, trade case price, a pre-order button that adds it to the builder and a trade enquiry button.
- Pre-order
/pre-order/ - The builder on its own page: pick bakes and quantities, a collection day from the next seven (closed days and past-cut-off days disabled) and a slot, with a live total. It sends a plain-text order to the contact form.
- Bread box
/bread-box/ - Weekly and fortnightly subscription plans, an honest comparison with walking in, and the loaves customers can choose from.
- Wholesale
/wholesale/ - Trade prices by the case for every bake, standing terms (minimum order, delivery window, cut-off, invoicing) and how to get started.
- Bakehouse
/bakehouse/ - The story, a day in the bakehouse by the clock, how the croissants are laminated, and the bakers, without face photos.
- Journal
/journal/ - Recipes and bakehouse notes in two groups. Add a Markdown file and it appears here.
- Articles
/journal/…/ - Five written pieces: focaccia, cinnamon buns and keeping a sourdough starter as full recipes with times, plus milling and fermentation notes.
- FAQ
/faq/ - Eight always-open questions on timing, pre-orders, paying, slicing, gluten, freezing, events and parking, beside the allergens card.
- Allergens
/allergens/ - A table of what every bake contains and may contain, built from the bread files.
- Contact
/contact/ - Address, phone, hours per day and directions, and a form that pre-fills the order, the bake or the bread box plan from any link.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout, including pre-order, bread box and wholesale terms.
- 404
/404 - Designed, with a way back to the breads.
What is in the build
- A pre-order builder with quantities, the next seven collection days, per-day slots, a 2pm cut-off and a live total, working without JavaScript too
- Breads as content: price, weight, bake days, allergens, trade case price and photo in one Markdown file per bake, feeding the pages, builder, bake board, trade list and allergen table
- A wholesale price list with case sizes and per-unit prices next to the counter price
- A bread box subscription page with a stacked-on-mobile comparison against buying at the counter
- Opening hours and collection slots per weekday in one file, shown in the footer, contact page and builder
- Real bakehouse photography, optimised to WebP by Astro, and one accent colour that rebrands the site
- Vitest and Playwright suites included
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- Flour-white ground with white cards, kraft panels and one dark rye band, Bitter headings over Inclusive Sans, real bakehouse photography of loaves, scoring and croissants, and a single crust-brown accent on square corners.
- The mechanic
- A pre-order builder picks bakes, one of the next seven collection days and a slot, shows a live total and sends the order to the contact form; bread pages carry allergens and trade case prices, alongside a bread box plan and a wholesale price list. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Bakehouse loaves, scoring, croissants, rye
- Type & palette
- Bitter · Inclusive Sans
-
#faf6ef#231a14#8f3c0d
Who it is for
Built for neighbourhood bakeries, sourdough bakehouses, patisseries and bakery cafés that sell at a counter, take pre-orders and supply a few local cafés or restaurants. It also suits a micro-bakery selling by collection only. This template is free.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Do customers pay online for pre-orders?
No. The builder sends the order to your contact form as plain text and customers pay at the counter when they collect. If you want payment up front, swap the send button for a Stripe Payment Link or similar; the README shows where.
How do I change opening days and collection slots?
Edit the hours list in one file. Each weekday has its opening times, a closed flag and its collection slots, and the footer, contact page and pre-order builder all follow.
Where do allergens come from?
Each bread file lists what it contains and what it may contain. The bread page, the allergen table and the allergens card all read from it. The shipped data is an example; replace it with your own recipes.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its photographer in LICENSING.md. Photos with faces or brand names were left out or cropped.
What exactly do I get for free?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More food & drink templates
KELDMOOR HONEY HOUSE
Apiary / honey house
Loud
Imagery
Lowfield Salt
Solar saltworks
Loud
Imagery
QUARLOW ROASTING CO.
Coffee roastery
Loud
Imagery
SÖL — Kitchen & Fire
Restaurant
Loud
Moving set-piece
MARLEDON ESTATE
Winery / vineyard estate
Loud
Imagery