🚀How to Build a Free, Unlimited Image Hosting Service with Cloudflare in 30 Minutes

By | July 18, 2025
0 Comment

In today’s content-driven era, having a reliable and efficient image hosting service is essential for bloggers, developers, and creators. Cloudflare, often dubbed the “Cyber Buddha,” offers a generous 10GB free storage with no egress traffic fees through its R2 Object Storage service. When paired with Cloudflare Pages for static hosting, this creates a truly zero-cost image hosting solution.

This guide walks you through the complete setup of an open-source project — CloudFlare-ImgBed — using Cloudflare’s latest services in 2025.

🔍 Key Advantages of CloudFlare-ImgBed

CloudFlare-ImgBed GitHub Repository is a ready-to-deploy solution for personal image hosting. Here’s a breakdown of its architecture:

Component Technology Free Quota (Cloudflare)
Frontend Vue.js Responsive UI –
Backend API Cloudflare Workers (Serverless) 100,000 requests per day
Storage R2 Object Storage (S3 Compatible) 10GB storage + 1M writes/month
Database Cloudflare KV Store 10 million reads/month
Hosting Cloudflare Pages Unlimited bandwidth + Custom domain

📌 Highlight Features

  • Drag & Drop web uploads + API access
  • Non-destructive image compression
  • One-click link formats (Markdown, BBCode, HTML)
  • Password protection & guest upload control
  • Multi-level directory management

⚙️ Prerequisites

  1. Basic Accounts
  • A GitHub account to fork the repository (Sign Up)
  • A Cloudflare account (Sign Up)
  1. Domain Requirement
  • A custom domain with DNS managed by Cloudflare
  • Optionally, set up a subdomain like img.yourdomain.com
  1. Payment Verification
  • A Visa/MasterCard or PayPal account (only for R2 activation; no charges within 10GB limit)

🚀 Step-by-Step Deployment Guide (2025 UI)

Step 1: Create an R2 Bucket

  1. Go to Cloudflare Dashboard → R2 Object Storage → Create Bucket
  2. Configure:
  • Name: imgbed (or your choice)
  • Region: Choose based on your location
  • Storage Class: Standard (covered under the free tier)
  1. Enable Public Access:
  • Bucket Settings → Public Access URL → Enable

Step 2: Deploy Cloudflare Pages

  1. Fork the Project
  1. Create a Pages Project
  • Cloudflare Dashboard → Workers & Pages → Create Application → Pages
  • Connect your GitHub → Select your forked repository
  1. Build Settings
Setting Value Notes
Project Name cloudflare-imgbed or custom Project identifier
Production Branch main Deploy from this branch
Build Command npm install Ensure you use this for v2.0
Output Directory / Leave as default

Deploy the project — usually completes in 1-2 minutes.

  1. Bind a Custom Domain
  • Navigate to your Pages project → Custom Domains
  • Add your domain (e.g., img.yourdomain.com)

Note: Binding a custom domain is recommended, especially for users in regions where *.pages.dev domains might be inaccessible.

Step 3: Configure KV and R2 Bindings

  1. Create KV Database
  • Cloudflare Dashboard → Storage → KV → Create Instance
  • Name it img_url (must match)
  1. Bind KV and R2 to Pages
  • Pages → Settings → Environment Variables and Bindings
    • Variable: img_url → Select your KV store
    • Variable: img_r2 → Select your R2 bucket
  • Save and Redeploy the project
  1. Set Access Credentials
  • Go to Pages → Settings → Variables and Secrets
    • AUTH_CODE: A custom password for uploads
    • BASIC_USER: Admin username
    • BASIC_PASS: Admin password

Once done, visit your custom domain to access the image host.

Don’t forget to configure backend settings via the web UI under System Settings → Security Settings.

Example Settings:

  • Upload Path: CloudflareR2 public link: https://yourdomain.com
  • Default URL Prefix: https://img.yourdomain.com/

🔐 Security Enhancements

  1. Anti-Leeching
  • Cloudflare Dashboard → Security → WAF → Custom Rules
  • Example Rule:
Field: Hostname → equals → img.yourdomain.com
AND Referrer → not equals → www.yourblog.com
Action: Block
  1. Rate Limiting
  • WAF → Rate Limiting
  • Rule: Block requests if >100 hits in 10 seconds
  1. Edge Caching
  • Caching → Page Rules
  • URL: img.yourdomain.com/*
  • Edge Cache TTL: 1 Month
  1. Mainland China Acceleration
  • Enable China Network Optimization in DNS settings
  • Add an A record pointing to a preferred IP (e.g., 172.67.213.27)

🖼️ Three Ways to Use Your Image Host

  1. Web Upload
  • Visit your domain (e.g., img.yourdomain.com)
  • Enter AUTH_CODE to access upload panel
  • Supports batch upload and directory management
  1. API Upload
curl --location --request POST 'https://img.yourdomain.com/upload' --header 'Authorization: Bearer YOUR_AUTH_CODE' --form 'file=@"image.jpg"'
  1. Integration with Tools
  • PicGo: Install the S3 plugin, set:
    • Endpoint: https://img.yourdomain.com
    • AccessKey/SecretKey: From R2 API Token
  • Alist: Mount R2 as a storage strategy

🛠️ Common Troubleshooting

Issue Solution
Deployment failed Check that the build command is npm install
Image not loading Ensure R2 bucket public access is enabled
Slow loading in China Use optimized IP in DNS settings
API 403 errors Confirm AUTH_CODE and variable bindings

⚠️ Note: The free tier limits (1M writes, 10M reads per month) are ample for personal use. Still, it’s recommended to enable security measures to prevent abuse.

🌈 Final Thoughts

Combining Cloudflare R2 and Pages delivers a truly zero-cost, maintenance-free, and durable image hosting solution. With this step-by-step tutorial, you can have your own image host running in under 30 minutes. Whether for blog images, static project resources, or personal backups — this setup offers enterprise-grade reliability at no cost.

📚 Further Reading