No Wix. No Squarespace. Just Claude Code and GitHub. (How I build and host websites for Free)

Source: Jake Van Clief | https://www.youtube.com/watch?v=ozkx_eUfjY0 Duration: 29 min | Published: 2026-04-07 Processed: 2026-04-10

Core Concepts

The build: rebuild an existing website from scratch using Claude Code as the developer and GitHub Pages as free hosting. No Wix, Squarespace, Vercel, or Netlify.
- GitHub Pages is a free feature of GitHub that serves any repository as a static website when it contains an index.html file.
The workflow is staged deliberately to minimise token burn and keep Claude aligned before any code is written:
- Stage 1 — Reconnaissance with Claude.ai (web): paste the target URL into Claude on the web, ask it to crawl sub-pages and understand the site. If crawling fails, fall back to pasted screenshots.
- Stage 2 — Generate a structured markdown brief: ask Claude to write a markdown file describing the site skeleton (URLs, slugs, form IDs, content types, brand voice, visual identity, tech stack, limitations). This brief is for Claude Code to read, not for the human.
- Stage 3 — Move to the local IDE: create a project folder on desktop, drop the markdown brief inside, open Claude Code pointing at that folder.
- Stage 4 — Kickoff prompt with deliberate context: instruct Claude Code to create a folder structure with a root CLAUDE.md (describing where files live and what they do) plus per-folder markdown files (brand voice, design tokens, components). Explicitly state the deployment target (GitHub Pages) upfront so Claude doesn't burn tokens planning Vercel or Docker deployments.
- Stage 5 — Force alignment: end the prompt with "ask me three questions to understand more." This prevents Claude from building anything before confirming intent.
The UX/UI Pro skill is a packaged prompt bundle Claude Code loads on request to generate design systems (colours, typography, shadow depth, component patterns, delivery checklists).
- Skills package prompts and can also contain Python scripts that run locally to offload work from tokens — the skill executes code instead of asking Claude to generate it.
Product Requirements Document (PRD): a large markdown file describing what the site needs to do and how. Claude builds this before writing any code, using the UX/UI skill's structure.
Claude Code auto-creates project memory without manual harness building:
- There's a memory index inside the user's Claude install that tracks every project, description, type, reasons, and user context.
- Every time Claude Code is opened inside that project folder, the memory is automatically loaded and referenced.
- The creator's argument: no need for elaborate Obsidian-plus-YAML memory systems because Anthropic is already building the harness.
Astro is the framework Claude picked for the rebuild. Astro is a static site generator that outputs plain HTML/CSS/JS, which is compatible with GitHub Pages.
Iterative refinement loop:
- Claude runs the Astro dev server locally and gives a localhost link to preview.
- Human reviews, screenshots what they don't like, pastes back with corrections ("monotone palette is wrong, use dark cream, sage, forest, gold, mauve; source real photography of forest riding").
- Crucial rule: ask Claude to make a plan first before making changes, so the proposal can be reviewed before tokens are spent implementing it.
Deployment to GitHub Pages, two paths:
- Simple path: a single index.html file uploaded to a new GitHub repository. Go to repo Settings → Pages → Deploy from branch → main. GitHub serves it at <username>.github.io/<repo> within a minute or two.
- Complex path (used in the demo): a multi-file Astro project pushed via gh CLI (GitHub's command-line interface). Claude Code installs gh itself, triggers device authentication in the browser, then creates the repo, adds a .gitignore, and pushes. GitHub Actions then builds and deploys the Astro output.
.gitignore is a file that tells git which files to exclude from commits.
- Critical for .env files (API keys), brand voice markdown, or anything private.
- Without it, the entire folder including secrets gets pushed to a public repo.
- Public repos also expose file structure, which can become a security issue — mitigated by moving sensitive files out or making the repo private.
Custom domain: GitHub Pages supports custom domains by adding a CNAME record in the domain registrar's DNS settings. Not covered in depth in the video.
The pathing bug encountered: Claude initially pushed with wrong CSS paths, so the live site rendered as unstyled text. Fix: screenshot the broken site, paste into Claude, say "fix the pathing." Claude identified the missing base URL prefix and patched it.
Repeatable workflow after first push: edit locally, say "push the changes," Claude commits and pushes, GitHub Actions redeploys automatically.

Buildable Ideas

Website-rebuild-as-a-service pipeline: reconnaissance prompt → markdown brief → project scaffold → PRD → Astro build → GitHub Pages deploy. Productise this as a one-command workflow for Good Carma clients who need a cheap, fast site.
Structured-kickoff prompt template: every project starts with "describe the build, state the deployment target, ask three alignment questions before touching code." This is a reusable pattern that cuts token burn across all Claude Code projects.
Skill-driven design system: adopt the UX/UI Pro skill pattern for Himiko — one skill produces the full design tokens, brand voice, component library in a single pass.
CLAUDE.md routing file per project: root-level index describing where everything lives, with smaller per-folder markdown files for local context. This is exactly the WAT framework structure, validated by an independent builder.
Zero-cost hosting chain for client deliverables: any static output Himiko produces (reports, dashboards, microsites) can ship via GitHub Pages for free instead of paying for hosting.
Screenshot-feedback loop: when visual output is wrong, take a screenshot and paste it into Claude with a one-line correction. Faster and more accurate than describing the problem in words.
Plan-before-edit rule: never let Claude implement changes without first proposing a plan. Prevents wasted tokens on misaligned work.
GitHub Actions as free build/deploy runner: Claude Code can configure Actions workflows to auto-build Astro, Next.js, or any static site on push. Replaces Vercel/Netlify for most small projects.

Key Takeaways

The real saving isn't the hosting fee, it's the token discipline. Four well-structured prompts outperform fifty reactive ones, and the structure is: recon, brief, scaffold, build.
CLAUDE.md as a routing file plus per-folder markdown context files is the repeatable project pattern. It's what WAT already does, and it's what Claude Code naturally rewards.
GitHub Pages + the gh CLI is a complete free hosting stack. Claude Code can install gh, authenticate, create the repo, and push the site in one session.
Claude's own memory harness (~/.claude/projects/...) already tracks project context automatically — manual memory systems are duplicating work Anthropic is doing for free.
For Good Carma: this is the exact pattern to use for every client-facing microsite, report page, or brand deliverable. No Wix, no Squarespace fees, fully editable via natural language.

# No Wix. No Squarespace. Just Claude Code and GitHub. (How I build and host websites for Free) **Source:** Jake Van Clief | https://www.youtube.com/watch?v=ozkx_eUfjY0 **Duration:** 29 min | **Published:** 2026-04-07 **Processed:** 2026-04-10 --- ## Core Concepts - The build: rebuild an existing website from scratch using Claude Code as the developer and GitHub Pages as free hosting. No Wix, Squarespace, Vercel, or Netlify. - GitHub Pages is a free feature of GitHub that serves any repository as a static website when it contains an `index.html` file. - The workflow is staged deliberately to minimise token burn and keep Claude aligned before any code is written: - Stage 1 — Reconnaissance with Claude.ai (web): paste the target URL into Claude on the web, ask it to crawl sub-pages and understand the site. If crawling fails, fall back to pasted screenshots. - Stage 2 — Generate a structured markdown brief: ask Claude to write a markdown file describing the site skeleton (URLs, slugs, form IDs, content types, brand voice, visual identity, tech stack, limitations). This brief is for Claude Code to read, not for the human. - Stage 3 — Move to the local IDE: create a project folder on desktop, drop the markdown brief inside, open Claude Code pointing at that folder. - Stage 4 — Kickoff prompt with deliberate context: instruct Claude Code to create a folder structure with a root `CLAUDE.md` (describing where files live and what they do) plus per-folder markdown files (brand voice, design tokens, components). Explicitly state the deployment target (GitHub Pages) upfront so Claude doesn't burn tokens planning Vercel or Docker deployments. - Stage 5 — Force alignment: end the prompt with "ask me three questions to understand more." This prevents Claude from building anything before confirming intent. - The UX/UI Pro skill is a packaged prompt bundle Claude Code loads on request to generate design systems (colours, typography, shadow depth, component patterns, delivery checklists). - Skills package prompts and can also contain Python scripts that run locally to offload work from tokens — the skill executes code instead of asking Claude to generate it. - Product Requirements Document (PRD): a large markdown file describing what the site needs to do and how. Claude builds this before writing any code, using the UX/UI skill's structure. - Claude Code auto-creates project memory without manual harness building: - There's a memory index inside the user's Claude install that tracks every project, description, type, reasons, and user context. - Every time Claude Code is opened inside that project folder, the memory is automatically loaded and referenced. - The creator's argument: no need for elaborate Obsidian-plus-YAML memory systems because Anthropic is already building the harness. - Astro is the framework Claude picked for the rebuild. Astro is a static site generator that outputs plain HTML/CSS/JS, which is compatible with GitHub Pages. - Iterative refinement loop: - Claude runs the Astro dev server locally and gives a `localhost` link to preview. - Human reviews, screenshots what they don't like, pastes back with corrections ("monotone palette is wrong, use dark cream, sage, forest, gold, mauve; source real photography of forest riding"). - Crucial rule: ask Claude to make a plan first before making changes, so the proposal can be reviewed before tokens are spent implementing it. - Deployment to GitHub Pages, two paths: - Simple path: a single `index.html` file uploaded to a new GitHub repository. Go to repo Settings → Pages → Deploy from branch → main. GitHub serves it at `<username>.github.io/<repo>` within a minute or two. - Complex path (used in the demo): a multi-file Astro project pushed via `gh` CLI (GitHub's command-line interface). Claude Code installs `gh` itself, triggers device authentication in the browser, then creates the repo, adds a `.gitignore`, and pushes. GitHub Actions then builds and deploys the Astro output. - `.gitignore` is a file that tells git which files to exclude from commits. - Critical for `.env` files (API keys), brand voice markdown, or anything private. - Without it, the entire folder including secrets gets pushed to a public repo. - Public repos also expose file structure, which can become a security issue — mitigated by moving sensitive files out or making the repo private. - Custom domain: GitHub Pages supports custom domains by adding a CNAME record in the domain registrar's DNS settings. Not covered in depth in the video. - The pathing bug encountered: Claude initially pushed with wrong CSS paths, so the live site rendered as unstyled text. Fix: screenshot the broken site, paste into Claude, say "fix the pathing." Claude identified the missing base URL prefix and patched it. - Repeatable workflow after first push: edit locally, say "push the changes," Claude commits and pushes, GitHub Actions redeploys automatically. ## Buildable Ideas - Website-rebuild-as-a-service pipeline: reconnaissance prompt → markdown brief → project scaffold → PRD → Astro build → GitHub Pages deploy. Productise this as a one-command workflow for Good Carma clients who need a cheap, fast site. - Structured-kickoff prompt template: every project starts with "describe the build, state the deployment target, ask three alignment questions before touching code." This is a reusable pattern that cuts token burn across all Claude Code projects. - Skill-driven design system: adopt the UX/UI Pro skill pattern for Himiko — one skill produces the full design tokens, brand voice, component library in a single pass. - `CLAUDE.md` routing file per project: root-level index describing where everything lives, with smaller per-folder markdown files for local context. This is exactly the WAT framework structure, validated by an independent builder. - Zero-cost hosting chain for client deliverables: any static output Himiko produces (reports, dashboards, microsites) can ship via GitHub Pages for free instead of paying for hosting. - Screenshot-feedback loop: when visual output is wrong, take a screenshot and paste it into Claude with a one-line correction. Faster and more accurate than describing the problem in words. - Plan-before-edit rule: never let Claude implement changes without first proposing a plan. Prevents wasted tokens on misaligned work. - GitHub Actions as free build/deploy runner: Claude Code can configure Actions workflows to auto-build Astro, Next.js, or any static site on push. Replaces Vercel/Netlify for most small projects. ## Key Takeaways - The real saving isn't the hosting fee, it's the token discipline. Four well-structured prompts outperform fifty reactive ones, and the structure is: recon, brief, scaffold, build. - `CLAUDE.md` as a routing file plus per-folder markdown context files is the repeatable project pattern. It's what WAT already does, and it's what Claude Code naturally rewards. - GitHub Pages + the `gh` CLI is a complete free hosting stack. Claude Code can install `gh`, authenticate, create the repo, and push the site in one session. - Claude's own memory harness (`~/.claude/projects/...`) already tracks project context automatically — manual memory systems are duplicating work Anthropic is doing for free. - For Good Carma: this is the exact pattern to use for every client-facing microsite, report page, or brand deliverable. No Wix, no Squarespace fees, fully editable via natural language.