Serving static files to squarespace domain with R2 bucket

Hey there! I'd like to use an R2 bucket to host static website files and then use a worker to directly serve the HTML pages to my squarespace domain. Sorry if some of this is basic stuff, I'm completely new to website configuration so all the terms are a little confusing

I've tried changing the SSL/TLS encryption mode, and on Off or Flexible, my site gives an ERR_TOO_MANY_REDIRECTS. On Full or Full (Strict) my site just returns the default under construction squarespace page.

So far I've done a few things:

As seen in the included image, I replaced the squarespace DNS defaults on their website with the one provided in the DNS tab of the cloudflare site I set up. In the included pic I replaced the IP from that page with X just for confidentiality.
I set up a worker for routing the R2 to the domain, with the following setup. I'll be totally honest, I was looking for a quick and dirty approach to it and decided to use GPT4 to give me scripts and config, so I can see what it's doing since I've spent some time with web servers in python, but don't have the knowledge at the moment to understand how to make changes to it on my own. I realize this is bad practice for asking for help, but I wasn't able to find any resources after some pretty extensive googling on how to do this, so if anyone can provide me with a way to get started I'm more than happy to dive into some learning.
wrangler.toml:
```
name = "my-worker"
type = "javascript"

account_id = "put_your_account_id_here"
zone_id = "put_your_zone_id_here" # This is optional

Define the R2 bucket binding

r2_buckets = [
{ binding = "myBucket", bucket_name = "name_of_your_r2_bucket" }
]

compatibility_date = "(compatibility date)"

**index.js:**

**index.js:**

**index.js:**

**index.js:**

js
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
const url = new URL(request.url)
const path = url.pathname

const bucketUrl = 'https://your-r2-bucket.r2.cloudflarestorage.com' + path
const response = await fetch(bucketUrl)

if (!response.ok) {
return new Response('File not found', { status: 404 })
}

return new Response(response.body, {
headers: { 'content-type': response.headers.get('content-type') }
})
}
```
I've made sure to fill in the fields I'm supposed to in these files with the proper information from my site.

If anyone has some sort of hunch for how to fix this, that would be much appreciated, cheers

Ddanny boy Hey there! I'd like to use an R2 bucket to host static website files and then us...

Chaika•5/9/24, 4:25 PM

Trying to understand the root of your question

On Full or Full (Strict) my site just returns the default under construction squarespace page.

Full (Strict) is the only one you should want/ever use, if Squarespace isn't supposed to give the under construction page that'd be something on their end

I set up a worker for routing the R2 to the domain, with the following setup.

You don't need a Worker if you just want to serve the contents of your bucket. Just go into your R2 bucket -> Settings -> Connect Domain and input a subdomain you want your bucket to be reachable via, ex: cdn.example.com, and then you can just take your object keys and prefix them with the domain to reach them (or click on a file in your bucket and it'll show you the path to it on the custom domain)

You should just throw away that worker, it makes no sense, is using outdated syntax, binding to the bucket to then use the auth-required s3 api, it would never work and although you can setup a worker to serve assets from your bucket, the custom domain way is better as you don't pay for worker invocations

CChaika Trying to understand the root of your question > On Full or Full (Strict) my si...

danny boyOP•5/9/24, 4:27 PM

Absolute godsend, just did that now so hopefully it'll be working in a few minutes. Thanks!

danny boyOP•5/9/24, 4:28 PM

Can't believe I didn't see that button when I was mucking around in the R2 settings, that's actually insane haha

CChaika Trying to understand the root of your question > On Full or Full (Strict) my si...

danny boyOP•5/9/24, 4:30 PM

It worked, tysm!! Is there any way I can point the root of the site to the index.html?

Ddanny boy It worked, tysm!! Is there any way I can point the root of the site to the index...

Chaika•5/9/24, 4:32 PM

You can use a transform rule:

You can find Transform Rules under your website/zone in the Cloudflare dash, then Rules -> Transform Rules -> Rewrite URL. Then, "Create Rule".
Here's a magic link to go straight to creating a new one: https://dash.cloudflare.com/?to=/:account/:zone/rules/transform-rules/rewrite-url/new
Your rule should look something like this:
Where

hostname

hostname

is your r2 bucket custom domain, ex if you input cdn.example.comcdn.example.com, it'd be that, or if you put it on your root/apex of your site,

example.com

example.com

Chaika•5/9/24, 4:33 PM

transform rule rewrite urls are server-side, they wouldn't see a redirect or anything

CChaika You can use a transform rule: You can find Transform Rules under your website/z...

danny boyOP•5/9/24, 4:35 PM

Man - gonna be sticking with cloudflare for a while with stuff like this hahaha

danny boyOP•5/9/24, 4:35 PM

That's so cool!

danny boyOP•5/9/24, 4:35 PM

Makes total sense :)

Chaika•5/9/24, 4:35 PM

there's a lot of cool stuff you can do, wish they were a bit more user friendly though

danny boyOP•5/9/24, 4:36 PM

Yeah definitely the docs aren't the clearest to read through

danny boyOP•5/9/24, 4:36 PM

Pricing and features are by far better than anything I've seen so far though

danny boyOP•5/9/24, 4:38 PM

One last question if it's cool, if I wanted to remove the file extension from other pages, for example go to mywebsite.com/page-2 instead of mywebsite.com/page-2.html, would I have to rename page-2.html so that it didn't have a file extension in the r2 bucket at all, or would there be a way to auto remove it in the URL?

Ddanny boy One last question if it's cool, if I wanted to remove the file extension from ot...

Chaika•5/9/24, 4:39 PM

the thing is it'd be more like adding then auto removing, as you're asking for the user to visit /page-2 and then the server to request page-2.html

Chaika•5/9/24, 4:40 PM

def possible with transform rules though, although might cause false positive sometimes, for example if you actually had an extensionless file, we would try to add .html (when it might not be)

danny boyOP•5/9/24, 4:40 PM

True that's a really good point

danny boyOP•5/9/24, 4:40 PM

If i ever had a page-2.jpg or page-2.js or whatever it would spaz out

Chaika•5/9/24, 4:41 PM

well you could have it not do anything on files with extensions

danny boyOP•5/9/24, 4:41 PM

Noted, I'll just remove the file extensions no prob

Chaika•5/9/24, 4:41 PM

but if page-2 was a jpg with no extension, we would assume it's html and add that extension

danny boyOP•5/9/24, 4:41 PM

oh gotcha

Chaika•5/9/24, 4:41 PM

R2 buckets are more meant to be dumb object storage, if you were looking for more a full featured web environment like Github Pages, any reason why you wouldn't use Cloudflare Pages? Unlimited bandwidth/static asset requests, only real limit is max 25 MB per file

danny boyOP•5/9/24, 4:42 PM

Yep

danny boyOP•5/9/24, 4:42 PM

large image files

danny boyOP•5/9/24, 4:42 PM

I'm gonna have a photography portfolio on there where people can download images so that's an unfortunate limitation

Chaika•5/9/24, 4:42 PM

you could potentially split it so pages.dev has all the html/css/js and r2 has all the images, but would be more complex

danny boyOP•5/9/24, 4:43 PM

Yeah honestly I'd just rather go with a set and forget approach

danny boyOP•5/9/24, 4:43 PM

But removing the file extensions is no problem for me. Thanks so much for the help!

danny boyOP•5/9/24, 4:43 PM

Totally appreciate it

Serving static files to squarespace domain with R2 bucket

Define the R2 bucket binding

Similar Threads

Similar Threads

Similar Threads