How I Built This Website for Under $3: AI-Powered Development with Claude Code

Building a professional website in 2026 doesn’t require thousands of dollars or months of development. I built this entire site—portfolio, blog, services pages, and all—for under $3 using AI-powered tools and free hosting. Here’s exactly how I did it, with the exact prompts you can use to replicate everything.

The Stack: What I Used

Tool	Purpose	Cost
Claude Code CLI	AI-powered coding assistant	$0 (using Alibaba Cloud plan)
GitHub	Version control & hosting	$0 (Free tier)
Cloudflare Pages	Hosting & CDN	$0 (Free tier)
Alibaba Cloud Coding Plan	AI credits for Claude	~$2.50
Astro	Static site generator	$0 (Open source)
Tailwind CSS	Styling	$0 (Open source)

Total: Under $3 (one-time, for AI credits)

Why This Stack?

I evaluated several options before settling on this combination:

Alternatives I Considered

Traditional approach:

• WordPress + hosting: $15-30/month
• Custom development: $2000-5000 upfront
• Time investment: 40-80 hours

No-code builders:

• Webflow: $14-25/month
• Squarespace: $16-23/month
• Wix: $16-45/month

My approach:

• One-time ~$2.50 for AI credits
• Free hosting forever
• Full ownership and control
• Time investment: ~4 hours (mostly review and content)

Step-by-Step: Building the Website

Step 1: Setting Up Claude Code CLI

First, install the Claude Code CLI and connect it to your Alibaba Cloud account:

# Install Claude Code CLI
npm install -g @anthropic/claude-code

# Create and enter project directory
mkdir my-website
cd my-website

# Initialize Claude Code in the project
claude-code init

The Alibaba Cloud coding plan provides credits that work with Claude Code. For about $2.50, you get enough credits to generate an entire portfolio website.

Step 2: The Master Prompt

The key to success is a detailed prompt that describes exactly what you want. Here’s the prompt I used to initialize the project:

Create a professional portfolio and blog website for a Data Engineer
specializing in AI/ML and Robotics. The website should include:

## Requirements

### Tech Stack
- Astro v5.x (static site generator)
- Tailwind CSS for styling
- Markdown/MDX for blog content
- GitHub for version control
- Cloudflare Pages for hosting

### Pages Required
1. Home - Hero section, about preview, recent blog posts, stats counter
2. About - Bio, skills, experience timeline, education
3. Services - Offered services with pricing
4. Blog - Index with search, pagination, tags
5. Blog Post - Individual post layout with related posts
6. Contact - Contact form and social links

