Site Build Playbook · nixfred.com

NIXFRED // BUILD SYSTEM

SITE BUILDPLAYBOOK

One brief, read by two operators. Hand this URL to an AI as a /goal and it takes a bare Linux box all the way to a live, hardened customer website. Work the interview below with the client first — on a call, or via the ready-to-send email at the bottom — and the AI builds from their own words.

Static HTML/CSS
Zero open ports
Cloudflare Tunnel
Tailscale-only admin
Self-healing host
SEO + schema
Private GitHub backup

The Build Playbook

Instructions to the AI agent. A fresh Ubuntu VPS in, a live customer website out. Static HTML/CSS only — no framework, no build step, no database. The site is reachable because cloudflared dials out; nothing dials in. Work the phases in order. Never skip a GATE.

Step 1 — Inputs you must collect first

Step 2 — Toolbox & skills

# core
sudo apt-get update && sudo apt-get -y upgrade
sudo apt-get install -y git curl wget unzip jq ufw nginx imagemagick webp pandoc
# cloudflared (cloudflare apt repo) + tailscale + github cli
curl -fsSL https://pkg.cloudflare.com/cloudflare-main.gpg \
  | sudo tee /usr/share/keyrings/cloudflare-main.gpg >/dev/null
sudo apt-get install -y cloudflared gh
curl -fsSL https://tailscale.com/install.sh | sh
# node + playwright + chrome — for verification only
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs && npx --yes playwright install chrome

Step 3 — The twelve phases

Phase A

Harden & optimize the VPS

Invoke vps-lockdown. Patch & upgrade; set hostname/timezone; confirm a non-root sudo user with key auth; enable unattended security upgrades; apply sysctl tuning; add a 2 GB swapfile if RAM ≤ 2 GB; stage SSH hardening but do not restart sshd yet.

GATE A — box patched, tuned, swap on. The public firewall waits for Phase B, to avoid a lockout.

Phase B

Install Tailscale & lock down to zero public ports

Join the tailnet, verify you can reach the box over Tailscale, then raise the firewall. Order is safety-critical.

sudo tailscale up --auth-key="$TS_AUTHKEY" --ssh --hostname="<customer>"
tailscale ip -4        # verify reachability BEFORE the next block
sudo ufw default deny incoming
sudo ufw default allow outgoing
sudo ufw allow in on tailscale0
sudo ufw --force enable    # no 80/443/22 public — site still works

Phase C

Interview the customer

Run Part II of this document — the 18-section script. Ask in small batches, listen, probe vague answers, write it all into intake.md.

Phase D

Turn the conversation into a build plan

From intake.md produce: a sitemap & nav order; a per-page content outline (one h1 each); design tokens (palette + two fonts as CSS variables); the image list (heroes 16:9); structured-data facts; the contact-form spec.

Phase E

Graphics — write Midjourney prompts, process the images

From the image list, write one Midjourney prompt per image. Use a shared style suffix so all images match; heroes are --ar 16:9 (square images cannot fill a banner); one concrete subject per prompt; never use the words "palette", "collage" or "moodboard" (they trigger swatch/grid artifacts). Deliver the set as one copy-paste block — the human runs them on midjourney.com. Then crop with convert and export .webp with cwebp -q 82.

Phase F

Build the website

Invoke static-site. Plain semantic HTML5 + one shared stylesheet; no framework, no build step. One page per service; shared header/nav/footer; one h1 per page; accessible (alt text, labelled fields, focus states, contrast, 44px targets, mobile breakpoint). Match the customer's voice — no AI-tell punctuation. Web3Forms contact form. A friendly 404.

Definition of done

• Box patched, tuned, swap on; non-root sudo user with key auth.
• Tailscale up; firewall shows zero public inbound ports.
• intake.md complete and customer-approved.
• Midjourney prompts written, images generated & processed to .webp.
• Every page passes Playwright at desktop + mobile.
• SEO: sitemap, robots, valid JSON-LD, unique meta, OG, favicons.
• Tunnel live; both hostnames over HTTPS; zone tuned.
• Domain email forwards; Web Analytics beacon on every page.
• Private GitHub repo pushed; self-healing timers tested.
• Contact form delivers a real test message; customer handed URL + quote.

The Client Interview

The Business at a Glance

• What is the business name, exactly as it should appear?
• In one sentence, what do you do?
• When did you start — and what's the short origin story?
• What genuinely makes you different from others who do this?
• Do you have a tagline, or a phrase you already use a lot?

