How I write posts on prose.sh - Part 3

Intro #

I've been using prose.sh for the last week and I fell in love with its simplicity. They even generously provide small but sufficient space to host some small images and stylesheets on free tier. I wanted to use Backblaze B2 to store my media assets in their 10GB free tier and use Cloudflare caching to take the load off of prose.sh and reduce my B2 storage usage bill to $0 from $0 😂.

Setting up Backblaze B2 #

First sign up for Backblaze B2, during setup you'll be asked where to geographically host your files and you should select one close to your target audience from the options, pricing will not be affected. Next add your virtual credit card with a sensible limit and ⚠️immediately go to Settings -> Caps & Alerts ⚠️ and set your daily cap at $0.01 since we are not made of money here. Next, from the left-hand menu, under Buckets, create a bucket to host your files, let's call it test-bucket-please-ignore. Be sure to set the bucket as Private and set encryption to Enabled. Keep Object Lock Disabled. Now that you have created the bucket, go to Bucket Settings*. Enter the following string to Bucket Info as it will be needed when we are setting up Cloudflare Workers:

1{"cache-control":"public, max-age=86400"}

Next go to Lifecycle Settings and change the setting to Keep only the last version of the file as we need to keep storage size under 10GB and versions take up space.

Now that we set up the bucket we need to take note of the "Endpoint" which we'll later use on Cloudflare Workers setup. Mine is Endpoint: s3.eu-central-003.backblazeb2.com, yours can be different.

Setting up Backblaze B2 Command-Line Tool #

Now let's install Backblaze B2 Command-Line Tool. Assuming you have Python installed on Windows, it's as simple as running:

1pip3 install --upgrade b2

Now we need to authenticate our terminal environment to B2 servers so we'll need API keys. ⚠️ We are going to need two API keys, one for uploading from terminal which needs READ/WRITE permission and one for Cloudflare -> B2 connectivity which only needs READ permission. ⚠️

Let's create the first one that we'll use for uploading with READ/WRITE permission:

Under Application Keys -> click "Add a New Application Key" -> Name: Key-Read-Write, Allow access to Bucket(s): test-bucket-please-ignore, Type of Access: Read and Write, Allow List All Bucket Names: ✅ Checked and click "Create New Key". You'll get keyID, keyName, applicationKey ⚠️ Save the information somewhere secure as it's only shown once! ⚠️

Let's create the second one that we'll use at Cloudflare Workers for only accessing B2:

Under Application Keys -> click "Add a New Application Key" -> Name: Key-Read-Only, Allow access to Bucket(s): test-bucket-please-ignore, Type of Access: Read Only, Allow List All Bucket Names: ❌ Unchecked and click "Create New Key". You'll get keyID, keyName, applicationKey ⚠️ Save the information somewhere secure as it's only shown once! ⚠️

Now that we have API keys, let's set up our B2 CLI. Open up your terminal and run b2 account authorize, enter information for Key-Read-Write at the prompts

1>b2 account authorize
2Backblaze application key ID: KeyID
3Backblaze application key: applicationKey

You'll receive a JSON reply if it's successful. That's it. Now upload a test image and see if it's working, place a test.png to your current directory and run the following:

1b2 file upload test-bucket-please-ignore .\test.png test.png

You'll receive 100% on successful upload and bunch of information. You can read up on how to use the B2 CLI here. Notice that if you check the logs and try to visit uploaded file that's starting with URL by file name: https://f003.backblazeb2.com/file/test-bucket-please-ignore/test.png you'll get 401: unauthorized, this is wanted since we only want API access. Take note of the friendly URL as "f003.backblazeb2.com" is assigned to your bucket and going to be used later.

Setting up Wrangler and Deploying New Worker #

Now that we got B2 working, let's setup a Cloudflare Worker. This is explained pretty straightforward in official Backblaze and Wrangler documentation but some parts are outdated so I'm just going to try to summarize the borked parts here:

1. clone the cloudflare-b2 to your current directory, run npm install then create a wrangler.toml file and copy/paste the following:

 1name = "cloudflare-test-worker" #this is going to be our worker's name
 2
 3workers_dev = false #true if you don't want to use your own domain
 4compatibility_date = "2023-09-04"
 5
 6main = "index.js"
 7[vars]
 8B2_ENDPOINT = "s3.eu-central-003.backblazeb2.com" #change according to your bucket's information
 9BUCKET_NAME = "test-bucket-please-ignore"
10ALLOW_LIST_BUCKET = "false"

In the official documentation, the .toml file stores B2 application key ID but do not enter your B2_APPLICATION_KEY_ID yet since we'll hold those values inside Variables and Secrets at Cloudflare Workers.

Now that we created the wrangler.toml file, we'll run the latest and greatest Wrangler by running the following command: npx wrangler deploy (Did I mention they changed command structure at every version?). You'll get authenticated and it should deploy.

Now go to Cloudflare -> Account Home -> Compute (Workers) -> You should see cloudflare-test-worker. Click on it and go to Settings -> Domains & Routes -> Add Custom Domain: Enter desired FQDN such as assets.example.com . Now under Variables and Secrets add your ⚠️READ ONLY⚠️ Backblaze B2 API Key that we saved before as Type: Secret:

1Variable Name: B2_APPLICATION_KEY_ID
2Value: keyID

1Variable Name: B2_APPLICATION_KEY
2Value: applicationKey

Notice that we are creating two key–value pairs. From this point all should be working and you should be able to access the test.png we uploaded to B2 from assets.example.com/test.png. Let's see if it's working:

On Part 4, I'll talk about custom styling prose.sh blog, accessibility and my _styles.css file that I'm using on my blog.

Ciao!