How I Deployed 22 Web Pages to Vercel in One Night for $0

#javascript #webdev #tutorial #beginners

Last night I built and deployed a 22-page website with AI tools, SEO content, service pages, and a product catalog. Total hosting cost: $0. Here's the exact setup.

The Stack

Frontend: Plain HTML, CSS, vanilla JS. No React, no Next.js, no build step.
AI: Claude API called directly from the browser via fetch()
Hosting: Vercel (free Hobby tier)
Version control: GitHub (free)
Payments: Gumroad for digital products, email for services

Why No Framework

I wanted each page to load instantly. No bundle, no hydration, no client-side routing. Every page is a standalone HTML file. This means:

Each page loads in under 1 second
Google can crawl and index every page immediately
No build step = push to GitHub and it's live in 10 seconds
Zero JavaScript dependencies to manage

The Claude API Integration

Every AI tool calls the Claude API directly from the browser:

const response = await fetch('https://api.anthropic.com/v1/messages', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    model: 'claude-sonnet-4-6',
    max_tokens: 1000,
    messages: [{ role: 'user', content: prompt }]
  })
});
const data = await response.json();
const text = data.content?.map(i => i.text).join('\n');

No backend. No server. No API keys exposed (Claude handles auth through their CORS policy for approved domains on Vercel).

The Deployment Pipeline

Write HTML file locally
git add . && git commit -m "new page" && git push
Vercel auto-deploys from GitHub in ~10 seconds
Page is live on the internet

That's it. No CI/CD config, no Dockerfile, no environment variables.

What's on the Site

Free AI Tools (9)

SEO Content Pages (5) - targeting long-tail keywords
Service Pages (4) - for consulting and enterprise work
Landing page, sitemap, about page

Revenue Model

Free tools drive traffic
Paid Excel templates on Gumroad ($9-$49)
High-ticket consulting services ($500-$35,000)
Upcoming: $29/month subscription for power users

Results So Far

Just launched, so no revenue yet. But the site is indexed, the tools work, and people are starting to find it. The dev.to post you're reading right now is part of the distribution strategy.

The lesson: you don't need a fancy stack to ship fast. HTML + an API + free hosting = a real business.

Full site | GitHub repo

DEV Community