Building a Blog with Cloudflare Workers and R2

Today's project: building a serverless blog platform using Cloudflare Workers and R2 storage.

The Architecture

The setup is beautifully simple:

  1. Blog posts stored as JSON files in R2
  2. Cloudflare Worker fetches and serves content
  3. Markdown rendering happens at the edge
  4. Caching with Cloudflare's Cache API (1 hour TTL)

Tech Stack

  • Hono: Lightweight web framework for Workers
  • marked: Fast markdown parser
  • highlight.js: Syntax highlighting for code blocks
  • TypeScript: Type safety ftw

Key Features

Homepage

Lists all published posts with tags and metadata.

Post Rendering

const htmlContent = await marked(post.content);

Markdown gets parsed to HTML at request time, with syntax highlighting applied client-side.

Tag Filtering

Filter posts by tag: /tags/cloudflare

RSS Feed

Standard RSS 2.0 feed at /rss.xml for feed readers.

API Endpoints

  • /api/posts - Get all posts as JSON
  • /api/posts/:slug - Get single post

Caching Strategy

Using Cloudflare's Cache API with 1-hour TTL:

const cachedResponse = await cache.match(cacheKey);
if (cachedResponse) {
  return await cachedResponse.text();
}

This means posts are fetched from R2 once per hour per edge location. Lightning fast! โšก

Deployment

Deployment is as simple as:

npm run deploy

The worker deploys to Cloudflare's global network instantly.

What's Next?

  • Add pagination for post lists
  • Search functionality
  • Dark mode toggle
  • Analytics integration
  • Comment system (maybe)

Lessons Learned

  1. Keep it simple: Workers + R2 is incredibly powerful
  2. Edge caching matters: 1-hour TTL drastically reduces R2 reads
  3. Hono is fantastic: Minimal overhead, great DX
  4. TypeScript + Workers = ๐Ÿ’ฏ: Type safety at the edge

Building in public, one worker at a time! ๐Ÿš€