Building a blog that consistently serves content in under 5ms requires more than just fast hosting—it demands edge-native architecture. This tutorial walks through creating a high-performance blog using Cloudflare Workers and D1 database, leveraging the global edge network for sub-5ms response times.

Architecture Overview

Traditional blogs suffer from database round-trips and server overhead. Our approach eliminates these bottlenecks:

  • Cloudflare Workers handle requests at 300+ global edge locations
  • D1 database provides SQLite-compatible storage with automatic replication
  • Edge-side rendering eliminates origin server dependencies
  • Built-in CDN caching reduces database queries

This architecture typically achieves 2-4ms response times globally, with sub-millisecond performance in major metropolitan areas.

Prerequisites and Setup

You'll need a Cloudflare account with Workers enabled and Wrangler CLI installed:

npm install -g wrangler
wrangler login

Create a new Workers project:

wrangler init cloudflare-workers-blog
cd cloudflare-workers-blog

Creating the D1 Database Schema

D1 provides SQLite compatibility with global edge replication. Create your database:

wrangler d1 create blog-db

Add the database binding to your wrangler.toml:

[[d1_databases]]
binding = "DB"
database_name = "blog-db"
database_id = "your-database-id"

Create the schema file schema.sql:

CREATE TABLE posts (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  slug TEXT UNIQUE NOT NULL,
  title TEXT NOT NULL,
  content TEXT NOT NULL,
  excerpt TEXT,
  published_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE INDEX idx_posts_slug ON posts(slug);
CREATE INDEX idx_posts_published ON posts(published_at DESC);

INSERT INTO posts (slug, title, content, excerpt) VALUES 
('getting-started', 'Getting Started with Edge Computing', 
 'Edge computing brings computation closer to data sources...', 
 'Learn the fundamentals of edge computing and distributed systems.');

Apply the schema:

wrangler d1 execute blog-db --file=schema.sql

Building the Worker Request Handler

Create the main worker in src/index.js:

export default {
  async fetch(request, env) {
    const url = new URL(request.url);
    const path = url.pathname;
    
    // Handle different routes
    if (path === '/' || path === '/posts') {
      return handlePostsList(env.DB, request);
    }
    
    if (path.startsWith('/posts/')) {
      const slug = path.split('/posts/')[1];
      return handleSinglePost(env.DB, slug, request);
    }
    
    return new Response('Not Found', { status: 404 });
  }
};

The routing logic prioritizes performance by avoiding complex pattern matching in favor of simple string operations.

Implementing Database Queries

D1's prepared statements provide both security and performance benefits:

async function handlePostsList(db, request) {
  const cacheKey = 'posts-list';
  
  // Check cache first
  const cached = await caches.default.match(cacheKey);
  if (cached) {
    return cached;
  }
  
  const { results } = await db.prepare(`
    SELECT id, slug, title, excerpt, published_at 
    FROM posts 
    ORDER BY published_at DESC 
    LIMIT 20
  `).all();
  
  const html = generatePostsListHTML(results);
  const response = new Response(html, {
    headers: {
      'Content-Type': 'text/html;charset=UTF-8',
      'Cache-Control': 'public, max-age=300'
    }
  });
  
  // Cache the response
  await caches.default.put(cacheKey, response.clone());
  return response;
}

async function handleSinglePost(db, slug, request) {
  const cacheKey = `post-${slug}`;
  
  const cached = await caches.default.match(cacheKey);
  if (cached) {
    return cached;
  }
  
  const post = await db.prepare(`
    SELECT * FROM posts WHERE slug = ?
  `).bind(slug).first();
  
  if (!post) {
    return new Response('Post not found', { status: 404 });
  }
  
  const html = generatePostHTML(post);
  const response = new Response(html, {
    headers: {
      'Content-Type': 'text/html;charset=UTF-8',
      'Cache-Control': 'public, max-age=1800'
    }
  });
  
  await caches.default.put(cacheKey, response.clone());
  return response;
}

Optimizing HTML Generation

Template rendering at the edge requires efficient string operations. Avoid complex templating engines:

function generatePostHTML(post) {
  return `


  
  
  ${escapeHtml(post.title)}
  


  
  

    
${escapeHtml(post.title)}

    
Published: ${formatDate(post.published_at)}

    
${post.content}

  


`;
}

function generatePostsListHTML(posts) {
  const postsList = posts.map(post => `
    
  `).join('');
  
  return `


  
  
  Edge Blog
  


  
Edge Blog

  ${postsList}

`;
}

function escapeHtml(text) {
  const div = new DOMParser().parseFromString(text, 'text/html').documentElement;
  return div.textContent || div.innerText || '';
}

function formatDate(dateString) {
  return new Date(dateString).toLocaleDateString('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
}

Performance Optimization Strategies

Several techniques ensure sub-5ms performance:

Edge Caching

Implement aggressive caching with smart invalidation:

// Cache static content for 1 hour
const STATIC_CACHE_TTL = 3600;
// Cache post lists for 5 minutes
const LIST_CACHE_TTL = 300;
// Cache individual posts for 30 minutes
const POST_CACHE_TTL = 1800;

Database Connection Pooling

D1 handles connection pooling automatically, but optimize query patterns:

// Use prepared statements for repeated queries
const postQuery = db.prepare('SELECT * FROM posts WHERE slug = ?');
const post = await postQuery.bind(slug).first();

Minimize JavaScript Execution

Keep worker logic lean. Avoid heavy computations:

// Good: Simple string operations
const slug = path.split('/posts/')[1];

// Avoid: Complex regex patterns
// const match = path.match(/^\/posts\/([^/]+)$/);

Adding Content Management

Create an admin endpoint for content management:

async function handleAdmin(request, env) {
  if (request.method === 'POST') {
    const formData = await request.formData();
    const title = formData.get('title');
    const slug = formData.get('slug');
    const content = formData.get('content');
    const excerpt = formData.get('excerpt');
    
    await env.DB.prepare(`
      INSERT INTO posts (title, slug, content, excerpt) 
      VALUES (?, ?, ?, ?)
    `).bind(title, slug, content, excerpt).run();
    
    // Invalidate cache
    await caches.default.delete('posts-list');
    await caches.default.delete(`post-${slug}`);
    
    return Response.redirect('/admin', 302);
  }
  
  return new Response(generateAdminHTML(), {
    headers: { 'Content-Type': 'text/html' }
  });
}

Deployment and Testing

Deploy your Cloudflare Workers blog:

wrangler deploy

Test performance using curl with timing:

curl -w "@curl-format.txt" -s -o /dev/null https://your-blog.workers.dev/

Create curl-format.txt:

     time_namelookup:  %{time_namelookup}\n
        time_connect:  %{time_connect}\n
     time_appconnect:  %{time_appconnect}\n
    time_pretransfer:  %{time_pretransfer}\n
       time_redirect:  %{time_redirect}\n
  time_starttransfer:  %{time_starttransfer}\n
                     ----------\n
          time_total:  %{time_total}\n

Monitoring and Analytics

Implement performance monitoring:

export default {
  async fetch(request, env, ctx) {
    const start = Date.now();
    
    try {
      const response = await handleRequest(request, env);
      
      // Log performance metrics
      const duration = Date.now() - start;
      console.log(`Request processed in ${duration}ms`);
      
      return response;
    } catch (error) {
      console.error('Request failed:', error);
      return new Response('Internal Server Error', { status: 500 });
    }
  }
};

This Cloudflare Workers blog architecture consistently delivers sub-5ms response times by eliminating traditional bottlenecks. The combination of edge computing, intelligent caching, and optimized database queries creates a foundation for high-performance content delivery that scales globally without infrastructure complexity.