Jayden

Intro#

Previously, my image hosting was based on Cloudflare + Telegraph, and I thought they would outlive my blog, so I assumed this was a long-term solution that was reliable, 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 are 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 custom domains for WebP Cloud and migrating images from Telegraph to R2 image hosting.

Deployment#

I can guarantee 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 required, 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 preferred 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 name, go to settings and set up Custom Domains (if your domain is already on Cloudflare, you can add it quickly).
   2. If you do not have a domain name, go to settings, click Allow Access next to R2.dev subdomain, enter allow, and you will receive an xxxxxx.r2.dev address.
   3. You should now be able to upload images; you can test 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. 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 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 the 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 via 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; I chose Hillsboro, OR.
   2. Fill in Proxy Name with anything, such as 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 xxxxxx.webp.li address.
4. If you want to set a custom domain, go into the newly created Proxy, click Custom domain, and follow the prompts to add the corresponding entries in your DNS settings. 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 the Telegraph 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 the plugin settings, click the small gear icon in the lower right corner of the plugin, and click Configure plugin - picgo-plugin-pic-migrater.
2. You can fill in the new file name suffix with anything, such as _new.
3. I set Write old content to new file to no, so the converted files will be named original_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 still unsure how to resolve this. 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