Alex JauchConsulting Group
Book a call
All posts

How I Built a Professional Marketing Site in a Weekend Using Claude Code

Claude CodeWebsites

I built the entire Alex Jauch Consulting Group website — five marketing pages, 40 blog posts, a YouTube training hub, a self-assessment tool, a contact form, CI/CD, and SEO — in a single weekend. I’m a product manager, not a front-end developer. I’ve been building software for 30 years and it used to be relatively hard to stand up even a simple site like this. Now you can do it yourself in a weekend.

This post walks through exactly how I did it, step by step, so you can do the same thing. You don’t need to know HTML, CSS, or JavaScript to follow along. You need a computer, a GitHub account, and a willingness to talk to an AI in plain English.

What We’re Building

By the end of this guide, you’ll have:

  • A fast, professional static website (scores 95+ on Lighthouse)
  • A blog powered by Markdown files (write a post, push it, it’s live)
  • Hosted for free on Cloudflare Pages
  • Auto-deploys every time you push code
  • Contact form that emails you when someone fills it out
  • SEO basics: meta tags, sitemaps, structured data, RSS feed

The tech stack: Astro (a static site framework), Cloudflare Pages (free hosting), and Claude Code (your AI pair programmer).

Before You Start

What You Need

  1. Node.js (version 22 or newer) — download from nodejs.org
  2. Git — comes with most systems; if not, git-scm.com
  3. A GitHub account — free at github.com
  4. Claude Code — Anthropic’s CLI tool for working with Claude in your terminal
  5. A text editor — VS Code is free and works great, but anything works
  6. A design — this can be a Figma file, a sketch on paper, a screenshot of a site you like, or even just a written description of what you want

Install Claude Code

If you haven’t installed Claude Code yet, open your terminal and run:

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

Then authenticate:

claude

It will walk you through connecting your Anthropic account. Once you’re in, you’re ready to go.

The Process: Seven Phases in One Weekend

The key to using Claude Code effectively on a big project is to break the work into phases. Don’t ask it to “build me a website.” Instead, think of it like briefing a contractor — give it one job at a time, review the work, then move on.

I completed the AJCG site in seven phases, all on a single Saturday with some polish on Sunday. Here’s each one.

Phase 1: The Foundation — Scaffold, Design Tokens, Layout

What I Did

I started with a design handoff — a folder containing a high-fidelity HTML/CSS prototype and a README describing every visual detail (fonts, colors, spacing, radius values, animations). If you don’t have a professional design handoff, don’t worry. You can make one with a tool like Figma or Claude Design. Even a rough sketch you made by hand is fine.

I created a new directory, opened Claude Code in it, and gave it the design handoff folder to read. Then I told it what to build.

What to Tell Claude Code

Start a new project folder and open Claude Code:

mkdir my-site
cd my-site
claude

Then give it your first instruction. Here’s roughly what I said:

I need you to build a static marketing site using Astro 5, deployed to Cloudflare Pages. The Home page should have a hero section, a service overview, a workflow diagram, a client quote, an FAQ accordion, and a call-to-action. The Services page breaks down our three offerings. The About page has a bio and background. The Contact page has a form. Note the design guide in \design. Start by developing an architecture plan. Document that plan in Architecture.md.

Key Lesson: The Architecture Plan

Before Claude Code started writing code, I asked it to create an architecture plan first. This is a document that outlines the framework choice, file structure, CI/CD pipeline, and key decisions. Claude Code wrote this to an MD file and I reviewed it before giving the go-ahead.

This is critical. If you skip planning and go straight to “build me a website,” you’ll end up with something that works but is hard to change later. Spend 10 minutes reviewing the plan. Ask Claude Code why it made certain choices. Push back if something doesn’t feel right.

Phase 2: Implementation Plan

What I Did

Now that we have a good architecture plan, we need to build an implementation plan. This second step is important because it forces Claude to reconsider the decisions made in the first pass. A second pass reduces the likelihood that Claude will make basic mistakes or invent things that don’t exist (these are called hallucinations).

What to Tell Claude Code

Referencing the design in \design and the Architecture MD file, build a detailed implementation plan. Document this plan in “Implementation Plan.md” in the docs directory.

Key Lesson: No Framework Runtime

In this case, we are using Astro because it’s very simple and allows us to quickly build up static pages like this one. Astro’s superpower is that it ships zero JavaScript by default. Interactive elements like accordions, tabs, and the mobile navigation drawer use plain <script> tags with vanilla JS — no React, no Vue, no 85KB framework bundle. This is why the site loads fast.

Phase 3: Implementation

What I Did

Built the actual page content: Home, Services, About, and Contact pages. Depending on how detailed your design is, you may need to provide more content for the pages. In my case, I had a detailed design already so I just told Claude to proceed. You can also add content later, the site is very easy to update.

What to Tell Claude Code

Open the implementation plan and begin with phase one. Update the document as you go.

Key Lesson: Content Comes From You

