Travel Blog Website Template
Demo brand: Postmarked · Travel journal · 21 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this travel blog website template
A complete website for a travel writer or photographer who earns from their work: a destination finder, six destination guides with costs and a trip-budget calculator, a shop for PDF guides, an affiliate gear list, a journal, an FAQ and contact. Twenty-one built pages, all driven by content files.
It looks like a well-kept travel journal. A bright white ground with pale sand blocks, real photographs of coastlines, mountain roads, old towns and stations carrying all the colour, and one passport-indigo accent. Instrument Serif for headings, Geologica for everything else.
Every section answers what a reader wants to know before buying a guide: where should I go in the month I have, what will it cost per day, how current is the information, and what do other readers say. The finder and the budget calculator answer the first two on the page. Motion is one quiet reveal.
The 21 pages you get
- Home
/ - Full-width photo with a region, month and budget bar, promises, the live destination finder, the writer band, a sideways wall of photo prints, how a guide is made, the at-a-glance table, pricing, reader postcards, the journal, FAQ and a bundle offer.
- Destination finder
/guides/ - Filter the guides by region, best month and daily budget with no reload; filters live in the URL, so a link opens pre-filtered. A comparison table below.
- Guide pages
/guides/…/ - Six destinations. Photos, facts (best months, cost per day, flight time from London, pace), the PDF buy box, a trip-budget calculator, a free overview, a best-months grid and a reader postcard.
- Shop
/shop/ - Each PDF guide with its price and a buy button, the all-six bundle, what is inside a guide and short buying questions.
- Gear list
/gear/ - Nine items in three groups, each with a note and an affiliate link, plus a plain disclosure line.
- About
/about/ - The writer's story as a timeline and three working rules, without face photos.
- Journal
/journal/ - Stories with a newsletter sign-up. Add a Markdown file and it appears here.
- Stories
/journal/…/ - Four written pieces: old towns early in the morning, slow trains, planning on paper and getting a little lost.
- FAQ
/faq/ - Grouped questions next to a sticky "ask me" card.
- Contact
/contact/ - A form for orders, trip questions and suggestions, pre-filled from any guide or bundle button.
- Privacy and terms
/legal/…/ - Two starter pages on a shared layout, covering downloads, refunds and affiliate links.
- 404
/404 - Designed, with a way back to the guides.
What is in the build
- Destinations as content: region, best months, costs per day at three travel styles, flight time, PDF price, photos and text in one Markdown file per guide
- A destination finder by region, month and daily budget that filters live and keeps its choices in the URL
- A trip-budget calculator on every guide page: days times travel style gives accommodation, food, transport and a total
- A shop page with single guides and a bundle, ready for a Gumroad, Lemon Squeezy or Stripe link per guide
- A sideways photo wall of tilted prints that never makes the page scroll sideways
- An affiliate gear list with a disclosure, and a newsletter sign-up in the footer of every page
- All business details in one file, one accent colour that rebrands the site, and 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
- Bright white ground with pale sand blocks, Instrument Serif over Geologica, real photographs of coastlines, mountain roads and old towns, and one passport-indigo accent.
- The mechanic
- Six destination guides filter live by region, best month and daily budget, every guide page has a trip-budget calculator, and the PDFs sell singly or as a bundle. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Coastlines, mountain roads, old towns, stations, paper maps
- Type & palette
- Instrument Serif · Geologica
-
#fdfdfb#1d1b24#3b2f8f
Who it is for
Built for travel writers, bloggers and photographers who sell something alongside their stories: PDF guides, itineraries, presets or a paid newsletter. It also fits a small tour or walking-holiday operator that wants destinations with honest costs, and any niche guide publisher with a handful of places to cover.
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 add a destination?
Add a Markdown file with its region, best months, daily costs, flight time, price and photos. It appears in the finder, the comparison table, the shop and the footer index, and gets its own page with a working budget calculator.
How do I take payment for the guides?
Add a checkout link from Gumroad, Lemon Squeezy or Stripe to the guide's file and the buy button uses it. Until then, buttons open the contact form with that guide already selected.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use, and each one is listed with its source in LICENSING.md. Faces and third-party logos were left out or retouched.
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 travel & leisure templates
Vordergrat Seilbahn
Aerial cableway
Loud
Moving set-piece
Out of Season
Travel magazine / editorial quarterly
Loud
Display type
Marémont
Event venue
Loud
Imagery
MERECOMBE
Coastal house hotel
Loud
Imagery