Skip to main content

Backblaze + Cloudflare

Difficulty - Hard, Cost - $1 one-time-payment

Getting started​

1. Make a backblaze account​

Make an account on backblaze

Make an account

2. Welcome to backblaze​

When you make your account, you will see this screen

Bucket Creation​

3. Make a bucket​

Create a new bucket

Click create a bucket

You will be presented with the following dialog. Ensure the following:

  • name does not have any invalid characters
  • Files in bucket are public
  • Default encryption is disabled
  • Object lock is disabled
Bucket settings

When you create a public bucket, you will be asked to pay $1 to verify your identity

Bucket tax

4. Configure access for your bucket​

Now that your bucket is created, you will see this screen

Bucket made

If you inspect the contents of the bucket, you will see it is empty

Empty bucket

It may seem tempting at this point to drag and drop your files into the bucket, but DO NOT DO THIS. It will screw up the folder arrangement of your site and the site will not be able to be accessed.

We will have to use the b2 cli in order to upload your files while preserving the correct folder structure.

Uploading files​

5. Create an application Key​

Make a new application key for your bucket. This will be used as your credentials for the b2 cli

Click on "create an app key"
Walk through the key creation dialog

Make note of the keyID and applicationKey. Keep these secret!

credentials

6. Install B2 CLI​

tip

Experiences will vary between mac/linux and windows users. Commands for both operating systems are included here

On Mac/Linux/Windows​

pip install --upgrade b2

⚠️ You need Python and pip installed. Download them at https://python.org.

7. Set Your Credentials​

You need your Application Key ID and Application Key from your Backblaze account.

On Mac/Linux/Windows​

b2 account authorize KEY_ID APPLICATION_KEY

This logs you in for the current terminal session. If you close the terminal, you'll need to re-run this.

Credentials are stored in a .b2_account_info file, usually in your home directory.

8. Upload your files​

danger

Make sure you have located the folder where faircamp dumps your site contents. The following commands show example folder locations to illustrate the syntax of the command, but your folder location will vary.

  • Your [FAIRCAMP-BUCKET-NAME] is the name you gave your bucket in the previous steps

On Mac/Linux​

b2 sync --delete ~/Documents/faircamp/.faircamp_build b2://[FAIRCAMP-BUCKET-NAME]

On Windows​

b2 sync --delete C:\Users\YourName\Documents\.faircamp_build b2://[FAIRCAMP-BUCKET-NAME]

If you have done this portion successfully, your bucket should look somewhat like the following

Full bucket :)

9. Test your site​

To make sure that the files were uploaded correctly, find the index.html file at the top level of your bucket.

Click on this file. Open the "Friendly URL"

You should see your library load in. However, when you try to click on something, there will be some error

This is because backblaze does not know you are hosting a website. To fix this, we need a route translator

Create a route translator​

Backblaze allows you to host files publicly. However, in order for your files to behave like a website, we need to write a small script that will translate requests from a web browser to the appropriate files in your bucket

10. Create a Cloudflare account​

Create an account on cloudflare

Welcome to cloudflare!

Cloudflare dashboard

11. Create a worker​

Click on workers and pages

Click Create

Click on Hello World. This will give us a blank template

From here, we can click Deploy

Then Continue to project

12. Modify the worker to translate our routes​

In the top right corner, click the icon that looks angled brackets to edit the code

Here we will see the code editor

Configure the base URL​

Remember the friendly URL that you used to test your site earlier? We will use that link here.

It should be formatted like this ( Replace [YOUR-BUCKET-NAME] with your bucket name )

const baseURL = "https://f005.backblazeb2.com/file/[YOUR-BUCKET-NAME]";

Paste the script into the code editor​

Be sure to replace baseURL with your base URL, and paste this script into the cloudfront code editor

const baseURL = "https://f005.backblazeb2.com/file/[YOUR-BUCKET-NAME]";

export default {
  async fetch(request, env, ctx) {
    // Only allow GET requests
    if (request.method !== 'GET') {
      return new Response('Method not allowed', { status: 405 });
    }

    // Check cache first
    const cache = caches.default;
    let cachedResponse = await cache.match(request);
    if (cachedResponse) {
      return cachedResponse;
    }

    const parsedUrl = new URL(request.url);
    let path = parsedUrl.pathname;
    // Check if this is a file or folder.
    // If it's a folder and missing the trailing slash, perform a 301 redirect.
    let lastSegment = path.substring(path.lastIndexOf('/'));
    if (lastSegment.indexOf('.') === -1) {
      if (!lastSegment.endsWith('/')) {
        return Response.redirect(`https://${parsedUrl.hostname}${path}/`, 301);
      } else {
        path += 'index.html';
      }
    }

    // Fetch content from Backblaze B2
    const b2Response = await fetch(`${baseURL}${path}`);
    // Build new headers including cache-control
    const headers = {
      'cache-control': 'public, max-age=14400',
      'content-type': b2Response.headers.get('Content-Type'),
    };

    const response = new Response(b2Response.body, {
      status: b2Response.status,
      statusText: b2Response.statusText,
      headers,
    });

    // Cache successful responses
    if (response.status < 400) {
      ctx.waitUntil(cache.put(request, response.clone()));
      return response;
    } else if (response.status === 404) {
      // Optionally, return a custom 404 page
      return fetch(`${baseURL}/404.html`);
    }

    // Return a minimal error page for other errors
    return new Response(response.statusText, { status: response.status });
  },
};

Deploy the worker​

Click the deploy button

Your faircamp library will now be accessible via this link

If you click the refresh icon, your site should show up in the window

Finished​

tip

Your site is now available at the link listed above the preview window! Keep this link handy; You will submit it on your library profile page

Tips and Tricks​

Refreshing your site after making changes​

If you want to refresh the contents of your site:

  1. empty your storage bucket

This can be done manually via the backblaze dashboard, or by running the command

b2 rm --versions --recursive b2://<bucketName>
  1. re-upload a fresh faircamp build ( repeat step 8 )