Claude Code is great at structure and code, but the actual words on your site should come from you. Write your copy first — even rough bullet points — and give it to Claude Code to put into the right components. If you ask Claude Code to write your marketing copy, it will sound generic. Your voice is your brand.

Phase 4: Blog Migration

What I Did

This was the biggest single phase. I had about 40 blog posts on another platform (Fictivize/Blogspot) that needed to move to the new site. Claude Code migrated all of them, including 94 images, into Astro’s Content Collections system.

What to Tell Claude Code

Set up Astro Content Collections for a blog. Use the glob loader with MDX files. The schema should require: title, description (max 160 chars), publishedAt (date), author, tags (string array), and coverImage. Then migrate these blog posts [provide them]. Create a blog listing page with tag filtering, individual post pages, tag filter pages at /blog/tag/[tag], and an RSS feed.

How Content Collections Work

This is one of Astro’s best features. You define a schema in src/content.config.ts:

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const blog = defineCollection({
  loader: glob({ pattern: '**/*.mdx', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    description: z.string().max(160),
    publishedAt: z.coerce.date(),
    author: z.string(),
    tags: z.array(z.string()),
    coverImage: z.string(),
  }),
});

export const collections = { blog };

Then each blog post is an .mdx file with frontmatter:


---
title: "Your Post Title"
description: "A short description for SEO and social sharing."
publishedAt: "2025-10-13"
author: "Your Name"
tags: ["ai", "product-management"]
coverImage: "/images/blog/your-image.jpg"

---

Your post content goes here. You can use **Markdown** formatting.

How to Publish a New Blog Post

This is the beauty of this setup — the publishing workflow is dead simple:

  1. Create a new .mdx file in src/content/blog/
  2. Add your cover image to public/images/blog/
  3. Commit and push to master
  4. Cloudflare auto-builds and deploys in about 90 seconds

No CMS login. No database. No WordPress updates. Just files in a Git repo.

Phase 5: Training Hub and Assessment Tool

What I Did

Built a training page that pulls YouTube playlists at build time and a competency self-assessment tool — a multi-step questionnaire that scores users across six axes using the Dreyfus model (Novice → Expert).

What to Tell Claude Code

Build a training hub page that fetches playlists and videos from the YouTube Data API at build time. Use the channel handle @MindfulAICoding. Also build a competency self-assessment tool with 6 axes (product, design, architecture, engineering, marketing, sales), each scored on knowledge, ability, and experience using a 5-level Dreyfus scale.

YouTube Integration: Build-Time Only

A key architectural decision: YouTube videos are fetched at build time, not at runtime. This means:

  • No API calls from visitors’ browsers
  • No YouTube API key exposed to the client
  • The page loads instantly (it’s just static HTML)
  • New videos appear on the next rebuild (we set up a daily cron for this later)

The src/lib/youtube.ts module handles the API calls. Without a YOUTUBE_API_KEY environment variable, it gracefully returns empty arrays so the build still succeeds — you just see no videos. This matters because local development works fine without the key.

Key Lesson: Graceful Degradation

Always make sure your site builds successfully even when external services aren’t available. API keys shouldn’t be required for local development. Claude Code handled this automatically — the YouTube module checks for the key and returns empty data if it’s missing.

Phase 6: Contact Form Backend and SEO

What I Did

Set up a serverless contact form using Cloudflare Pages Functions and added structured data (JSON-LD) for SEO.

What to Tell Claude Code

Build a contact form backend as a Cloudflare Pages Function. It should validate the form data, send an email notification via the Resend API, and include honeypot and timing-based bot protection. Also add JSON-LD structured data for Organization, Person, and Article schemas across the site.

How the Contact Form Works

The contact form lives in a special directory: functions/api/contact.ts. Cloudflare automatically deploys files in the functions/ directory as serverless functions. This file:

  1. Receives the form POST request
  2. Validates name and email
  3. Checks honeypot fields and submission timing (bot protection)
  4. Sends an email via the Resend API
  5. Returns a success/error response

The API keys (RESEND_API_KEY, CONTACT_EMAIL) are set in the Cloudflare dashboard, never in code. This is important — never commit API keys to your repository.

Phase 7: CI/CD — Automated Quality Checks

What I Did

Set up two GitHub Actions workflows: one that checks pull requests (type checking + build verification), and one that triggers a daily rebuild so new YouTube videos appear automatically.

What to Tell Claude Code

Set up CI. Create a GitHub Actions workflow that runs astro check and astro build on pull requests to master. Also create a daily rebuild workflow that triggers a Cloudflare deploy hook at 6 AM UTC to pick up new YouTube videos.

The PR Check Workflow

Every time you open a pull request, GitHub Actions runs:

npx astro check    # TypeScript + Astro diagnostics
npm run build      # Full production build

If either fails, the PR is blocked. This catches broken links, type errors, and bad frontmatter before it reaches production.

The Daily Rebuild

A simple cron workflow that hits a Cloudflare deploy hook:

name: Daily rebuild
on:
  schedule:
    - cron: '0 6 * * *'  # 6 AM UTC daily

