LaughingZhu

Preface#

I previously read an article about using Cloudflare R2 to set up an image hosting solution, mainly to take advantage of Cloudflare's storage and CDN services for free. My current blog DevNow uses Qiniu Cloud for CDN, which still incurs a little bit of cost.

Although it's not much, seeing a free solution makes me eager to try it out, so today I'm going to give it a shot.

1. Register a Cloudflare Account#

First, let me briefly introduce Cloudflare, a company that provides web security and performance optimization services. Its main features include content delivery network (CDN), distributed denial-of-service (DDoS) protection, internet security and optimization, and domain name system (DNS) services.

Cloudflare R2 is an object storage service provided by Cloudflare. It is similar to Amazon's S3 (Simple Storage Service), but with a significant difference: Cloudflare R2 does not charge for outbound bandwidth. This means users are not charged extra when retrieving data from storage, which is a significant advantage for applications that require large data transfers.

R2 allows users to store and manage large amounts of unstructured data, such as images, videos, backup files, etc. It integrates with Cloudflare's global network, providing fast and secure content delivery, suitable for businesses that need efficient and reliable storage and distribution solutions. R2 also supports compatibility with existing S3 API, making it easy for users already using S3 to migrate or expand to Cloudflare R2.

2. Bind Domain and Resolve DNS#

Add a domain name in the left website panel. Since my blog domain name has already been purchased on Tencent Cloud, I will mainly migrate the DNS resolution service to Cloudflare.

If the DNS resolution is not from Cloudflare, the status here will prompt you to switch. I will use Tencent Cloud as an example, and the specific steps are as follows:

2.1 Click on the corresponding domain management under the domain menu in Tencent Cloud#

2.2 Then click to modify DNS resolution#

2.3 Here we switch the default DNSPod to Custom DNS, and then fill in the corresponding addresses#

The two addresses below can be found in Cloudflare, just fill them in, and then wait. If it's fast, it will only take a few minutes. After it's done, Cloudflare will send an email notification, indicating that the resolution has been successful.

2.4 At this point, return to the website and find that the status has successfully changed to active#

3. Activate R2 Service#

Navigate to the R2 service through the left menu. Before activation, you need to bind a credit card; any that supports Visa will do, which is convenient for any charges that exceed the free quota or for enabling some paid services. After activation, you can create a storage bucket:

After creation, you can enter the bucket's detail panel:

Configure a custom domain name, which can be used for access later. At this point, the object storage service based on R2 is basically complete. You can now store objects in the storage bucket.

4. PicGo Configuration for R2 Upload Service#

To streamline the image upload workflow, I use an upload method based on PicGo, which allows uploads via copy and URL. Here, I will mainly record how to configure the upload to R2 service.

R2 is compatible with the S3 format, so we will configure it directly as S3. Search for the S3 plugin in the plugin section and install it:

In the "Plugin Settings," select the installed option, and a new Amazon S3 option will appear in the "Image Hosting Settings." Click to enter the configuration options.

There are a few configurations that need special attention.

• Application Key ID: Fill in the Access Key ID from the R2 API.
• Application Secret: Fill in the Secret Access Key from the R2 API.
• Bucket Name: Fill in the name of the Bucket created in R2, such as yu-r2-test mentioned above.
• File Path: The file path for uploads to R2. I choose to use {fileName}.{extName} to retain the original file name and extension.
• Custom Endpoint: Fill in the "region-specific endpoint for S3 clients" from the R2 API, which is in the format of xxx.r2.cloudflarestorage.com.
• Custom Domain Name: Fill in the generated domain in the format of xxx.r2.dev or a custom domain, such as my configured https://r2.laughingzhu.cn.

The above secret information can be found in the Cloudflare R2 service:

Create a new API token, and after creation, you will see the relevant keys. Fill in the corresponding information as mentioned above:

Keep other configurations as default, and after confirming that the parameters are correct, click "OK" and "Set as Default Image Hosting."

5. PicGo Adds Automatic Compression and WebP Conversion Plugin#

I use compress-next, which has many modes to configure. I chose the webp-converter.

I mainly hope to optimize image loading by converting to webp. After installation, remember to perform the default configuration:

Then enable it, and uploaded images will be converted to webp format and uploaded to the R2 service.

At this point, the overall static resources of my blog have been migrated from Qiniu Cloud to Cloudflare R2 service, and the days of freeloading have begun, feeling great 😊.