Scaffold your site

By the end of this chapter you’ll have a public website at megmude-site.pages.dev showing your name, a placeholder bio, and a sample article. The design is deliberately plain — you’ll iterate on the look in chapter 04.

You’ll do most of the work by pasting prompts into Claude Code. Claude runs the commands; you verify the outcome at each step.

1. Open a working folder in Claude Code

In Terminal:

mkdir -p ~/Code && cd ~/Code && claude

This creates ~/Code if it doesn’t exist and opens Claude Code there.

2. Scaffold the site and create the GitHub repo

Paste into Claude Code (one prompt, multiple steps):

From ~/Code, do all of the following in order:

  1. Run npm create astro@latest megmude-site -- --template minimal --typescript strict --install --no-git --skip-houston. This creates ~/Code/megmude-site/ with an Astro starter.
  2. cd megmude-site.
  3. Add the MDX integration: npx astro add mdx --yes.
  4. Add the YAML loader: npm install yaml.
  5. Run npm run build and confirm it succeeds.
  6. Initialize git: git init -b main, then git add . and git commit -m "feat: initial Astro scaffold".
  7. Create a public GitHub repo and push: gh repo create megmude-site --public --source=. --remote=origin --push.

Stop at the end and tell me the GitHub URL of the new repo.

Wait for Claude to confirm everything succeeded. If a step fails, ask Claude to show you the error and fix it before moving on.

3. Create the content shell

Paste into Claude Code:

Create content/shell.yaml with the following contents:

identity:
  name: "Meg Mude"
  headline: "Operations executive"
  bio: |
    Replace this paragraph with a short professional bio (2 to 4 sentences).
    For now, this placeholder is fine.
  photo: "/photo.jpg"
  location: "United States"

contact:
  email: "hello@megmude.com"
  linkedin: "https://www.linkedin.com/in/megmude/"
  phone: null

experience:
  - role: "Role title"
    company: "Company"
    span: "2020 – 2024"
    impact: "One line of impact."
  - role: "Role title"
    company: "Company"
    span: "2017 – 2020"
    impact: "One line of impact."

tone_tags: [confident, editorial, minimal]

admired_sites:
  - "https://example.com"

Then create src/lib/shell.ts that loads this file with the yaml package and exports a typed loadShell() function. The exported Shell type should match the shape of shell.yaml.

4. Create the articles content collection

Paste into Claude Code:

Create src/content.config.ts defining an articles collection using the loader-based API. Use glob({ pattern: '**/*.{md,mdx}', base: './content/articles' }) from astro/loaders. Schema fields: title: string, date: coerce.date(), summary: string. Then create content/articles/2026-05-01-sample-article.md with frontmatter title “On building things that last”, date “2026-05-01”, summary “A sample article so layouts have something real to render”, and a short body paragraph.

5. Build the home page and article detail page

Paste into Claude Code:

Create src/styles/tokens.css with minimal design tokens (colors, font stack, max-width 720px) and a body that uses them. Create src/layouts/BaseLayout.astro that imports tokens.css and renders <html><head><title>{title}</title></head><body><main><slot/></main></body></html> accepting a title prop. Replace src/pages/index.astro so it imports loadShell and getCollection, sorts articles by date descending, and renders the bio (shell.identity.name, shell.identity.headline, shell.identity.bio) plus a list of articles linking to /articles/<id>. Create src/pages/articles/[...id].astro that uses getStaticPaths over the articles collection and renders the article body via render(entry) from astro:content. Both pages should use BaseLayout.

6. Drop a placeholder photo

Paste into Claude Code:

Save a placeholder image to public/photo.jpg. Use ImageMagick (convert -size 800x800 xc:'#cccccc' public/photo.jpg) if available; otherwise create a 1x1 grey JPEG with any tool. The file just needs to exist so the page doesn’t 404 on the photo path.

7. Verify locally

Paste into Claude Code:

Run npm run dev and tell me whether the home page renders the bio and the sample article link. Then stop the dev server.

Open http://localhost:4321/ in your browser if Claude doesn’t open it for you. You should see your name, the placeholder bio, and the sample article. Click the article to verify the detail page works.

8. Commit your additions and push

The original scaffold landed in step 2. Now commit the content + layouts you just added:

Paste into Claude Code:

Stage all the new files (content/, src/lib/, src/styles/, src/layouts/, src/content.config.ts, src/pages/articles/, public/photo.jpg) and any modified files, commit with message “feat: shell, articles, base layout”, then push to GitHub.

9. Install wrangler and authenticate

Wrangler is the Cloudflare command-line tool. You’ll use it to deploy your site.

brew install cloudflare-wrangler

(If brew install cloudflare-wrangler fails, try npm install -g wrangler instead.)

Sign in:

wrangler login

A browser tab opens. Click Allow to authorize. The terminal will report that wrangler is logged in.

Verify wrangler can see your account:

wrangler whoami

You should see Common Nexus’s account listed.

10. Create the Cloudflare Pages project

Paste into Claude Code:

Run wrangler pages project create megmude-site --production-branch=main and confirm it succeeds.

If it errors with “project already exists,” that’s fine — skip to the next step.

11. Build and deploy production

Paste into Claude Code:

Run npm run build in this directory. Then run wrangler pages deploy dist --project-name=megmude-site --branch=main --commit-dirty=true. Tell me the deployment URL it prints.

The deployment URL will look like https://<hash>.megmude-site.pages.dev. The clean production URL is https://megmude-site.pages.dev — that’s the one you’ll share.

Open both in a browser to confirm they render your bio and the sample article.

In chapter 03 you’ll fill in the shell with your real bio and writing.