Build Any Website in Under 2 Hours with Claude Code

G'day mate! Let's cut the fluff. You want to build a website, and you want it done yesterday. I'm gonna show you how to use Claude Code to knock out a professional brochure or static site in under 2 hours. No BS, no fluff, just straight-up results.

Why Claude Code is a Game Changer

Look, I've been building websites for years, and Claude Code has completely changed how I work. It's like having a senior developer sitting right next to you, except this one never needs a coffee break and actually listens to what you want.

The beauty? It works directly in your terminal, understands your entire codebase, and can actually write, edit, and fix code across multiple files. No more copy-pasting from ChatGPT like a muppet.

Getting Started (5 Minutes Max)

Right, let's get you sorted. Installing Claude Code is dead simple:

npm install -g @anthropic-ai/claude-code

Once that's done, just run:

claude

Boom! You're in. First time? It'll ask for your API key. Get one from console.anthropic.com if you haven't already.

The Power Tools You Need to Know

1. Memory (CLAUDE.md) - Your Project's Brain

This is the secret sauce. Claude Code remembers stuff about your project through CLAUDE.md files. Chuck one in your project root and Claude will always know your project's quirks.

# CLAUDE.md

## Project Overview
This is a marketing site for Aussie SMEs. Keep it simple, mate.

## Tech Stack
- Astro (static site generator)
- Tailwind CSS v4
- TypeScript
- Bun (package manager)

## Commands
- `bun dev` - Start local dev server
- `bun build` - Build for production
- `bun check` - Run linting/formatting

## Important Notes
- Always use Aussie spelling (optimise not optimize)
- Keep the tone casual and friendly
- Mobile-first design is non-negotiable

Pro tip: Start any message with # to quickly add to your project memory:

# Always use rem units for spacing, never pixels

2. Slash Commands - Your Speed Dial

These bad boys save you heaps of time:

• /memory - Edit your CLAUDE.md file
• /init - Let Claude analyze your project and create a CLAUDE.md
• /clear - Fresh start when things get messy
• /review - Get a code review on recent changes
• /cost - Check how many tokens you've burned

3. MCP Tools - Supercharge Your Workflow

MCP (Model Context Protocol) lets Claude connect to external tools. Want to pull data from a database? Connect to APIs? Search the web? MCP's got your back.

# Add a PostgreSQL connection
claude mcp add postgres --type stdio

# Add web search capability
claude mcp add websearch --type http

4. Extended Thinking - For the Tricky Bits

When you hit a gnarly problem, tell Claude to think harder. No joke, just add "think" to your prompt:

think through the best architecture for a multi-tenant SaaS app

The 2-Hour Website Blueprint

Alright, here's the play-by-play for building a complete website in under 2 hours:

Phase 1: Setup (15 minutes)

1. Create your project:

   mkdir my-awesome-site && cd my-awesome-site
   claude

2. Initialize with your framework:

   create an Astro site with Tailwind CSS and TypeScript. 
   Use bun as the package manager.

3. Set up your CLAUDE.md:

   /init

Phase 2: Core Structure (30 minutes)

Now we build the bones:

Create a marketing site for a local plumbing business. I need:
- Homepage with hero, services, testimonials, and CTA
- About page with team info
- Services page with 6 main services
- Contact page with form that emails to contact@example.com
- Mobile-responsive navigation
- SEO optimized with proper meta tags

Use modern design with blue accent colors. Keep it clean and professional.

Phase 3: Content & Polish (45 minutes)

Time to make it shine:

• Add real content: Have your copy ready or ask Claude to generate placeholder text
• Optimize images:

  Add hero images to each page using Unsplash. 
  Optimize all images with Astro's Image component.

• Test everything:

  Test the contact form and make sure all links work. 
  Check mobile responsiveness.

Phase 4: Launch (30 minutes)

Let's get this baby live:

# Build for production
bun build

# Deploy to Netlify (or your preferred host)
Set up deployment to Netlify with environment variables for the contact form

Pro Tips from the Trenches

Common Gotchas to Avoid

• Don't let Claude guess: If you have specific colors, fonts, or spacing requirements, spell them out in your CLAUDE.md
• Check the generated code: Claude's good, but not perfect. Always review critical functionality like forms and API calls
• Version control is your mate: Commit often. If Claude goes off the rails, you can always git reset --hard
• Watch your tokens: Complex sites can burn through tokens. Use /cost to keep tabs

Real Talk: What's Actually Possible?

In 2 hours with Claude Code, you can realistically build:

• A 5-10 page marketing site with contact forms
• A portfolio site with project galleries
• A restaurant site with menu and booking system
• A landing page with email capture and automation
• A simple blog with CMS integration

What you probably can't do (yet):

• Complex e-commerce with payment processing
• Multi-user SaaS applications
• Real-time collaboration features
• Sites requiring extensive custom backend logic

The Secret Sauce: Extended Thinking

Here's a trick most people don't know. When you're stuck on architecture or complex logic, use Claude's extended thinking:

think step by step about how to structure a multi-language 
site with Astro that's SEO optimized for each locale

Claude will actually take more time to think through the problem properly. It's like the difference between asking your mate for a quick opinion versus sitting down for a proper strategy session.

Wrapping Up

Look, building websites used to be a slog. Now with Claude Code, you can knock out professional sites faster than ever. The key is knowing the tools and working smart.

Start simple, iterate fast, and don't be afraid to experiment. Claude's not going to judge you for asking it to "make the button more clicky" or "add some pizzazz to the hero."

Ready to give it a crack? Fire up Claude Code and build something awesome. And hey, if you need a hand with your next web project, you know where to find us at Cheeky Panda.