Image Hosting Solution: Cloudflare R2 + PicGo + WebP Cloud

Intro

Previously, my image hosting relied on two generous benefactors, Cloudflare and Telegraph. I thought they would outlive my blog, so I assumed this was a long-term solution — reliable, easy to use, and, most importantly, free.

But recently Telegram's CEO was arrested, and South Korea has also clashed with Telegram over censorship. Perhaps as a result, Telegraph's image hosting service can no longer upload new images. Old images are still accessible, but there's no telling when they'll disappear for good.

So I started looking for a new image hosting solution. What I wanted was reliable, easy to use, and preferably free. Cloudflare R2 + PicGo + WebP Cloud is exactly that.

This post is mainly based on this article, and also covers custom domains on WebP Cloud and migrating images from Telegraph to R2.

Deployment

As of September 2024, I can guarantee that this deployment method works.

What you need

1. A Cloudflare account with a credit card linked (required to enable R2)
2. A domain (not required, but cooler if you have one)

Now let's get started...

Enable Cloudflare R2

1. Open the Cloudflare dashboard, select R2, and you'll see the free tier. Click to agree and enable it.
2. Create a new bucket (Create bucket)
   1. Enter a name you like, e.g. image.
   2. Select a region you prefer, e.g. APAC.
   3. Click Create bucket to create it.
3. Click the image bucket you just created.
   1. If you have a domain, go to Settings and set up Custom Domains (if your domain is already on Cloudflare, you can add it right away).
   2. If you don't have a domain, go to Settings, click Allow Access next to R2.dev subdomain, type allow, and you'll get an address like xxxxxx.r2.dev.
   3. You should now be able to upload images. You can test by uploading one in the Objects section of the image bucket.
4. Now click R2 in the left sidebar to return to Overview. Under Account details, click Manage R2 API Tokens below Account ID.
   1. Click Create API token to create a new API token.
   2. Give it a name, e.g. image-R2.
   3. For Permission, select Object Read & Write.
   4. Under Specify buckets, select the image bucket you just created.
   5. Click Create API Token to create it.
   6. You'll get the info PicGo needs, including Access Key ID, Secret Access Key, and endpoints. It's only shown once, so save it now.
5. With that, you're done with the Cloudflare dashboard.

Set up PicGo

1. Download PicGo.
2. After installing, open the plugin settings, search for s3, find the plugin by WayJam So, and install it.
3. Go to the image host settings, find Amazon S3, and add a new config or modify the default one.
   1. The config name is up to you, e.g. r2.
   2. Access Key ID: enter your Access Key ID.
   3. Access Key Secret: enter your Secret Access Key.
   4. Bucket: enter the bucket name you set, here image.
   5. Custom endpoint: enter the endpoints value.
   6. Custom domain: enter the Custom Domains you set, or the xxxxxx.r2.dev address Cloudflare assigned to you.
   7. Click OK.
4. At this point, you should be able to upload images with PicGo.

Proxy your URL with WebP Cloud

1. Go to the WebP Cloud Dashboard and log in.
2. In the Price section on the left, you'll see the free tier.
3. Go to the Home section on the left, scroll down, and click Create Proxy.
   1. Choose a region you like — I chose Hillsboro, OR.
   2. For Proxy Name, enter anything, e.g. R2-image.
   3. In Proxy Origin URL, enter the Custom Domains you set, or the xxxxxx.r2.dev address Cloudflare assigned to you.
   4. Click Create to create it.
   5. You'll then be assigned an address like xxxxxx.webp.li.
4. If you want a custom domain, open the proxy you just created and click Custom domain. Add the corresponding entry to your DNS records as prompted; after a short wait, you can activate your custom domain in Custom domain.
5. Next, change the Custom domain in PicGo to the custom domain you set in WebP Cloud, or the xxxxxx.webp.li address WebP Cloud assigned to you.

Migration

I have a ton of images still sitting on Telegraph's image host, and I want to move them all to R2. PicGo's pic-migrater plugin is a good choice — it's developed by Molunerfinn.

1. After downloading the plugin, open the plugin settings, click the gear icon at the bottom right of the plugin, and choose Configure plugin - picgo-plugin-pic-migrater.
2. Enter anything for the new file name suffix, e.g. _new.
3. I set Write old content to new file to no, so converted files are named source_filename_new.md, which makes them easy to review.

For some markdown files, however, pic-migrater fails to migrate them, and I haven't figured out how to fix it yet. My approach is to manually handle the files it leaves behind, one by one.

Outro

That's it.