How I Built JoseAndGoose.com Using Claude

TL;DR by Goose▾

Ingredients

• Claude.ai — your AI sous chef and pair programmer ($200/yr)
• Vercel — hosting platform and auto-deploy pipeline (free)
• GitHub — code repository, Vercel creates this for you (free)
• Next.js — the React framework running the site (free)
• VS Code — code editor for making changes locally (free)
• Node.js / npm — runs your dev server and manages packages (free)
• Terminal — where you type commands to navigate, install, and deploy (free)
• Squarespace — domain registrar, where joseandgoose.com was purchased ($54 for 3 years)
• Cloudflare — DNS management and security layer (free)
• Google Forms + Google Sheets — contact form backend and submission alerts (free)
• Google Analytics — visitor tracking and traffic sources (free)
• Vercel Analytics — lightweight complementary analytics (free)

What I Was Trying to Solve

I wanted a personal website that felt like mine — not a Squarespace template that any freelancer or small business could spin up in an afternoon. The tools that make website-building “easy” do so by giving you boxes to fill in: here’s your header, here’s your bio, here’s your contact form. The output is functional but generic. I wanted custom typography, a specific color palette, a layout I’d designed myself, and writing that lived alongside it in a way that felt intentional.

The problem: I don’t know how to code. And hiring someone to build a custom site runs $5,000–$20,000 for anything that doesn’t look like a template.

What changed: AI can now write code. Not just snippets — full working websites, with mobile responsiveness, deployment configuration, and bug fixes. The question wasn’t “can I build a custom site?” anymore. It was: how long does it actually take someone with zero coding experience to build one with AI?

Session 1: From Zero to a Styled Homepage

Evening, Day 1 — ~3 hours

Pace: Moderate. Some friction getting the local environment running, but satisfying progress.

Before any design work could start, the computer needed the right tools in place: a code editor to make changes, a command-line window called Terminal to run instructions, and a local preview so I could see the site before pushing it live. The first hour was entirely setup — installing software, connecting accounts, and getting a blank starter site running in the browser.

🔧 Developer section: Environment setup

• Clicked “Create” on Vercel to deploy a blank Next.js starter — live URL in minutes, auto-connected to a new GitHub repo
• Cloned the repo to my Desktop using Terminal, opened the project in VS Code
• Ran npm run dev in Terminal and got “next: command not found” — fixed by running npm install in Terminal first (installs all Node.js/npm dependencies)
• Hit a lock file error on restart — solved by closing and reopening Terminal
• Got the local dev server running at localhost:3000 in the browser showing the default Next.js template

With the environment ready, I described the look I wanted to Claude and shared reference screenshots from sites I admired. Claude generated complete code files for the layout, typography, and color palette — I moved them into the project folder and the design appeared in my browser.

🔧 Developer section: Design generation with Claude

• Described the look I wanted (Getty nav, n/naka typography, Apple tiles) in Claude.ai — it produced full page.tsx, globals.css, and layout.tsx files
• Downloaded the three files from Claude.ai and copied them into the app/ folder using Terminal
• First paste in VS Code landed empty — re-copied via Terminal cat command and the site rendered at localhost:3000

Session 2: Building Out the Pages

Day 2 — ~2–3 hours

Pace: Fast. This was the most productive stretch.

Day 2 was about making the site feel real — replacing placeholder images with actual photos and building the About, Work, and Contact pages. For each page, I described what I wanted to Claude in plain English and received a complete, styled page back. Each one deployed live in about 30 seconds.

🔧 Developer section: Building inner pages and adding photos

• Dragged 5 photos (hero + 4 tiles) into the /public folder using Finder, deleted the default SVGs that came with the Next.js starter
• Asked Claude.ai to generate the About page (app/about/page.tsx) — bios for me and Goose, styled to match the homepage
• Asked Claude.ai for a Work page (app/work/page.tsx) — press articles grouped by company (Pet Space, DoorDash, Instacart, Goldman Sachs, Teach for America)
• Built a Contact page (app/contact/page.tsx) by creating a form in Google Forms, copying the embed <iframe>, and having Claude.ai wrap it in a styled layout
• Set up email alerts for new submissions directly in Google Forms — no code needed
• Deployed each page with git add . && git commit && git push in Terminal — auto-deployed via GitHub → Vercel in ~30 seconds

