Create Your Own Cloud Photo Storage Site in BackBlaze B2 Using Cloudflare and ShareX

Saturday, January 09, 2021 Blog

I am using Imgur to store my Blog photos for a long time, before it was PostImage, PhotoBucket and ImageShack. After tested with BackBlaze B2 service, especially integrated with ShareX and connected to CDN service provider Cloudflare, I decided to give a BackBlaze a try as my photo site to store all my Blog screenshots and photos. The beauty of to integrate with Cloudflare is I can use my own domain name for url and it can utilize CDN's caching function to reduce the usage of Backblaze to avoid cap limit.

The free plan at BackBlaze is 10G and Cloudflare can be configured to work with it very well. Also ShareX screen capture software can auto-generate my own domain url for those photos. It sounds quite promising to use it as blog photo bed. There is cap limit for class b and class c transactions. But usually the limit is good for a small website like mine.

This post is a summary for all steps for installation and configuration.

Backblaze has a 10GB free file limit, and then charges $0.005/GB/Month thereafter. It also offers a limited number of Class "B" and "C" transactions, with 2500 free of these per day. You probably won't use any Class C transactions, but Class B transactions are used for b2_download_file_by_name requests, which can be easily exceeded, But with set up proper caching rules in Cloudflare, it can be avoided for additional API requests. This is mainly due to the Bandwidth Alliance, so bandwidth between Cloudflare and Backblaze is entirely free.

Create and Configure Your BackBlaze Account

1 Sign Up an Backblaze.com Account. Free service is enough for this lab.

2 Log into Your Account and Create a Public Bucket

Here is an extra important step to set up your bucket. You will have to put one cache command into Bucket info: {"cache-control":"max-age=43200"}

43200 is seconds. This means Cloudflare will not re-fetch the resource from source (BackBlaze) in 43200 seconds

3 Upload a file to get Friendly URL:

For example: I got following url starting with f000.backblazeb2.com/file. You will need this url to put it into ShareX and Cloudflare

Friendly URL:: https://f000.backblazeb2.com/file/test1-51sec/2020/chrome_Xo1JBLaOgc.png

test1-51sec is bucket name. 2020 is the folder I created in the bucket.

4 Add a New Application Key

The application key will only show once, and you will need it to access your bucket. But you can create multiple keys later.

Important: make sure you created a key only for one bucket, not for all.

Both KeyID and Application Key will be needed to allow ShareX to upload the photos into this bucket.

Configure ShareX

1 Right Click ShareX icon, and select Destinations -> Destination Settings.. menu

2 Configure Backblaze B2 destination as show in the screenshot.

I put upload path parameter with year and month to organize the photos.

You will have to use custom URL with f000.backblazeb2.com/file/test1-51sec for now. Later, After we configure cloudflare to use our own domain for backblaze site, we can change this custome url.

Configure Cloudflare

Important:

Ensure your SSL settings are set to Full. This is the default setting. Please note: Backblaze B2 only supports secure (HTTPS) connections.

1 Create a new CNAME record for your Backblaze friendly url.

2 Create a page rule to cache this URL only when it is from 51sec.org.

Cache level 'standard' should be enough since it already caches most assets (images, css, js). With “cache everything” page rule, you are instructing Cloudflare to also cache HTML (pages) output. However, even with this rule enabled, unless you have an “Edge cache TTL” rule or “cache-control” headers (from your origin), html documents will not cache anyway. Likely this rule alone does little or nothing. Cache Everything also might be causing some other issues at third party, such as Ezoic.

3 Change ShareX settings to use photos.51sec.org this sub domain url which cached by Cloudflare.

Verify if using CloudFlare Cache

Create Hotlink Protection

You can enable it to prevent other site to use your images. But it might cause some problems if you would like to use it in other sites.

Troubleshooting

If you are getting an error such as following:

ShareX - Error

Could not get B2 upload URL: Got status 400 (bad_request): required field bucketId cannot be null.

That is because you are allowing your key access to all buckets. Please create a new key to allow only one bucket.

Some other solutions such as using COS and OSS, have been compared in this post:如何挑选一个好的图床来存储图片

References

No comments

Subscribe to: Post Comments ( Atom )