banner
cos

cos

愿热情永存,愿热爱不灭,愿生活无憾
github
tg_channel
bilibili

Create a free and smooth image hosting experience with Backblaze + Cloudflare + Picgo

Recently, I had a need for object storage and after researching both domestic and foreign options with my friends, I realized that finding a suitable object storage service is not easy. In China, there are options like Alibaba Cloud OSS, Qiniu Cloud, and Tencent Cloud, while overseas options include Backblaze and Cloudflare R2. After some intense discussions, I decided to use Backblaze + Cloudflare. This decision was not difficult because Backblaze offers cloud storage services at a very low price, with excellent stability and speed. Additionally, data transfer between Backblaze and Cloudflare is free.

Reasons and Introduction#

Backblaze offers affordable cloud storage services, while Cloudflare provides stable and fast CDN services. The data transfer between the two is also free. By using Picgo in combination with the S3 plugin, you can easily upload images to Backblaze.

Introduction to Backblaze#

Backblaze is a company that provides cloud storage services. Its B2 Cloud Storage product allows you to store a large amount of data at a very low price. The storage cost of B2 Cloud Storage is only $0.005/GB/month, and the download cost is only $0.01/GB. Moreover, if you use Cloudflare's CDN service, the download cost is free. This is because Backblaze and Cloudflare are members of the Bandwidth Alliance, and there is no data transfer cost between them. With Backblaze, you can have a high-performance cloud storage space at a very low cost.

Advantages: Free, stable, and low pricing

  • Generous free quota and low pricing for paid usage: There is a monthly free quota of 10GB and a daily free download traffic of 1GB, which is more than enough for personal image hosting. Any usage beyond the free quota is charged at only $0.005/GB.
  • Free download with Cloudflare: Backblaze and Cloudflare are both members of the Bandwidth Alliance, so data transfer between them is free.
  • Rich API: Backblaze provides a rich API that can be easily integrated into your own applications, improving development efficiency and convenience.
  • Multiple upload methods: In addition to Picgo, Backblaze supports various upload methods, such as the official web interface, CLI tools, and third-party clients.
  • No file type restrictions: Unlike some image hosting services that only support image files, Backblaze has no file type restrictions. Users can store various types of files, such as videos, documents, and audio files. (Some even use it as a cloud drive)

Disadvantages: Uncertain speed in China, high learning curve, uneven risk distribution

  • The domestic network environment has limitations on accessing foreign cloud storage services, which may result in slow upload and download speeds.
  • API call limits: However, limits are removed if you add a credit card.
  • High learning curve: Using this combination requires manually configuring multiple services, which comes with a certain learning curve.
  • Uneven risk distribution: Since data storage and CDN services are provided separately by Backblaze and Cloudflare, there is a certain risk of uneven distribution. For example, if one service encounters a problem, it may affect the normal use of the entire image hosting service.

Of course, for a surfer like me, these disadvantages are completely acceptable~

Introduction to Cloudflare#

Cloudflare is a company that provides global CDN and security services, making your website faster, more secure, and smarter. Cloudflare offers a free plan that allows you to enjoy unlimited traffic and requests, as well as many advanced features such as SSL certificates, firewalls, page rules, and transformation rules. With Cloudflare, you can bind your Backblaze B2 bucket to your own domain and set rules to hide the bucket name, remove headers, etc., for example, files.example.com. This way, you can access your images using your own domain instead of Backblaze B2's default domain. Cloudflare can also provide caching and optimization for your images, improving their loading speed and quality.

Introduction to Picgo#

Picgo is an open-source image uploading tool that allows you to easily upload images to various image hosting services, including Backblaze B2 (with S3 plugin support). Picgo supports Windows, macOS, and Linux systems. It has a clean interface and rich plugins. You can upload images using shortcuts, drag and drop, clipboard, etc. You can also compress, crop, add watermarks, and perform other operations on images. Picgo can automatically generate URLs and Markdown code for your images, making it easy to reference them online.

Prerequisites#

You will need the following:

  • A Backblaze account (registered with an email)
  • A Cloudflare account (registered with an email)
  • Your own domain (I used an Alibaba Cloud domain that I purchased a long time ago)
  • Picgo client

If you don't have these yet, please register/download/get them first~

For detailed configuration steps, the following two blog posts are comprehensive and easy to follow:

However, I will mainly discuss some pitfalls I encountered or areas that were not explained clearly in the original articles due to updates.

Changing DNS Service to Cloudflare in AliYun Domain Console#

After the transfer, you will manage it in Cloudflare - DNS - Records~

Changing DNS servers takes some time. Once the change is successful, the AliYun domain console will display the following:

image.png

Note that when importing the domain into Cloudflare, I seemed to have lost a few domain records. Remember to check them after importing. For example, some of my Vercel-related records seemed to have failed to import, so I manually configured them. If you have similar requirements, remember to check the DNS records of your domain after importing~

image.png

Configuring Transform Rules in Cloudflare to Rewrite URLs#

According to the Building a Free Image Hosting with Cloudflare + Backblaze B2 + PicGo article, when configuring the URL rewrite path, I couldn't simply use the "Edit expression" as mentioned in the article. Instead, I had to do it like this:

image.png

  • (http.request.uri.path ne "/file/{bucketName}" and http.host eq "{your custom domain}")

  • Rewrite the path to concat("/file/{bucketName}",http.request.uri.path)

This configuration achieves the conversion from example.com/xxx.jpg to example.com/file/{bucketName}/xxx.jpg, which not only hides the bucket name but also shortens the URL~

Configuring Backblaze Upload in Picgo#

Following the step of configuring the S3 plugin in the blog post Configuring S3 Plugin, I couldn't get the configuration right. It wasn't until I found this article: Getting Started with the S3 Compatible API – Backblaze Help

image.png

Now everything became clear. Fill in the Endpoint with your custom node, and the region is the second part of your S3 Endpoint. For example, in the Endpoint shown in the image, the region is us-west-001.

image

Then, you need to enable PathStyleAccess, and leave public-read unchanged.

image.png

Configuration successful~ Celebrate~~

By the way, when writing this article using Obsidian, I used the Image Auto Upload Plugin plugin in combination with Picgo, and the experience was very smooth.

image.png

image.png

For macOS users, I recommend using DropShare, which directly supports Backblaze!

These are some pitfalls I encountered and their solutions. I hope they can help others with similar needs~

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.