### Design Requirements
- Color scheme: Warm neutrals (#faf9f7 background, #2d2a26 text)
- Accent color: Orange (#c25e00)
- Typography: Inter (body), Playfair Display (headings)
- Dark mode support
- Mobile responsive
- Fast loading (Critical CSS inlined)
- Accessibility compliant (WCAG 2.1)

### Features
- Search functionality for blog posts
- Tag-based filtering
- Related posts suggestions
- Reading time estimates
- Social sharing
- SEO optimized (meta tags, Open Graph, structured data)
- Sitemap generation
- RSS feed

### Content Structure
- 20+ blog posts about data engineering, AI/ML, robotics
- Services: Data Engineering, AI/ML Solutions, Web Development
- Experience timeline with real companies
- Education: Masters in Robotics, Bachelors in CS

### Performance Targets
- Lighthouse score: 90+
- First Contentful Paint: <1.5s
- Time to Interactive: <3s
- Core Web Vitals: All green

Start by creating the project structure and package.json with all
necessary dependencies.

Step 3: Content Generation Prompts

For blog posts, use prompts like this:

Write a comprehensive blog post about "Building Scalable Data Pipelines
with Apache Spark" that includes:

- SEO-optimized title and description
- Introduction explaining why Spark matters
- Pipeline architecture diagram (ASCII or description)
- Code examples for Spark Streaming
- Best practices for production
- Performance optimization tips
- Real-world examples from experience

Make it 2000+ words, informative, and actionable. Include proper
heading hierarchy (H1, H2, H3) and code blocks.

Use this pattern for all blog posts, changing the topic each time.

Step 4: GitHub Setup

# Initialize git repository
git init
git add .
git commit -m "Initial commit: Portfolio website"

# Create GitHub repository
gh repo create my-website --public
git remote add origin https://github.com/yourusername/my-website.git
git push -u origin main

Step 5: Cloudflare Pages Deployment

1. Go to Cloudflare Dashboard

2. Navigate to Pages > Create a project

3. Connect your GitHub repository

4. Configure build settings:

   • Framework preset: Astro
   • Build command: npm run build
   • Build output directory: dist
   • Environment variables: None needed

5. Click “Save and Deploy”

Cloudflare automatically builds and deploys on every push to main.

Step 6: Custom Domain Setup (Optional)

1. In Cloudflare Pages, go to Settings > Custom domains
2. Add your domain (e.g., yourname.com)
3. Update DNS records at your domain registrar:

   Type: CNAME
   Name: @
   Content: your-project.pages.dev
   TTL: Auto

4. Cloudflare provisions SSL automatically

Complete Prompts Reference

Here are all the prompts organized by task:

Project Initialization

Create a professional portfolio and blog website for a Data Engineer
specializing in AI/ML and Robotics using Astro v5, Tailwind CSS, and
Markdown. Include: home, about, services, blog index, blog post template,
tag pages, and contact pages. Design with warm neutrals (#faf9f7 bg,
#2d2a26 text, #c25e00 accent), dark mode support, mobile responsive,
and accessibility compliant. Start with project structure and package.json.

Layout Components

Create BaseLayout.astro with:
- HTML head with SEO meta tags, Open Graph, Twitter Cards
- JSON-LD structured data for articles
- Google Fonts (Inter, Playfair Display, JetBrains Mono)
- Critical CSS inlined, full CSS loaded asynchronously
- Skip link for accessibility
- Dark mode toggle with localStorage persistence
- Theme color meta tags

Navigation

Create Header.astro with:
- Logo (initials in rounded square)
- Navigation links: About, Services, Blog, Contact
- Active state highlighting
- Dark mode toggle button
- Mobile hamburger menu with accessibility attributes
- Sticky header with backdrop blur

Performance Optimization

Optimize the website for Core Web Vitals:
- Inline critical CSS using astro-critters
- Load fonts asynchronously with media="print" pattern
- Add preconnect hints for Google Fonts
- Optimize LCP with proper image loading
- Add font-display: swap to all font faces
- Minimize CLS with explicit dimensions
- Enable CSS code splitting in Vite config

Cost Breakdown

Here’s exactly where the money goes:

Item	Cost	Notes
Alibaba Cloud Coding Plan	~$2.50	Enough for full website generation
Domain name	$0	Free .pages.dev domain (or ~$12/year for custom)
GitHub	$0	Free tier includes unlimited repos
Cloudflare Pages	$0	Free tier: 100k requests/day
Claude Code CLI	$0	Free with AI credits

Total one-time: Under $3 Ongoing: $0/month

What You Get

The final website includes:

• 100+ pages generated (blog posts, tag pages, pagination)
• 20+ comprehensive blog posts (1500-4000 words each)
• 4 main pages (Home, About, Services, Contact)
• Dark mode with system preference detection
• Search functionality across all blog posts
• Tag filtering and related posts
• SEO optimized with structured data
• Performance: 90+ Lighthouse scores
• Custom domain with automatic SSL

Time Investment

Task	Time
Initial setup	30 min
Prompt engineering	30 min
Review and refinement	2 hours
Content customization	1 hour
Deployment setup	30 min
Total	~4 hours

Compare this to traditional development (40-80 hours) or hiring a developer ($2000-5000), and the value becomes clear.

Replicating This Project

If you want to build a similar website, here’s the fastest path:

1. Copy the Master Prompt

Use the prompt from Step 2 as your starting point. Modify:

• Your profession/industry
• Your services
• Your color scheme preferences
• Your specific content needs

2. Set Up Your Environment

# Install Node.js (if not already installed)
# https://nodejs.org/

# Install Claude Code CLI
npm install -g @anthropic/claude-code

# Create project directory
mkdir my-website
cd my-website

# Initialize with Claude Code
claude-code init

3. Use Iterative Prompts

Don’t try to generate everything in one prompt. Break it down:

1. Project structure
2. Layout components
3. Individual pages
4. Content generation
5. Optimization

4. Review and Refine

AI-generated code needs review:

• Check for accessibility issues
• Test on mobile devices
• Verify all links work
• Review content accuracy

5. Deploy

# Push to GitHub
git init
git add .
git commit -m "Initial commit"
gh repo create my-website --public
git push -u origin main

# Deploy to Cloudflare Pages
# Via dashboard: Pages > Create project > Connect GitHub

What Works Well

• Claude Code CLI: Excellent for boilerplate and complex patterns
• Astro: Perfect for content-focused sites
• Cloudflare Pages: Zero-config deployment
• Iterative prompts: Better than trying to do everything at once

The Bottom Line

You don’t need:

• Thousands of dollars for development
• Months of coding time
• A team of developers

You do need:

• Clear prompts describing what you want
• Time to review and refine
• Basic understanding of web technologies

With under $3 and 4 hours, you can have a professional website that rivals anything built traditionally.

---

Want to see the final result? You’re looking at it. This website was built using the exact process described above.

Questions about the build process? Reach out through the contact page or connect on LinkedIn.