The People Behind It

• Who owns and runs the business — names and roles?
• Who should appear on the site, with a bio and headshot?
• Licenses, certifications, designations, memberships — listed exactly.
• Years of experience, individually and as a business.
• Why do you do this work? Give me a human detail for the About page.

Services & Offerings

• List every service or product you offer.
• For each — who is it for, and what does it include?
• Which is your bread-and-butter? Which do you want to grow?
• Pricing — show prices, ranges, "starting at", or "contact for a quote"?
• What do people ask for that you don't do?

Who the Website Is For

• Describe your ideal customer — age, situation, what's going on in their life.
• What problem or worry brings them to you?
• What fears or objections do they have before they get in touch?
• Are they on a phone, in a hurry, researching, comparing?
• What do they need to see before they trust you?

Goals — What the Site Must Do

• The single most important action a visitor should take — call, form, book, download?
• What does a "win" look like three months after launch?
• Any secondary goals — credibility, explaining a confusing topic, fewer repeat questions?
• What does your current or old site do badly that we must fix?

The Competition & The Field

• Name two or three competitors — what do they do well, where do they fall short?
• Show me two or three websites you like — what specifically appeals?
• Show me one or two you dislike — what should we avoid?
• How should you be positioned — premium, friendly, the expert, the affordable choice?

Brand & Visual Identity

• Do you have a logo? In which file formats? (Please send them.)
• Existing brand colours or fonts? Any brand guide?
• If starting fresh — three words for the brand's personality.
• Colours or styles you love? Any you hate or that clash with your field?
• Warm and human, clean and clinical, bold and modern, or classic and established?

Voice & Tone

• Formal or conversational? "We", or first-person "I"?
• Words and phrases you love. Words you never want used.
• How much does your audience already know — explain everything, or talk peer-to-peer?
• Should the writing mostly reassure, persuade, inform, or sell?

Pages & Site Map

• Which pages do you need — Home, a page per service, About, Contact, FAQ, Resources, Blog?
• What should the top navigation menu say, in order?
• Is there a must-have page unique to your business?
• Any printable resources, checklists, or downloads to offer?

The Home Page

• If a visitor reads only one sentence, what should it say?
• The three things you most want them to know immediately?
• What should the big hero image show?
• What is the home-page call-to-action button?

Proof & Credibility

• Testimonials or reviews we can quote? (Send them, with names or initials.)
• Notable numbers — years, clients served, homes sold, results.
• Awards, press, certifications, partnerships to display?
• Any guarantee, free consultation, or "no obligation" offer?
• A Google Business Profile or review page we should point to?

Photography & Graphics

• Do you have professional photos and headshots? (Please send them.)
• Photos of your work, your space, your team, your town?
• If we generate imagery — describe the setting, the people, the mood.
• Any imagery we should absolutely avoid — stocky, cliché, off-brand?

Contact & Turning Visitors Into Leads

• Best phone number and email to publish.
• A physical address, or "serving [area], by appointment"?
• Hours of operation.
• Exact service area — cities, counties, "within X miles".
• Contact-form fields — name, email, phone, message, plus anything specific?
• When a lead comes in — who responds, and how fast?

Social, Listings & Existing Presence

• Social profiles you actively maintain.
• Google Business Profile, industry directories, association listings.
• Is there an existing website? Keep anything, or full replace?
• Reviews or content on other platforms we should reflect?

Domain, Email & Technical

• The domain name for the site — do you own it, and where is it registered?
• Desired email address(es) on the domain (e.g. hello@, yourname@).
• Existing email or hosting that must keep working?
• Anyone else who needs access or to be kept informed?

Legal, Compliance & Industry Rules

• Required disclaimers, license numbers, or regulator text to display.
• Industry rules that affect wording or claims (real estate, health, finance).
• Do you need a privacy policy or terms page?
• Any accessibility expectations or obligations?

Content — Who Writes What

• Do you have existing copy, brochures, or marketing materials? (Send them.)
• Happy for us to write the copy from this interview, for your review?
• Who has final sign-off on words and design?
• Anything time-sensitive — a seasonal offer, an event, a launch date?

Timeline, Budget & After Launch

• Target launch date — and is anything driving it?
• Budget range for the build, so we scope it right.
• Who is the decision-maker, and what is the approval process?
• After launch — who maintains the site, and how often will it change?
• How would you like to receive updates from us during the build?

CLOSE  "Is there anything I should have asked and didn't? Anything you want this site to do that we haven't covered?"