A step-by-step guide for building a professional marketing website, owner portal, and backend infrastructure — with no monthly platform fees and no coding experience required.
Click New Chat in the left sidebar. Do not paste the prompt into an existing conversation — it must be a clean session so Claude starts fresh with no prior context.
Copy the entire prompt below (everything from [START PROMPT] onward) and paste it into Claude. Do not modify it — it is designed to work as written.
Claude will respond with 6 sections of questions (A through F). Answer each one. Here's what to have ready:
Claude will summarize your answers and ask for an explicit go-ahead before building. Read through the summary — check that your business name, colors, service area, and owner info are all correct. Then type:
Claude will deliver four labeled code blocks. For each one:
index.html, style.css, script.js, owner-portal.html)hillsidestaysA repository is the folder where your website files will live.
hillsidestays)index.html, style.css, script.js, owner-portal.html, and all photo files (.jpg)index.html is inside a folder, GitHub Pages won't find it and you'll get a 404 error.
https://[username].github.io/[repositoryname]Whenever you need to make changes to the website:
.com first, then .net, then .coDNS records are like a directory that tells the internet where to find your website when someone types your domain. You need to add 5 records total:
www, Value: [username].github.io (replace with your GitHub username)github.io will keep working the whole time. Don't panic if your custom domain shows an error for a few hours — it's normal.
Don't guess — use this free tool to see the real-time status from servers around the world:
→ DNS Checker Tool ↗hillsidestays.net)hillsidestays.net) and click Savemdaldwkwindex.html → click the pencil icon ✏️ to edit in the browserYOUR_FORM_ID — it will appear inside the form's action attribute, which looks like: action="https://formspree.io/f/YOUR_FORM_ID". Replace only the YOUR_FORM_ID portion with your actual ID (e.g. mdaldwkw). The rest of the URL must stay exactly as-is.[email protected] to your contactsCreate a new spreadsheet named [Business Name] — Owner Portal Data. Set up the first tab with this exact structure:
The sheet has two layers: a stats block at the top (rows 1–9), then four section markers (all-caps keywords in Column A) that tell the portal where each data type begins. Here is a fully populated example — copy this structure exactly, then replace the sample data with real values:
$3,850 not 3850, and 81% not 0.81. If you enter raw numbers, the portal will show dashes instead of values. The sheet does not do the formatting — you must type it.
&gid= followed by a number — this confirms it's tab-specific, not the whole document/pub?output=csv/pub?gid=1746701891&single=true&output=csv
owner-portal.html → click pencil icon to editYOUR_PUBLISHED_SHEET_CSV_URL and replace with your copied URL#1a3a2a), accent color (gold: #c9a84c), upload your logo, and set fonts to match your main siteOn the Basic plan, you can connect a subdomain like portal.yourdomain.com so owners have a professional URL instead of a softr.app link.
portal.yourdomain.comThis is identical to the HTML portal method — because the data source is the same Google Sheet.
Use this path if you're just starting out with 1–5 owners and want to keep overhead at zero. All the technical steps and known bugs are fully documented here. When monthly management overhead starts eating into your time, that's your trigger to migrate to Path A — the data stays in the same Google Sheet, so nothing is lost.
Before you start, collect from the new owner: their full name, email address, property name, and choose an access code for them (like a PIN — e.g. SMITH2026).
&gid= with a different number than the first owner's URLowner-portal.html → click pencil icon ✏️owners: [ — this jumps you directly to the CONFIG section near the bottom of the file{ and ends with }, — scroll to the last owner entry and place your cursor after its closing },"[email protected]" — Cloudflare will scramble it and logins will always fail. Always use the e('username','gmail.com') format. The split-string pattern makes it invisible to the scanner.
Do this at the start of each month for every active owner:
$3,850 not 3850). Raw numbers will display as dashes in the portal.
owner-portal.html → click pencil icon{ to the closing },)This path is for property owners who self-manage their own listing and just need a clean, organized view of their reservation data and earnings — no login portal required. Instead of building a portal, you bypass it entirely: Hospitable fires booking data into n8n, which writes it directly to a Google Sheet the owner can access any time. The Sheet is the portal.
Create a new spreadsheet named [Property Name] — Owner Dashboard and structure it with these tabs:
reservation.created webhook from Hospitable.$3,850 not 3850 when appending to the Sheet. This ensures any conditional formatting or display logic works correctly.
This is the automation that makes Path C work. See the full n8n workflow setup in the AI Automation Playbook → Workflow 1. At a high level:
reservation.created and reservation.updated eventsOn the 1st of each month, an n8n scheduled workflow rolls up the previous month's completed bookings into the Monthly Earnings tab. This runs automatically — no action required on your part.
e('username','gmail.com') instead of "[email protected]". The e() function assembles the email at runtime after the scanner has passed. Apply this in the CONFIG array, all mailto links, and the sendMessage function.
owner-portal.html from your computer. That old file didn't have the second owner's entry. It overwrote the current GitHub version.
&gid= with a number — without it, you've published the whole document.
3850) instead of formatted text ($3,850). The portal expects pre-formatted strings.
$ and % symbols directly in the cell. The sheet is a data source, not a calculator — it does not format for you.
owner-portal.html on your computer and it looks like unstyled plain text with no layout.
owner-portal.html in GitHub. Search for the owner's email. If it appears as a plain string like "[email protected]" instead of e('owner','gmail.com'), Cloudflare has scrambled it. Fix: rewrite using the split-string format and commit.sheetUrl value and paste it into a new browser tab. It should load a plain CSV file (comma-separated text). If it shows a Google error page, the URL is wrong or the sheet isn't published.&gid= followed by a number. If it ends in just /pub?output=csv, you published the whole document instead of their specific tab. Republish the correct tab and update the URL in GitHub.3850 or 0.81 needs to be retyped as $3,850 or 81%. Save the sheet — the portal updates automatically within a minute.
sheetUrl pointing to their specific tab.owner-portal.html and compare the sheetUrl values for both owners — they must have different &gid= numbers. If they're the same, go back to Google Sheets, publish the correct tab separately, and update the CONFIG with the new URL.
[yourdomain.com]/owner-portal.htmlowner-portal.html is intact and that all files are still in the root of the repository.
[yourdomain.com]/owner-portal.html| Factor | Path A — Softr | Path B — HTML Portal | Path C — Sheet Direct |
|---|---|---|---|
| Best For | Scaling operators, 5+ owners, investor-grade clients | Smaller co-hosts, 1–5 owners, budget-conscious | Self-managing owners who just need their numbers |
| Monthly Cost | $49/mo (paid) · Free to test | $0 | $0 |
| Owner Login | Real email + password login | Access code only | No login — shared Google Sheet link |
| Adding an Owner | Email invite — 2 min | Edit GitHub file + manage CSV URLs (~15 min) | Share Sheet + add property to n8n routing (~15 min) |
| Data Separation | Automatic — each owner sees only their data | Manual — separate tab + URL per owner | Separate Sheet per owner — fully isolated |
| Booking Data Updates | Manual Sheet updates (~5 min/owner/mo) or n8n automated | Manual Sheet updates (~5 min/owner/mo) or n8n automated | Fully automated via Hospitable + n8n |
| Technical Complexity | Low — drag-and-drop editor | Medium — GitHub edits, CSV URLs | Medium — n8n workflow setup (one-time) |
| Requires Hospitable | No (works with any PMS) | No (works with any PMS) | Yes — webhook integration required |
When you're ready to upgrade or troubleshoot anything in this stack, start a new Claude conversation and paste the prompt below. It will give Claude all the context needed to help you modify, extend, or migrate your system.
| Service | What It Does | Cost | Upgrade Trigger |
|---|---|---|---|
| GitHub Pages | Website hosting | Free | Never — works indefinitely |
| Namecheap Domain | Custom URL (yourbusiness.com) | ~$15/yr | N/A — renew annually |
| Formspree | Contact form submissions | Free (50/mo) | 50+ leads/mo → $10/mo |
| Google Sheets | Owner portal data | Free | Never for this use |
| Claude AI | Building & maintaining code | Free tier available | Claude Pro at $20/mo if heavy use |
| Softr | Owner portal — Path A (scaling operators) | $49/mo (paid) · Free to test | Upgrade when ready for custom domain or 10+ users |
| n8n Cloud | Automation layer for Path C (Sheet Direct) | $20/mo (Starter) | Required for Path C; optional add-on for Paths A & B |
| Total at Launch — Path A (Softr) | ~$64/mo + $15/yr domain | ||
| Total at Launch — Path B (HTML Portal) | ~$15/year only | ||
| Total at Launch — Path C (Sheet Direct + n8n) | ~$35/mo + $15/yr domain | ||