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 small amount of expense.

Although it's not much, seeing a free solution makes me eager to try it out, so today I decided 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 wait. If it's quick, it will take just a few minutes. Once 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, and any card 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 bucket.

4. PicGo Configuration for R2 Upload Service#

To streamline the image upload workflow, I am using an upload method based on PicGo, which allows uploads via copy and URL. Here I will mainly document 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 the Amazon S3 option will be added in the "Image Hosting Settings." Click to enter the configuration options.

There are several configurations that need special attention.

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

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

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

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

5. PicGo Adds Automatic Compression and WebP Conversion Plugin#

I am using compress-next, which has many modes available for configuration. 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 images will be converted to webp format when 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 using it for free have begun, feeling great 😊.