Client Landing Pages
Guide for Guy

Each landing page is a single HTML file (index.html) that contains all the content, styling, and layout for that page. There's no backend, no CMS, no theme files. When someone visits the URL, their browser reads that file and renders it — that's it.

How it's different from WordPress

Why we built them this way

Speed and cost. Static HTML pages load faster than WordPress, can't be hacked via plugin vulnerabilities, don't need expensive hosting, and are easy to version-control. The trade-off is that editing requires opening the HTML file rather than a visual admin panel.

Each client has their own GitHub repository — a folder in the cloud that stores the code. All client pages are now live on Cloudways, each at its own subdomain of the client's website. GitHub Pages is only used as a temporary preview environment while a new page is being built and reviewed — the old github.io URLs are no longer the live sites.

How hosting works

Cloudways (every live page): All client pages and the MM Marketing website are hosted here. You still edit in GitHub exactly as before — but the live page does not update automatically. After your change is on the main branch, someone has to deploy it from Cloudways. That's the Pull step below.

GitHub Pages (preview for new builds only): While a brand-new page is being built and reviewed, it lives at a temporary github.io preview URL that updates automatically within ~2 minutes of saving. Once Teddi moves the page to Cloudways and the client's subdomain, the preview URL is retired — always check the Live URL column above.

Making a change live — the Pull step

This applies to every live page. Push to GitHub as normal. Once your change is committed to main (or your pull request has been merged), the live site won't change until you pull it through in Cloudways:

For simple text changes — phone numbers, hours, copy, reviews, FAQ answers — edit directly on GitHub. For anything structural, use Claude Code (see Section 8).

Editing directly on GitHub

<h1>Car Servicing & Repairs in Queanbeyan</h1>
<p>Trusted local mechanics keeping Canberra & Queanbeyan
   drivers safely on the road since 1986</p>

Find the words, change them, save. You don't need to understand the tags around them.

Tips

• Use Ctrl+F to find text — search for the exact words on the live page
• Only change text between the > and < characters — not the tags themselves
• A phone number appears in two places — the visible label (Call 02 6324 1091) AND the href attribute (href="tel:+61263241091"). Update both.
• GitHub keeps full history — if something looks wrong, revert via the History button

• Used Ctrl+F to find the exact text — not scrolled manually looking for it
• Only changed text between tags, not the tags themselves
• If changing a phone number, updated both the visible label and the tel: href
• Done the Cloudways Pull step (Section 2), then checked the live URL to confirm the change looks right
• If something broke, reverted via the repo History button

For anything beyond text edits — adding a section, changing a layout, fixing a bug, changing colours or styling — don't edit the HTML directly. Write a code brief and run it through Claude Code instead.

What is Claude Code?

Claude Code is an AI coding tool built into the Claude desktop app. You open a repo folder, paste a brief, and it reads the files, makes the changes, and shows you exactly what it did — without you touching the code directly.

You already have it installed with the same code brief skill loaded as Teddi, so it knows exactly what format to expect.

How to write a brief

You don't write briefs manually. You describe what you want in plain English and ask Claude to write the brief for you.

Claude will ask any clarifying questions it needs, then produce a properly formatted brief ready to paste into Claude Code.

• Say which page it's for
• Describe what currently happens and what you want to happen instead
• Name the section if you know it (e.g. "the Why Choose Us section")
• You don't need to know the technical solution — just describe the problem

Running the brief through Claude Code

Adding a new page to an existing client

This is the common case — the client already has a repo and a live Cloudways site, and they need another landing page (a new service, a new offer, a new location). The new page is just another .html file in their existing repo, built to match the pages already there. No new repo, no new hosting, no DNS.

Setting up a brand-new client

Different job entirely. New clients don't start from scratch or from another client's repo — every new client build starts from the shared template repo, teddi-coder/mm-lp-template. The template already contains the page structure, layout, forms and tracking hooks; branding is controlled by CSS variables at the top of the stylesheet, so a new client's colours drop in without touching the layout. Here's the split of who does what: