Skip to content

README.md

Latest commit

 

History

History
435 lines (327 loc) · 11.5 KB

README.md

File metadata and controls

435 lines (327 loc) · 11.5 KB

Hosting Tools Guide

A comprehensive guide to modern, cost-effective hosting solutions for web developers, with a focus on Cloudflare's edge platform ecosystem.

Overview

This section covers powerful hosting tools that enable you to build and deploy production-ready applications with minimal costs and maximum performance. Whether you're building a simple static site, a complex SaaS application, or anything in between, these tools provide the infrastructure you need.

Why Cloudflare's Edge Platform?

Cloudflare's ecosystem offers a unique combination of benefits:

  • Cost-Effective: Generous free tiers and affordable scaling → Business Model
  • Global Performance: 300+ edge locations worldwide → Performance Standards
  • Integrated Stack: All services work seamlessly together
  • Developer Experience: Simple deployment, excellent tooling → Deployment Guide
  • Production-Ready: Enterprise-grade reliability and security
  • No Infrastructure Management: Fully serverless

The Complete Stack

Static Site Hosting

Cloudflare Pages - Deploy static sites and JAMstack applications

  • Zero-cost hosting for static sites
  • No bandwidth limits on free tier
  • Perfect for Astro, Next.js, React, Vue
  • Integrates with Keystatic CMS via GitHub
  • Ideal for business websites and portfolios

Best for: Marketing sites, documentation, blogs, portfolios

Serverless Computing

Cloudflare Workers - Run code at the edge globally

  • Host complete web applications with backend logic
  • 100,000 requests/day free
  • Connect to databases and external APIs
  • Perfect for SaaS applications
  • Ultra-low latency worldwide

Best for: APIs, SaaS backends, full-stack applications

File Storage

R2 Storage - S3-compatible object storage with zero egress fees

  • Store images, videos, documents, backups
  • 10 GB free storage
  • No bandwidth/egress charges (unlike AWS S3)
  • S3-compatible API
  • Fast global delivery

Best for: User uploads, media libraries, static assets, backups

Relational Database

D1 Database - Serverless SQLite database at the edge

  • Full SQL support with SQLite
  • 5 GB storage free
  • Native integration with Workers/Pages
  • Super cheap and scalable
  • Perfect for micro-SaaS applications

Best for: Application data, user management, analytics

Key-Value Storage

KV (Key-Value Store) - Global low-latency key-value storage

  • Sub-millisecond read performance
  • 100,000 reads/day free
  • Perfect for caching and sessions
  • Global replication included
  • Simple key-value interface

Best for: Sessions, caching, feature flags, rate limiting

Recommended Combinations

Static Website with CMS

Pages + Keystatic CMS + GitHub
  • Cost: $0/month
  • Use case: Business websites, blogs, documentation
  • Setup time: 15 minutes

Micro-SaaS Application

Workers + D1 + KV + R2
  • Cost: $0-10/month (for most apps)
  • Use case: URL shortener, API service, web app
  • Setup time: 1 hour

Full-Stack Application

Pages (frontend) + Workers (API) + D1 (database) + R2 (storage) + KV (cache)
  • Cost: $5-20/month (for growing apps)
  • Use case: E-commerce, SaaS platform, social app
  • Setup time: Few hours to days

High-Traffic Content Platform

Pages + R2 + KV (caching) + D1 (metadata)
  • Cost: $10-30/month (even with high traffic)
  • Use case: Media platform, content delivery
  • Setup time: Few hours

Cost Comparison

Traditional Hosting vs. Cloudflare Stack

→ See also: Business Model & Pricing Strategies

Example: Web application with 10,000 users

Service Traditional Cloudflare Savings
Hosting $50-100 $5 90%+
Database $50-200 $5-10 90%+
Storage $20-50 $1-2 95%+
CDN $50-100 $0 100%
Total $170-450 $11-17 ~95%

Real-World Savings

Static Site:

  • Traditional: $10-50/month (Netlify, Vercel paid plans)
  • Cloudflare Pages: $0/month
  • Savings: 100%

SaaS Application:

  • Traditional: $200-500/month (AWS/GCP with RDS, S3, CloudFront)
  • Cloudflare Stack: $10-30/month
  • Savings: 90-95%

Content Delivery:

  • AWS S3 + CloudFront: $100+ (with egress fees)
  • R2 + Pages: $1-5
  • Savings: 95%+

Getting Started

