Gutter Cleaning Website Template
Demo brand: CLEARRUN · Gutter cleaning & repair · 20 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this gutter cleaning website template
A complete website for a gutter cleaning and repair business: an instant price by house type in the hero, a full quote with extras that books the next free day, a plan chooser that prices three years of cleans, five service pages, a prices page, a service-area page, the firm’s story, four seasonal guides, an FAQ and a booking form that arrives pre-filled. Twenty built pages, all driven by content and data files.
It looks like a careful local firm. Cool white pages with pale rain-grey blocks, one dark slate band over a roof-tile texture, real photography of rooflines, blocked gutters, downpipes and rain on tiles, and one storm-cyan accent. Bree Serif for headings and Ubuntu Sans for everything else.
Every section answers what a homeowner wants to know before they book: what does my house cost, do I need to be in, how do I know it was done and is a plan worth it. The quote gives a fixed price and time on site, the before-and-after photo report is the promise, and the plan chooser and five-year table show when a plan or guards pay off. Motion is one quiet reveal.
The 20 pages you get
- Home
/ - Headline, price and services buttons and a trust line over a roofline photo, beside a house-type picker with an instant price. Then promises, five services, the firm band, how a clean goes, the full quote with the plan chooser, reviews attached to house photos, seasonal guides, FAQ and a closing call to action.
- Services
/services/ - All five services with prices from.
- Service pages
/services/…/ - Gutter cleaning, gutter repair, downpipe unblocking, gutter guards and fascia and soffit cleaning: price, what is included and a book button that pre-selects the service.
- Prices
/prices/ - The quote, the price for every house type and height, extras and repairs, and a five-year comparison of one-off cleans, a twice-yearly plan and guards.
- Areas
/areas/ - The towns and villages covered, grouped by direction, with a call to join the next round.
- About
/about/ - Why the photo report, why from the ground, the kit in the van, and insurance and wildlife care.
- Guides
/journal/ - Seasonal guide cards. Add a Markdown file and it appears here and in the sitemap.
- Guides
/journal/…/ - Four written guides: when to book an autumn clean, an overflowing gutter in the rain, the spring check and summer storms and downpipes.
- FAQ
/faq/ - Every question in a centred accordion.
- Book a clean
/contact/ - Booking request with house type, storeys, which gutters, extras, plan, date and postcode, filled in from the quote, the hero picker or any book button.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to home and to booking.
What is in the build
- A hero house-type picker drawn in code that gives an instant from-price and links to the full quote
- A gutter quote: house type, storeys, front-and-back or all round, and extras give a fixed price, metres of gutter, time on site and the next free day, then carry everything to the booking form
- A plan chooser that prices one-off cleans, a twice-yearly plan and guards with an annual check over three years
- Every house type, price, extra and plan in src/data/gutters.ts, with the pricing maths in src/lib/quote.ts and tested
- Services and guides as content collections, and every business fact, opening hour and town covered in one file
- Real photography, every image credited in LICENSING.md; one accent colour and two fonts rebrand the whole 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 71 different worlds reading as one design system in different paint.
- The world
- Cool white ground with pale rain-grey blocks and one dark slate band on a roof-tile texture, Bree Serif over Ubuntu Sans, real photos of rooflines, blocked gutters and downpipes, and one storm-cyan accent.
- The mechanic
- Customers pick terrace, semi, detached or bungalow, storeys, which gutters and extras to get a fixed price, time on site and the next free day, then a pre-filled booking; a plan chooser prices one-off cleans, a twice-yearly plan and guards over three years. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Rooflines, blocked gutters, downpipes and rain on tiles
- Type & palette
- Bree Serif · Ubuntu Sans
-
#f7f9fa#16212a#0e7c9b
Who it is for
Built for gutter cleaners, gutter repair firms and exterior cleaning businesses that clear gutters, unblock downpipes, fit guards and wash fascias. It suits a business that wants customers to price their own house and book online, and it works with any currency or price list by editing one data file.
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
How do I change the house types and prices?
Edit src/data/gutters.ts. House types, storeys, gutter lengths, extras and plans all live there, and the hero picker, quote, plan chooser, service pages and prices page update together.
Is this template really free?
Yes. You get the full source in a private GitHub repo: every page, the quote, the plan chooser, the photos and the tests. Paid templates also ship Claude Code skills for editing; this one does not.
Where do bookings go, and what about my business details?
The booking form posts nowhere by default; point it at your form backend, and the README shows how. The company number and insurance details are placeholders in normal sentences in src/data/site.ts, to fill in before launch.
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 trades & industry templates
KELMER OVERHEAD DOOR
Garage door repair
Loud
Imagery
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Imagery
KANWICK STEELWORKS
Steel fabrication
Loud
Imagery
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Imagery
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Imagery