asets-gobizit/make-website

make-website

Builds a complete business website from a 7-field brief → one Claude API call → GitHub Pages deployment.

⚙️ FUNCTIONAL CODE

• make_website.py — Interactive CLI that collects inputs, calls Claude API once, writes index.html, and publishes to GitHub Pages

  python "C:\Users\dansk\.claude\skills\make-website\make_website.py"
  

---

Brand Context & Examples (GoBizIT only — manual trigger)

This skill folder contains brand-specific files for GoBizIT AI. These are NOT loaded automatically.

• brand_context.md — GoBizIT brand voice, tone, messaging guidelines, language do's/don'ts, CTA style, and visual notes.
• examples/gobizit-style.md — Reference output showing the target page structure, headline style, service descriptions, and visual design based on gobizit.ai.

When to use these files:

• ONLY when the user explicitly says the website is for GoBizIT, gobizit.ai, or Danny's businesses
• ONLY when the user explicitly requests to use brand context
• Do NOT auto-apply to other clients or generic website requests

When triggered: Read both files before the Claude API call and use them to shape all generated copy and design decisions.

---

When to Use

• User says "make me a website", "build a website", "create a website for [business]"
• User mentions BraveBrand or wants a prompt-built site
• User wants a site deployed to GitHub Pages automatically

---

HOW TO INVOKE

python "C:\Users\dansk\.claude\skills\make-website\make_website.py"

The script walks through all inputs interactively. No arguments needed.

---

Input Fields

| Field | Type | Values | |-------|------|--------| | vibe | Enum (choose 1) | High-Performance, Warm & Organic, Bold & Brutalist, Clean & Technical, Editorial & Luxury, Conversion-Focused | | business_name | Free text | Any business name | | industry | Enum (choose 1) | Fitness, Health & Wellness, Business Coaching, Marketing Agency, SaaS/Tech, E-commerce, Real Estate, Financial Services, Education/Courses, Creative Services, Healthcare, Legal Services, Other | | description | Free text | One sentence describing the business | | audience | AI-proposed + confirm | Script proposes based on industry + description | | cta | Enum (choose 1) | Book a free consultation, Start a free trial, Download a free guide, Join the waitlist, Get a quote | | reference_sites | Optional URLs | Design inspiration (comma-separated, or press Enter to skip) |

---

Workflow

Phase A   Collect 7 inputs via CLI          ← zero Claude tokens
Phase B   Assemble structured prompt        ← zero Claude tokens
Phase C   ONE Claude API call (claude-sonnet-4-6, max_tokens=16000)
Phase D   Strip fences, validate HTML, write index.html
Phase D2  Download Unsplash images → images/ folder, rewrite HTML to local paths
Phase E   git init -b main, commit, gh repo create, enable Pages
Phase F   Optional custom domain (CNAME + DNS instructions printed)
Phase G   Wait for SSL cert (poll every 30s, up to 30min) +
          auto-flip https_enforced=true when cert is ready          ← v1.6
Phase H   Print live URL + clear timing-expectation guide            ← v1.4

---

Output

C:\Users\dansk\Claude\Websites\{business_name}\
├── index.html    ← self-contained (CSS embedded in <style> tags)
├── robots.txt    ← auto-generated, points to sitemap
├── sitemap.xml   ← auto-generated with correct domain + build date
├── images/       ← downloaded stock photos (self-hosted, no external dependencies)
│   ├── img-abc123.jpg
│   └── ...
└── CNAME         ← only if custom domain entered

GitHub Pages URL (default): https://asets-gobizit.github.io/{business_name}/
GitHub Pages URL (custom):  https://{custom_domain}

---

Favicon (v1.5 — always generated)

Every site gets a favicon.svg automatically — wired into the HTML with <link rel="icon"> and <link rel="apple-touch-icon">. The default is an abstract placeholder (rounded brand-colored square + single white dot) that the user is expected to replace with their real brand mark.

Hard rule: NEVER put text, letters, initials, or wordmarks inside a favicon. Browsers render favicons at 16×16 in tabs — text is illegible noise at that size. Use shapes, icons, or a single bold glyph (paw print, leaf, geometric mark, etc.) — never a word or letters.

