Passage is a template for turning a sailing trip into a beautiful, shareable keepsake website — a "living logbook" you and your crew can browse, with a day-by-day plan, a route map, photos, and a "Know Before You Go" page. It's built to be handed off and made yours: a charter captain gifting guests a journal of their trip, or a family keeping a private record of their own sails.
This is a template — make it yours. The site you see here is a sample about a boat called Halcyon on an illustrative two-night sail. None of it is real. Your job (with Claude's help) is to replace the sample content with your own trip. You do not need to write code to do this. You ask Claude, in plain English, and Claude does the work.
There's no build step and nothing to install for the site itself. It's one HTML file you preview in a browser and deploy to the web in a few clicks.
The fastest, most common path. If a charter company gave you an itinerary — a Word doc, a PDF, or even an email — that's all you need to get started. The itinerary is the skeleton; Claude does the enrichment (researching the marinas, restaurants, and towns; writing the intro and day-by-day pages; setting up the route map; wiring up the gallery).
1. Get the template. On the GitHub page for this project, click the green "Use this template" button (or just download the ZIP and unzip it). You now have your own copy of the whole site in a folder.
2. Open the project in Claude. Never used Claude before? Either of these is fine:
- Claude Code — Anthropic's coding assistant. It runs in your terminal, and in your browser at claude.ai/code. How to get set up: claude.com/claude-code.
- However you open it, Claude is a chat window that can read and edit the files in this folder. You talk to it in plain English — no coding required. If any step in this guide is unclear, paste it into Claude and ask "how do I do this?"
3. Hand it your itinerary. Drop or paste your itinerary document into the chat and say something like:
"Build my trip site from this itinerary — research the stops and write it up."
Claude will read the named ports, marinas, and restaurants, look them up, write warm and specific prose about each stop, build a page for every day, and thread the route between your ports. Look at sample-itinerary.md in this folder to see the kind of short itinerary that "produced" the sample site — yours can be just as terse.
4. Add your photos. Drop your trip photos into the folder (or into the chat) and say:
"Add these to the gallery."
Claude strips the location data and other hidden info out of each photo, shrinks them for fast loading, and adds them to the gallery and the day pages. (More on this below.)
5. Deploy it. Push the folder to GitHub and import it to Vercel — a few clicks, covered below. Then share the link with your crew.
At every step, if you're not sure what to do, just ask Claude in plain English: "How do I preview this?", "Make the homepage intro warmer," "Add a stop for our lunch anchorage." That's the whole workflow.
To see the site on your own computer before deploying, open a terminal in the project folder and run:
python3 -m http.server 8000Then open http://localhost:8000 in your browser. (python3 comes pre-installed on Mac and Linux; on Windows, install Python or just ask Claude for the easiest way to preview.) Leave that command running while you work — refresh the browser to see changes. Press Ctrl+C in the terminal to stop it.
Not sure? Ask Claude: "Start a local preview server so I can see the site."
Photos are the heart of a keepsake. Adding them is easy:
- Put your photos in the project — drop them in the folder, or drag them into the Claude chat.
- Ask Claude to add them: "Add these photos to the gallery" (you can be specific: "...to Day 2").
Behind the scenes, Claude strips out the GPS location and other hidden EXIF data from each photo (so you're not publishing where your house or the marina is), and optimizes them to small, fast-loading web formats. The originals on your computer are untouched. The optimized copies live in assets/images/.
You can also ask Claude to curate — "pick the best few from this burst" — or to pull a favorite shot up as the hero image on a day's page.
By default, this site is private. It sits behind a simple PIN gate: visitors land on a login page and have to type a PIN before they can see anything. That's ideal for a family keepsake — you share the link and the PIN only with your crew.
The privacy gate is three files plus a config (middleware.js, api/login.js, login.html, and a setting in vercel.json). To turn it on, you set two values in Vercel after you deploy (see below):
AUTH_PIN— the PIN your guests will type (e.g. a memorable 4–6 digit number).AUTH_SECRET— a long random string used to keep the login secure. Ask Claude to "generate a strong AUTH_SECRET for me" and paste what it gives you.
You add both in your Vercel project under Settings → Environment Variables, then redeploy.
Want the site fully public instead — for example, a charter business showing off trips to prospective guests? Just ask Claude:
"Make this site public."
Claude will remove the three gate files for you. (Even with the gate on, link previews still work nicely when you paste the link into a text or chat — that's what og-preview.html is for.)
Vercel hosts static sites like this one for free and makes deploying a few clicks.
- Put your project on GitHub. If you used "Use this template," it's already there. Otherwise, ask Claude to "push this to a new GitHub repo for me."
- Import it to Vercel. Sign in to Vercel with GitHub, click Add New → Project, and pick your repository. Vercel detects it as a static site — just click Deploy.
- If you're keeping the PIN gate, add the
AUTH_PINandAUTH_SECRETenvironment variables (Settings → Environment Variables, see above) and redeploy. - Share the link. Every time you push a change to GitHub, Vercel re-deploys automatically.
Stuck anywhere? Ask Claude: "Walk me through deploying this to Vercel."
I deployed, but everyone's stuck on the login page — and the PIN shows "500 Server not configured."
You haven't set the gate's two environment variables yet. In your Vercel project: Settings → Environment Variables, add AUTH_PIN (the PIN guests type) and AUTH_SECRET (a long random string — ask Claude to "generate a strong AUTH_SECRET"), then redeploy. Or, if you meant for the site to be public, just ask Claude to "make this site public" (it removes the gate).
The PIN gate doesn't work on my host (Netlify, GitHub Pages, …). The gate is Vercel-only — it runs on Vercel Edge Middleware. On other hosts those files are ignored and the site is simply public. Deploy to Vercel if you need the gate; otherwise ask Claude to "make this site public" to remove it cleanly.
A weather card is stuck on "Loading…". That day is trying to fetch live weather but has no location set (or you're on slow/no wifi). Ask Claude to "freeze this day's weather to a recorded card" or to "set the weather location for my trip."
My route map looks generic / doesn't match my trip. That's the placeholder. The route chart is the one hand-tuned step (see The one manual bit, below) — your journal works perfectly without it. Ask Claude to "regenerate the route map for my legs" when you want the real thing.
Something else looks off. Describe what you see, in plain English — "the gallery isn't showing my photos," "this page looks broken" — and ask Claude to fix it. That's the whole workflow.
Almost everything here is automatic, but one thing is genuinely hand-tuned per trip: the route map — the little nautical chart that draws the line of your sail between ports. The tooling to regenerate it lives in docs/cartography/. Getting a route to thread cleanly between real shorelines takes a little fiddling, so it's the one step that isn't push-button.
Claude can help here too. Ask it to "regenerate the route map for my legs using the cartography tools," and it'll walk through the scripts in docs/cartography/ with you. If you'd rather not bother, the sample map is a reasonable placeholder — but a faithful route of your trip is worth the effort.
index.html— the entire website (text, styling, and behavior all in one file). This is what Claude edits.assets/images/— all your photos and images, served from your own site (no hotlinking).sample-itinerary.md— the example itinerary that produced the sample site. Replace it with your own.middleware.js,api/,login.html— the optional PIN gate. Delete them (or ask Claude to) to go public.og-preview.html— makes link previews look good when you share the URL.vercel.json— deploy configuration.docs/— background notes and the route-map tooling (docs/cartography/). Run charters? Seedocs/charter-home-base.mdfor an optional portfolio front-door pattern.AGENTS.md/CLAUDE.md— instructions Claude reads when it opens the project. You don't need to touch these.
Welcome aboard. Fair winds.