jobs:
  rebuild:
    runs-on: ubuntu-latest
    steps:
      - name: Trigger Cloudflare Pages deploy hook
        run: curl -s -X POST "${{ secrets.CF_DEPLOY_HOOK_URL }}"

This ensures new YouTube videos show up without you lifting a finger.

Deployment: Going Live on Cloudflare Pages

Step 1: Push to GitHub

Create a GitHub repository and push your code:

git init
git add .
git commit -m "Initial site build"
git remote add origin https://github.com/your-username/your-site.git
git push -u origin master

Step 2: Connect Cloudflare Pages

  1. Go to dash.cloudflare.com and sign up (free)
  2. Go to Workers & Pages → Create → Pages → Connect to Git
  3. Select your GitHub repository
  4. Set the build settings:
    • Framework preset: Astro
    • Build command: npm run build
    • Build output directory: dist
  5. Add environment variables (if needed):
    • YOUTUBE_API_KEY — for the training page
    • RESEND_API_KEY — for the contact form
    • CONTACT_EMAIL — where form submissions go
  6. Click Save and Deploy

Your site will be live at your-project.pages.dev within a few minutes.

Step 3: Custom Domain (Optional)

In the Cloudflare Pages dashboard, go to Custom domains → Set up a custom domain. Follow the DNS instructions. Cloudflare handles SSL automatically.

Warning: Never Use wrangler pages deploy

If your project is connected to GitHub (which it is if you followed the steps above), never run wrangler pages deploy against it. This silently converts your project to “Direct Upload” mode and permanently breaks the GitHub webhook. There is no undo. Deployments happen automatically when you push to GitHub — that’s the whole point.

After Launch: What Came Next

The initial seven phases got the site live. But a real site needs ongoing care. Here’s what I did in the days after launch, all with Claude Code:

Security Hardening

Review the site for security issues. Pin GitHub Actions to specific commit SHAs instead of version tags. Add security headers. Restrict CORS on the contact form. Add bot protection.

SEO Optimization

Audit the site for SEO issues. Fix missing meta descriptions, add canonical URLs, optimize heading hierarchy, add author schema markup with sameAs links to social profiles.

Dependency Management

I set up Dependabot to automatically open pull requests when dependencies have updates. Combined with the CI checks from Phase 7, this means dependency updates are tested automatically.

Pre-Commit Hooks

I added Husky to run the CI checks locally before every commit. This catches problems before they even reach GitHub:

npx husky init

Then the pre-commit hook runs astro check and astro build before allowing a commit through.

Tips for Working with Claude Code

After building an entire site this way, here are the lessons I’d pass along:

1. Plan Before You Build

Ask Claude Code to write an architecture plan before touching code. Review it. Push back on anything you don’t understand. The 10 minutes you spend here save hours later.

2. Work in Phases

Don’t ask for everything at once. Break the work into logical chunks. Build the foundation, verify it works, then add the next layer. This is how professional software teams work, and it’s how you should work with Claude Code.

3. Verify After Every Phase

Run npm run dev and look at your site in the browser after every phase. If something doesn’t look right, tell Claude Code what you see. Be specific: “The header is too tall on mobile” is better than “it looks wrong.”

4. Use CLAUDE.md

Run /init in Claude Code to create a CLAUDE.md file in your project root. This file tells Claude Code about your project’s conventions, commands, and architecture. Every future Claude Code session reads this file first, so it always has context about your project. Keep it updated as your project evolves.

5. Your Content, Its Code

Write your own copy, headlines, and descriptions. Give them to Claude Code to put into the right place. AI-generated marketing copy reads like AI-generated marketing copy. Your expertise and your voice are what make your site worth visiting.

6. Commit Often

Make a Git commit after each successful phase. This gives you a save point to roll back to if something goes wrong later. Claude Code can handle Git for you — just say “commit this with a message describing what we did.”

7. Don’t Fear the Terminal

If you’ve never used a terminal before, that’s fine. Claude Code runs in the terminal, but you’re just typing English. It handles the commands. The only commands you really need to know are:

npm run dev      # Start the dev server
npm run build    # Build for production
git status       # See what changed
git add .        # Stage everything
git commit -m "message"  # Save a snapshot
git push         # Send to GitHub (and deploy)

The Final Score

Here’s what the AJCG site looks like by the numbers:

  • 31 commits from scaffold to polished production site
  • 5 marketing pages (Home, Services, About, Contact, Training)
  • 40 blog posts migrated with images
  • 21 reusable components in an organized design system
  • 0 bytes of framework JavaScript shipped to visitors
  • Free hosting on Cloudflare Pages
  • Automated deploys on every push
  • Daily rebuilds for fresh YouTube content
  • Built in a weekend by a product manager, not a developer

The entire site — every page, every component, every configuration file, every CI workflow — was built in collaboration with Claude Code. The commit history tells the story: seven clean phases, then iterative polish.

You don’t need to be a developer to build a professional website anymore. You need to know what you want, be willing to break the work into steps, and have a tool that can translate your intent into working code. That’s what Claude Code does.

Now go build something.