Jayden

Intro#

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

However, recently the CEO of Telegram was arrested, and South Korea has had conflicts with Telegram due to censorship issues. As a result, the image hosting service of Telegraph can no longer upload new images; old images are still accessible, but it's uncertain when they will cease to function.

Thus, I began searching for a new image hosting solution. My expectations were reliable and easy to use, preferably free. Cloudflare R2 + PicGo + WebP Cloud is such a solution.

This article mainly references this article, and also includes content on WebP Cloud custom domains and migrating images from Telegraph to R2 image hosting.

Deployment#

I can assure you that as of September 2024, my deployment method is effective.

You will need#

1. A Cloudflare account with a linked credit card (a prerequisite for enabling R2)
2. A domain name (not mandatory, but it looks cooler if you have one)

Now, let's get started...

Enable Cloudflare R2#

1. Open the Cloudflare dashboard, select R2, where you can see the free quota for R2, and click to agree to enable it.
2. Create a new bucket (Create bucket)
   1. Enter a name you like, such as image.
   2. Choose your desired region, such as APAC.
   3. Click Create bucket to create it.
3. Click on the newly created bucket named image.
   1. If you have a domain, go to settings, and set up Custom Domains (if your domain is on Cloudflare, you can add it quickly).
   2. If you don't have a domain, go to settings, click Allow Access next to R2.dev subdomain, enter allow, and you will receive an address like xxxxxx.r2.dev.
   3. You should now be able to upload images; you can test by uploading images in the Objects section of the image bucket.
4. Now click on R2 on the left side of the page, return to Overview, and under Account details, click Manage R2 API Tokens under Account ID.
   1. Click Create API token to create a new API token.
   2. Give it a name, such as image-R2.
   3. Select Object Read & Write for Permission.
   4. Under Specify buckets, select the image bucket you just created.
   5. Click Create API Token to create it.
   6. You will receive the information needed for PicGo, including Access Key ID, Secret Access Key, and endpoints. This will only be displayed once, so please save it.
5. At this point, all operations in the Cloudflare dashboard are complete.

Set up PicGo#

1. Download PicGo.
2. After installation, click on plugin settings, search for s3, find the plugin by WayJam So, and install it.
3. Go to the image hosting settings, find Amazon S3, and add or modify the default settings.
   1. You can name the image hosting configuration anything, like r2.
   2. Application Key ID is your Access Key ID.
   3. Application Secret is your Secret Access Key.
   4. Bucket Name is the name of the bucket you set, which is image here.
   5. Custom Endpoint is your endpoints.
   6. Custom Domain is your set Custom Domains or the xxxxxx.r2.dev address assigned by Cloudflare.
   7. Click confirm.
4. At this point, you should be able to upload photos using PicGo.

Use WebP Cloud to proxy your address.#

1. Go to the WebP Cloud Dashboard, and log in.
2. In the left sidebar under Price, you can see the free quota.
3. In the left sidebar under Home, scroll down and click Create Proxy.
   1. Choose your preferred region; here I select Hillsboro, OR.
   2. Fill in Proxy Name with anything, like R2-image.
   3. For Proxy Origin URL, enter your set Custom Domains or the xxxxxx.r2.dev address assigned by Cloudflare.
   4. Click Create to create it.
   5. At this point, you will be assigned an address like xxxxxx.webp.li.
4. If you want to set a custom domain, go to the newly created Proxy, click Custom domain, and follow the prompts to add the corresponding entries in your DNS resolution. After a moment, you will be able to activate your custom domain in Custom domain.
5. Next, you need to change the Custom Domain in PicGo to the custom domain you set in WebP Cloud or the xxxxxx.webp.li address assigned by WebP Cloud.

Migration#

I have a large number of images stored in Telegraph's image hosting, and I want to migrate all of them to R2. The PicGo plugin pic-migrater is a good choice, developed by Molunerfinn.

1. After downloading the plugin, click on plugin settings, click the small gear in the lower right corner of the plugin, and click Configure plugin - picgo-plugin-pic-migrater.
2. Enter any suffix for the new file name, such as _new.
3. I set Write old content to new file to no, so the converted files will be named source_filename_new.md, making it easy for me to check these files.

However, for some markdown files, pic-migrater may encounter issues migrating, and I am not sure how to resolve it. My approach is to handle the orphaned files one by one manually.

Outro#

That's all for now.

This article is synchronized and updated to xLog by Mix Space. The original link is https://xxu.do/posts/geek/Cloudflare-R2%2BPicGo%2BWebP-Cloud