Pointing joseandgoose.com at the new site required updating settings across three services so they all agreed on where to send visitors. Then came the first look on an actual phone — the desktop layout hadn’t translated, so several rounds of adjustments followed until both versions matched.

🔧 Developer section: Custom domain and mobile QA

• In the Vercel dashboard, added joseandgoose.com under Settings → Domains
• In Squarespace DNS settings, added an A record pointing to Vercel’s IP (76.76.21.21) — waited ~10 minutes for DNS propagation
• Tested on my phone and the mobile layout was broken — hero text cut off, image clipped, tiles in a 2-column grid that didn’t fit
• Took 4–5 rounds of CSS fixes in VS Code: flipped image/text order in the hero, adjusted padding, made the jump bar horizontally scrollable, switched the press grid to single-column
• Each fix: save in VS Code → push via Terminal → live on Vercel in ~30 seconds → check on phone

Session 3: Analytics and Security

Day 2 — ~45 minutes

Pace: Quick. Mostly configuration across dashboards, not code.

With the site live, the last session added two layers: visitor analytics to see who’s reading what, and Cloudflare to act as a security filter between visitors and the site. Analytics was a single package install; Cloudflare was mostly configuration across dashboards.

🔧 Developer section: Analytics setup

• Ran npm install @next/third-parties in Terminal to add the Google Analytics package to the Next.js project
• In VS Code, added a <GoogleAnalytics> component to app/layout.tsx with my measurement ID hardcoded
• Pushed the change via Terminal → GitHub → Vercel to deploy
• Verified tracking was working in the Google Analytics dashboard → Reports → Realtime — saw myself as an active user within 30 seconds
• Enabled Vercel Analytics from the Vercel project dashboard (Settings → Analytics toggle) as a complementary layer

Cloudflare acts as an intermediary between visitors and the site — filtering traffic and enforcing HTTPS. The setup was routine until one misconfigured setting pointed the domain at the wrong server, taking the site offline on mobile until a single IP address was corrected.

🔧 Developer section: Cloudflare DNS configuration

• Created a free account on Cloudflare, added joseandgoose.com, selected the free plan
• Cloudflare scanned existing DNS records and provided two nameservers
• In Squarespace domain settings, switched nameservers from Squarespace’s defaults to Cloudflare’s custom nameservers
• Site went down on mobile with ERR_QUIC_PROTOCOL_ERROR — the A record in Cloudflare still pointed to Squarespace’s old IP (216.198.79.1) instead of Vercel’s (76.76.21.21), and the proxy was set to “Proxied” (orange cloud) which conflicted with Vercel’s CDN
• Fix in Cloudflare DNS dashboard: updated the A record IP to 76.76.21.21 and switched both records to “DNS only” (grey cloud)

Final Output

A fully deployed personal website at joseandgoose.com with a custom domain, responsive design across desktop and mobile, four content pages, a working contact form with email alerts, visitor analytics, and a security layer — built in about 6–7 hours by someone with no prior web development experience, guided entirely by Claude.

What went fast

• Vercel deployment (one click to go live)
• Building inner pages with Claude.ai (About, Work, Contact — generated in minutes)
• Adding Google Analytics (one npm install in Terminal + one component in VS Code)

What needed patience

• Local environment setup in Terminal (npm install, lock files, missing commands)
• Mobile CSS QA in VS Code (4–5 rounds of fixes per page)
• DNS configuration across Squarespace → Cloudflare → Vercel (three dashboards, one IP conflict)

The biggest lesson? Shipping a website isn’t one skill — it’s a dozen small ones strung together. Claude handled the code. I handled the decisions. And Goose supervised from the couch.