Build a Professional Website for Free with AI (No Coding Required)

Aloha!

I built two professional websites in a weekend without writing a single line of code myself. Both look like they were designed by a real agency. Both cost $0 per month to host. And I am going to show you exactly how I did it, with a single prompt you can copy and paste.

This guide is for non-technical people. You do not need to know how to code. You will use Claude Code (an AI coding assistant) to research your competitors, build an Astro website (a modern, fast website framework), and deploy it to Cloudflare Pages (one of the biggest infrastructure companies in the world). The total cost is $0 if you use the free tiers.

What You Will End Up With

• A fast, professional website. One that scores 90+ on Google’s PageSpeed test (the tool Google uses to rate how fast and well-built a site is).
• A competitive analysis of your market. Claude researches your competitors before building anything, so your site is sharper than theirs from day one.
• A working contact form with spam protection. Real submissions from real people; nothing from bots.
• Free hosting on Cloudflare. Not a free trial. Actually free, indefinitely, for sites at this scale.
• A site you fully own and control. Not locked into Wix, Squarespace, or WordPress. Your code, your domain, your data.
• A CLAUDE.md file and design tokens that keep your site consistent every time you ask Claude to make updates in the future.

What You Need Before Starting

1. Claude Code. This is the AI that will build your site. Sign up at claude.ai, then install Claude Code (the desktop app or CLI version). You can use the free tier to start.
2. The Claude Code Chrome extension. This lets Claude interact with websites on your behalf, including setting up your hosting through the Cloudflare dashboard. Install it from the Chrome Web Store and make sure it is active.
3. A GitHub account. GitHub is where your website’s code will live. It is free. Think of it as Google Drive for code.
4. A Cloudflare account. Cloudflare will host your site for free. Sign up at cloudflare.com.
5. Stay logged into GitHub and Cloudflare in Chrome. Claude needs access to these dashboards through the browser extension to set everything up for you.

That is the only manual setup. Everything else below, Claude handles for you.

The One Prompt That Does Everything

Here is the full prompt. Fill in the blanks in the “About My Business” section at the top, then paste the entire thing into Claude Code. Claude will research your competitors, build your site, set up hosting through your browser, and run quality checks.

ABOUT MY BUSINESS:
- Business name: [e.g., Acme Consulting]
- What I do in one sentence: [e.g., I help startups with
  fractional CFO services]
