HospitalityLaunched April 2026
Yaruba Surf Lodge
A six-room surf lodge in Ecuador got a fast, photo-led site: rooms book on Airbnb and inquiries arrive with no server to run.
Designed and built solo for the owner, using the lodge's own photos.
- Astro 6
- TypeScript
- Tailwind CSS 4
- Astro Assets + Sharp
- Static HTML output
- Web3Forms
- Airbnb listings
- Google Maps embed
- Vercel
- Client
- Yaruba Surf Lodge
- Industry
- Hospitality
- My role
- Design and build
- Timeline
- Launched April 2026
- Stack
- 9 technologies
- Status
- Live
The problem
Yaruba Surf Lodge is a six-room beachfront hostel in Puerto Engabao, a small fishing village on the coast of Ecuador. Its rooms are booked through Airbnb, and a listing shows one room at a time. It has no space for the pool, the stone pizza oven, the nearby surf break, or how to get there from the airport. The owner needed one place that shows the whole lodge and still sends each booking to the right listing.
A lodge this size also has no reason to pay every month for a booking engine, a content system and a server, or to spend time keeping them running. Guests plan a trip from abroad, mostly on phones, and a heavy page that stalls loses that visitor before the first photo loads. Whatever I built had to load fast, run itself, and cost almost nothing to keep online.
What I built
I designed and built a six-page site around the lodge's own photos: home, rooms, gallery, amenities, location and contact. The home page opens on a sunset over the pool, and the inner pages share its deep teal, coral and sand. The rooms page lists all six rooms with a capacity badge, a feature checklist and a Book Now button that opens that room's Airbnb listing in a new tab, so Airbnb keeps handling the calendar, payments and reviews.
Direct questions arrive through a contact form that posts straight to a form service, so there is no server to host, patch or pay for, and it works with JavaScript switched off. The contact page also carries an embedded map and a short FAQ, and the location page explains how to reach the lodge by air, bus and car. The site is built into plain files and served from Vercel's network, so it opens quickly on a phone abroad.
What it does
Features that pay for themselves
Each one in terms of what it does for the business, not what it is made of.
A home page that sells the stay in one scroll
A full-height sunset over the pool, a Beachfront Surf Hostel in Ecuador badge and two clear next steps: view the rooms and book, or explore the amenities. Below it, a six-card tour of what the stay includes and a preview of the rooms. A first-time visitor gets the whole picture without leaving the page.
yarubasurflodge.comThe hero is the lodge's own phone photo of the pool at sunset. Every room books on Airbnb
Six room listings, each with a capacity badge, a feature checklist and a Book Now button that opens that room's own Airbnb listing. Guests pick the room here and pay on a platform they already trust, and the lodge never has to run a booking engine, a calendar or payments of its own.
yarubasurflodge.com
Each Book Now button opens that room's own Airbnb listing. Inquiries with nothing to host
An inquiry form asks for a name, email, phone or WhatsApp, a topic and a message, and sends it to the owner's inbox through a form service. There is no server behind it to pay for or maintain, and it works with JavaScript off. An embedded map and a short FAQ answer the common questions before anyone has to ask.
yarubasurflodge.com
The form posts to a form service, so no server runs behind it. A travel guide for the area
The location page answers what a traveler asks before booking: how far the airport is, how to arrive by air, bus or car, what is nearby and what to do once there, including The Point surf break. The amenities page does the same for the stay itself, from the pool and the stone pizza oven to beach access and free WiFi.
yarubasurflodge.com
The page also covers how to arrive by air, bus or car.
Engineering
Under the hood
For the partner who reads code.
Almost no JavaScript reaches the browser
Every page is pre-rendered to plain HTML at build time, and the live home page is about 27 KB of HTML. The only script the browser receives is one small inline module, written in TypeScript with no framework, that runs the mobile menu and keeps its expanded state and screen-reader labels in sync. No framework runtime is sent at all, which is what keeps the site light on a phone abroad.
Responsive images built at deploy time
Every photo goes through Astro's image pipeline with Sharp and comes out as WebP with a PNG fallback at a fixed set of widths, 640 to 1920 pixels for heroes and 400 to 800 for cards, each with a matching sizes hint. The logo and hero load immediately; everything else lazy-loads, and the Google Maps embed on the contact page only loads once it is scrolled into view. The hero started as a 7.3 MB, 3024 by 4032 phone photo; the browser receives a roughly 366 KB WebP.
Content as data, nothing to run
Rooms, room types, amenities, attractions, activities and gallery entries are arrays at the top of each page that loop into markup, so most content changes are one-line edits. One shared layout takes a title and description from each page and writes the meta and Open Graph tags. The inquiry form is a plain HTML POST to Web3Forms, booking hands off to six per-room Airbnb listings with noopener links, and the build deploys as static files to Vercel's CDN with an apex-to-www redirect and HSTS. There is no database, CMS or server to patch.
Gallery
Screens
- yarubasurflodge.com
Seven amenities, each in its own row with a photo. - yarubasurflodge.com
Twelve of the lodge's own photos in a square grid with a hover caption.
On a phone
Building something similar?
Tell me what your business needs. I will tell you what I would build, what it would take, and whether I am the right person for it.