Prerequisites

  1. Cloudflare Account (free)

  2. Wrangler CLI (Cloudflare's developer tool)

    npm install -g wrangler
wrangler login

  3. Git & GitHub (for Pages deployments)

    • GitHub account for automatic deployments

Quick Start: Deploy Your First Project

Static Site (Pages)

# Create Astro site
npm create astro@latest my-site
cd my-site

# Push to GitHub
git init && git add . && git commit -m "init"
git push

# Deploy via Cloudflare Dashboard
# Pages > Create Project > Connect Git

Worker API

# Create Worker
npm create cloudflare@latest my-api
cd my-api

# Deploy
npm run deploy

Full Stack App

# Create Pages project with Functions
npm create cloudflare@latest my-app -- --framework=astro
cd my-app

# Add D1 database
wrangler d1 create my-db

# Add to wrangler.toml, then deploy
git push

Learning Path

Beginner

  1. Start with Pages - Deploy a static site
  2. Add KV - Implement simple caching
  3. Learn D1 - Add a database

Intermediate

  1. Build with Workers - Create an API
  2. Use R2 - Handle file uploads
  3. Combine services - Build a small app

Advanced

  1. Optimize performance with caching strategies
  2. Implement authentication and authorization
  3. Scale to production with monitoring
  4. Build a complete SaaS application

When to Use Each Service

Use Pages When:

  • Building static sites or JAMstack apps
  • Need free hosting with unlimited bandwidth
  • Want automatic deployments from Git
  • Deploying React, Vue, Astro, Next.js (static)

Use Workers When:

  • Building APIs or backend services
  • Need serverless functions at the edge
  • Want ultra-low latency globally
  • Building full-stack applications

Use R2 When:

  • Storing user uploads (images, videos, documents)
  • Need S3-compatible storage
  • Want to avoid egress fees
  • Building media-heavy applications

Use D1 When:

  • Need relational database (SQL)
  • Building data-driven applications
  • Want cheap, scalable database
  • Need ACID transactions

Use KV When:

  • Implementing caching layers
  • Storing sessions or auth tokens
  • Need feature flags or configuration
  • Building rate limiters
  • Want sub-millisecond read performance

Best Practices

Architecture

  • Use Pages for frontend, Workers for API layer
  • Store hot data in KV, cold data in D1
  • Use R2 for all file storage needs
  • Implement caching at every layer

Performance

  • Cache aggressively with KV
  • Use edge computing with Workers
  • Optimize images before uploading to R2
  • Index databases properly in D1

Cost Optimization

  • Stay within free tiers when possible
  • Use KV to reduce D1 queries
  • Implement pagination for large datasets
  • Monitor usage in Cloudflare Dashboard

Security

  • Store secrets in environment variables
  • Use KV for API key validation
  • Implement rate limiting with KV
  • Sanitize all user inputs
  • Use CORS policies appropriately

Development Workflow

  • Use wrangler dev --local for local development
  • Test with preview deployments
  • Use separate databases for dev/prod
  • Version control everything
  • Automate deployments with Git

Common Patterns

Authentication Flow

// Login: Create session in KV
// Validate: Check session from KV
// Store user data: D1 database
// Store profile pictures: R2 storage

Content Management

// Content editing: Keystatic CMS
// Storage: GitHub repository
// Deployment: Automatic via Pages
// Media files: R2 storage

API with Caching

// Request → Worker
// Check KV cache → Return if found
// Query D1 → Store in KV → Return

File Upload Flow

// Frontend: Upload form
// Worker: Validate file
// R2: Store file
// D1: Store metadata
// Return: File URL

Troubleshooting

Pages Not Building

  • Check build command in settings
  • Verify output directory
  • Check Node.js version compatibility
  • Review build logs for errors

Worker Not Responding

  • Check wrangler.toml configuration
  • Verify bindings (D1, KV, R2) are correct
  • Use wrangler tail for logs
  • Test locally with wrangler dev

Database Connection Issues

  • Confirm database ID in wrangler.toml
  • Check binding name matches code
  • Verify database exists: wrangler d1 list
  • Run migrations: wrangler d1 execute

Storage/Upload Failures

  • Check R2 bucket name and binding
  • Verify CORS configuration
  • Check file size limits
  • Review upload permissions

Resources

Official Documentation

Community

Tools

Next Steps

  1. Choose your path: Static site, API, or full-stack app
  2. Read the relevant guide: Click on any service above
  3. Follow the setup: Each guide has step-by-step instructions
  4. Build something: Start small, iterate quickly
  5. Scale up: Add more services as needed

Why This Stack is Perfect for Vibecoding

The Cloudflare edge platform aligns perfectly with the vibecoding philosophy:

  • Start fast: Deploy in minutes, not hours
  • Stay cheap: Free tiers are incredibly generous
  • Scale naturally: No infrastructure to manage
  • Focus on code: Not on DevOps
  • Build anywhere: Global from day one
  • Ship confidently: Production-ready infrastructure

Whether you're building a side project, client website, or the next big SaaS, these tools provide everything you need at a fraction of the cost of traditional hosting.

Related Documentation

Deployment & Workflow:

Quality & Performance:

Business & Pricing:

Troubleshooting:

Ready to build? Pick a service and dive in!