Claude Code Tutorial Part 5: Build the Website with Claude Code

Part 5 of 8 of Building a Website with Claude Code. See all parts.

Building the website

Picking the technology

There's no perfect choice. There are sensible defaults.

If your site has lots of changing content (blog, news, products): Use Laravel (PHP) or Next.js (JavaScript). Laravel is friendlier for non-developers because the admin tooling (Filament) is excellent and PHP hosting is cheap.

If your site has mostly fixed content (marketing, portfolio, brochure): Use plain HTML + Tailwind CSS, or Astro (slightly more sophisticated). Hosting is free or near-free on Cloudflare Pages, Netlify, or Vercel.

If you don't know yet: Ask Claude. "My site is a small business homepage with a blog. I want a CMS for non-developers. What would you pick?" Claude will explain the trade-offs.

Avoid for a first project:

• Microservices.
• Complex JavaScript single-page apps (SPAs) when you don't need them.
• Anything where the README starts with "First, install Docker."

Database-driven vs static

If you choose a database-driven site:

• Pick MySQL if you're hosting on shared hosting (Hostinger, SiteGround). It's universal.
• Pick PostgreSQL if you're hosting on a modern cloud platform (Supabase, Neon, Railway). It's more capable.

Claude will set the database up. Your job is to know the name, the username, and the password, and to write them once into a configuration file called .env (which never leaves your computer or your hosting server).

Adding pages, content, and images

Add one page at a time. A good rhythm:

1. Tell Claude what page you want. Describe each section.
2. Let Claude scaffold the page with placeholder text.
3. Replace the placeholder text with your real copy.
4. Look at it in a browser. Note three things you'd change.
5. Ask Claude to make those three changes.
6. Repeat.

For images:

• Use real photography if you have it. It instantly differentiates the site.
• If you don't, use Unsplash (https://unsplash.com) or Pexels (https://pexels.com). Both are free for commercial use.
• Download images and host them on your own site. Don't hot-link from someone else's server.
• Tell Claude the URL or the local file path. It will write the image into the right place in the page.
• Optimise images before uploading: aim for under 300 KB per image. Use the JPEG format for photos, PNG for diagrams with sharp edges, WebP if you're feeling modern.

← Part 4 of 8: Prompt and Plan with Claude Code · All parts · Part 6 of 8: Things to Consider as You Build →