Dumpster Rental Website Template
Demo brand: BRACKHOLT ROLL-ON HIRE · Roll-off dumpster / skip hire · 20 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this dumpster rental website template
A complete website for a skip hire or roll-on roll-off container business: a size strip in the hero, a working skip size finder with live prices and delivery dates, six service pages, a sizes-and-prices page, a road permits page, the yard, three how-to 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 well-run yard. White pages with concrete-grey blocks, one dark band over a concrete texture, real photography of skips, lorries, rubble and a sorting hall carrying the colour, and one container-blue accent. Barlow Semi Condensed for headings and prices, Public Sans for everything else.
Every section answers what a customer asks before booking a skip: which size do I need, what will it cost all in, when can it arrive, what can go in it and do I need a permit. The size finder answers all five in one card, and the comparison table says when a grab lorry or a man and van is the better buy. Motion is one quiet reveal.
The 20 pages you get
- Home
/ - Headline, call and price buttons, a trust line and every skip size drawn to scale beside a person. Then promises, the six ways to hire, the hire steps, the size finder, the recycling band, skip vs grab lorry vs man and van, reviews, three guides, FAQ and a booking band.
- Skip hire
/skip-hire/ - All six services with price-from, plus the comparison table.
- Service pages
/skip-hire/…/ - Six services: home and garden, builders’, rubble and soil, enclosed, roll-on roll-off, wait and load. Photos, price from, what’s included, who it suits, a review, and a book button that pre-selects size and waste type.
- Sizes and prices
/skip-sizes/ - Seven sizes from 2 to 40 yards with footprint, bin bags, weight limit and price, the size finder, rates by waste type and every extra charge listed.
- Road permits
/permits/ - How a skip goes on the road: who applies, what it costs, how long it takes and the rules while it’s there.
- About the yard
/about/ - The firm, what happens to each waste stream, the numbers and a registration line for your own details.
- Guides
/journal/ - A card list. Add an .mdx file and it appears here and in the sitemap.
- Guides
/journal/…/ - Three written guides: choosing a skip size, putting a skip on the road, and what can’t go in a skip. Each ends with quick answers.
- FAQ
/faq/ - Twelve questions in a two-column accordion under Booking, What can go in and Permits.
- Book a skip
/contact/ - Booking request with size, waste type, service, job, placement, hire length and delivery day, filled in from the finder or any book button.
- Privacy and terms of hire
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to home and the price list.
What is in the build
- A skip size finder: job and bin-bag volume give a size by volume and weight, then waste type, hire length and drive or road give the price line by line, the weight limit, what can go in and the earliest delivery date
- Delivery dates worked out from a 2pm cut-off, working days, bank holidays and council permit days, all set in one data file
- A hero size strip drawing all seven sizes to scale; tapping one sets the finder
- Every size, price, weight limit, waste rate, permit fee and closed day in src/data/skips.ts, with the maths in one tested file
- Services and guides as content collections, and every business fact in one file
- Real skip, lorry, rubble and yard photography with company names and plates retouched out
- 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 65 different worlds reading as one design system in different paint.
- The world
- White ground with concrete-grey blocks and one dark concrete band, Barlow Semi Condensed over Public Sans, real photography of skips, lorries and rubble, and one container-blue accent.
- The mechanic
- Job and bin-bag volume give a skip size by volume and weight; waste type, hire length and drive or road then give a line-by-line price, weight limit, what can go in and the earliest delivery date, and the booking button pre-fills the form. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Skips, skip lorries, rubble, timber and sorting yard
- Type & palette
- Barlow Semi Condensed · Public Sans
-
#ffffff#14181d#2b5d8a
Who it is for
Built for skip hire firms, roll-on roll-off container operators and small waste haulage businesses serving households and builders. It suits an operator who wants customers to price and book online instead of ringing round, and it works for dumpster rental in other markets by changing the sizes and currency in one 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 sizes and prices?
Edit src/data/skips.ts. Sizes, prices, weight limits, waste-type rates, hire lengths, the permit fee, the delivery cut-off and closed days all live there, and the finder, size strip and price table update together.
Where do bookings go?
The booking form posts nowhere by default. Point it at your form backend or booking system; the README shows how. The finder passes the size, waste, placement, hire length and date in the link, so the form arrives filled in.
What about my waste carrier registration?
The registration, permit, company number and insurer lines are placeholders in normal sentences. Fill them in from src/data/site.ts before you launch; the README lists every one.
What exactly do I get for $49?
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