- My location: [e.g., Denver, CO]
- My email: [e.g., hello@acme.com]
- My current website (if I have one): [URL or "none"]
- 2-3 competitor websites I respect: [URLs]
- Anything else about my brand, personality, or style:
  [optional; e.g., "professional but warm, navy blue
  and gold colors, I want to come across as approachable
  not corporate"]

---

Now build me a professional website. Here is the full
workflow I need you to follow:

PHASE 1 — RESEARCH
Before you write a single line of code, do deep research:
- Visit each of my competitor URLs and analyze: their
  positioning, what they lead with on the homepage, how
  they describe their services, what trust signals they
  use (testimonials, certifications, logos, case studies),
  their color schemes, and what feels generic or weak.
- Search the web for the top 5-10 websites in my specific
  niche. Study what the best ones do differently.
- Based on this research, identify gaps and opportunities.
  What can my site say more honestly or more specifically
  than my competitors? What do they all miss?
- Write a brief competitive analysis (just for me to
  review) before you start building.

PHASE 2 — BUILD
1. Clone the Astroplate theme from GitHub and set it up as
   a new project called my-website. Install all dependencies
   and confirm it runs locally.

2. Based on your competitive research, customize everything:
   - Pick a professional color palette that fits my industry
     and stands out from my competitors
   - Write a compelling hero headline and subheading that
     positions me sharply against the competition
   - Write a services/offerings section with clear
     descriptions
   - Write a professional about section
   - Write any other sections that my competitors have and
     I should too (testimonials placeholder, case studies,
     FAQ, etc.)
   - Make sure the copy is specific and confident, not
     generic consulting-speak
   - Make it look polished on both desktop and mobile

3. Add a working contact form with Cloudflare Turnstile
   for spam protection. Collect name, email, and message.
   Show a thank-you page. Style it to match the site.

4. Create a CLAUDE.md file in the project root with my
   brand colors, voice guidelines, and site rules so any
   future Claude Code session keeps everything consistent.

5. Create a design-tokens.md file that defines my exact
   colors, fonts, and spacing so the design stays locked in.

PHASE 3 — SET UP HOSTING (use Chrome browser)
6. Initialize a git repository and create a GitHub repo
   called my-website. Push all the code.

7. Now use the Chrome browser to handle Cloudflare setup:
   - Go to the Cloudflare dashboard
   - If I want a custom domain: help me search for and buy
     one directly through Cloudflare Registrar (they sell
     domains at cost, no markup). If I'm not ready for a
     domain, set up a free .pages.dev subdomain instead.
   - Set up a Cloudflare Pages project connected to my
     GitHub repo so it auto-deploys when I push changes
   - Go to Turnstile in the Cloudflare dashboard, create
     a widget for my site, and grab the site key and
     secret key. Update my project's environment variables
     with these keys.
   - Configure DNS if I'm using a custom domain
   - Deploy the site and verify it's live

PHASE 4 — QUALITY CHECK
8. Run a Google Lighthouse audit on the live site. Fix
   anything scoring below 90 in performance, accessibility,
   best practices, or SEO.
9. Test the contact form to make sure submissions work.
10. Do a final visual review on mobile and desktop.

That is the entire prompt. Let me walk you through what each phase does and why it matters.

Phase 1: Competitor Research

This is the part that makes this approach different from any website builder out there. Before Claude writes a single line of code, it visits your competitors’ sites and studies what they are doing: how they position themselves, what they lead with, what trust signals they use, and where they are being generic or vague.

It also searches the web for the best sites in your niche, not just the competitors you listed. The result is a competitive analysis that tells you exactly where the gaps are, so your site fills them.

You get to review this analysis before Claude starts building. If something is off, you course-correct now instead of after the site is built.

Phase 2: Building the Site

Claude starts from Astroplate, a professional open-source theme with over 1,300 stars on GitHub (a measure of community trust). Three other good options if you want to explore:

• Bigspring. Clean and professional, built for service businesses and startups.
• Looka. Designed specifically for consulting firms, agencies, and professional services. Close to what I used for my own sites.
• Sendit. Polished marketing template with an optional visual editor.

From there, Claude customizes everything based on the competitive research it just did: colors, headlines, services, about section, and any other sections your competitors have that you should too. The copy is written to be specific and confident, not the generic “we provide innovative solutions” language that plagues most small business sites.

Two important files get created during this phase:

• CLAUDE.md is an instructions file that Claude Code reads every time you start a new session. Your brand colors, voice guidelines, and site rules live here. This means you never have to repeat yourself when making future updates.
• design-tokens.md locks in your exact colors, fonts, and spacing. This is how professional design systems work; you are just getting it for free.

Phase 3: Hosting Setup via Chrome

This is where the Chrome browser extension earns its keep. Instead of you clicking through Cloudflare’s dashboard, copying API keys, and figuring out DNS settings, Claude does it for you. It navigates to the Cloudflare dashboard, creates the resources, grabs the keys, and configures everything while you watch.

If you want a custom domain, Claude can help you buy one directly through Cloudflare Registrar. Here is something most people do not know: Cloudflare sells domains at cost. No markup, no inflated renewal prices. A .com domain that costs $10.11 per year at Cloudflare might run $15 to $20 per year at GoDaddy, and GoDaddy’s renewal price is almost always higher than the first year price. Cloudflare charges you the same price every year.

If you are not ready for a domain, Cloudflare gives you a free subdomain like my-website.pages.dev that works perfectly while you are getting started. You can add a custom domain later without rebuilding anything.

Turnstile is Cloudflare’s free spam protection for forms. Unlike those annoying “click all the traffic lights” puzzles, it runs invisibly in the background for most legitimate visitors. Claude sets this up for you too, including grabbing the API keys and wiring them into your project.

Phase 4: Quality Check

After the site is live, Claude runs a Google Lighthouse audit (the same tool Google uses to rate websites) and fixes anything scoring below 90. It tests the contact form to make sure submissions actually arrive, and does a final visual review on mobile and desktop.

What This Costs

For context: a basic Squarespace or Wix plan runs $16 to $45 per month ($192 to $540 per year). A custom agency-built site can run $5,000 to $20,000 upfront. You are building something equivalent to the agency site, at a fraction of the cost, on a stack you actually own. And none of those other options research your competitors before building your site.

Pro Tips

• Review the competitive analysis carefully. Claude will pause after Phase 1 to show you what it found. This is your chance to steer the messaging before the site gets built. If you have a positioning angle Claude missed, say so now.
• The verification prompt. After any big change in the future, tell Claude: “Are you sure? Double check everything and make sure nothing is broken.” This one habit catches most issues before they go live and costs you nothing but ten seconds.
• Iterate after launch. Your first version does not have to be perfect. Once the site is live, you can open Claude Code anytime and say “update the hero headline to say X” or “add a testimonials section.” Because CLAUDE.md and design-tokens.md exist, Claude will keep everything consistent automatically.

This Is the Same Workflow I Use

I built mrsunshine.me and solanasis.com (my business site) using exactly these tools: Claude Code, Astro, and Cloudflare Pages. Both sites score 90+ on Google’s performance tests. Both cost me $0 per month to host. And both were built over a single weekend, not months.

The tools are free. The knowledge is now in your hands. If you want help with the strategy side (what to say, how to position yourself, how to make it all work together); that is what I do as a fractional CIO (a part-time, embedded technology executive who helps organizations make smart decisions about their technology).

Connect with me on LinkedIn, or book a conversation if you want to walk through what your site should actually say and how to make it work for your business.