When the user provides their own brand icon (paw, logo, monogram glyph, etc.), the skill should swap the SVG contents while keeping the file at favicon.svg so the link tags continue to work.

---

SSL / HTTPS (v1.4)

The skill now handles SSL end-to-end without requiring the user to touch GitHub settings:

• Default github.io URLs are HTTPS by default — no extra step needed
• Custom domains trigger an automatic gh api ... --field https_enforced=true call after the CNAME is registered
• GitHub then auto-provisions a free Let's Encrypt certificate once DNS resolves to GitHub's edge servers
• If the API rejects the toggle (DNS not propagated yet), the script tells the user it's normal and that GitHub will retry; no manual fix required
• A direct link to the Pages settings page is printed as a fallback

Result: the user gets a working https://yourdomain.com with zero clicks in the GitHub UI, assuming DNS records are correctly configured at their registrar.

---

Delay / Timing Reference (printed to user at end of run)

When the script finishes, it prints a clear, plain-English timeline so the user knows what's working now vs what to wait for:

| Stage | Typical duration | What it unlocks | |-------|------------------|-----------------| | GitHub Pages first build | 1-3 min | The *.github.io URL goes live | | DNS propagation (custom domain) | 5-60 min (worst case 24h) | https://customdomain resolves | | SSL cert provisioning (Let's Encrypt) | 10-30 min after DNS resolves | Browser shows green padlock, no warnings | | Total worst case end-to-end | ~1 hour | Fully working https://customdomain |

The script also prints diagnostic links (DNS checker, GitHub Pages settings) so users can self-debug if something stalls past the typical window.

---

SEO (v1.3)

• Every generated site includes basic SEO out of the box — no extra steps needed
• Auto-generated: <title>, <meta description>, Open Graph tags, Twitter Card tags
• Semantic HTML: proper <header>, <main>, <section>, <footer>, <nav> usage
• Single <h1> with proper heading hierarchy (<h2> for sections)
• Aria labels on landmarks for accessibility
• No visible content changes — SEO is entirely in the <head> and HTML structure
• robots.txt — auto-generated with sitemap URL, allows all crawlers
• sitemap.xml — auto-generated with correct domain (custom or GitHub Pages), dated with build date

Images (v1.1)

• Claude is instructed to include professional Unsplash stock images in hero, services, about, and CTA sections
• After HTML is generated, Phase D2 automatically:
  1. Finds all images.unsplash.com URLs in the HTML
  2. Downloads each image to a local images/ folder
  3. Rewrites the HTML src attributes to use local paths (images/img-xxx.jpg)
• Images are self-hosted — no external dependency, won't break if Unsplash changes URLs
• Images are committed to GitHub alongside index.html and deployed via GitHub Pages
• Uses only Python stdlib (urllib.request) — no extra packages needed

---

Dependencies

pip install anthropic

Also requires: gh CLI (already installed), git

Set before running:

$env:ANTHROPIC_API_KEY = "sk-ant-..."

---

Verification Checklist

• [ ] Script runs without errors through all 7 prompts
• [ ] index.html created and starts with <!DOCTYPE html>
• [ ] File opens correctly in browser
• [ ] GitHub repo created at github.com/asets-gobizit/{business_name}
• [ ] GitHub Pages enabled — live URL printed at end
• [ ] Custom domain CNAME file present (if domain was entered)

---

DNS Reference (Custom Domain)

| Domain format | DNS record needed | |--------------|-------------------| | www.domain.com | CNAME → asets-gobizit.github.io | | domain.com (apex) | 4× A records: 185.199.108.153, 185.199.109.153, 185.199.110.153, 185.199.111.153 |

Cloudflare proxy: always DNS only (grey cloud). [Proxied/orange-cloud option intentionally removed from this skill — static GitHub Pages sites don't need WAF/CDN (GitHub already serves via Fastly). Can be re-enabled later if a real backend is added; requires Cloudflare SSL mode = "Full (strict)".]