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:
1. 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.
2. 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:
index.js:
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 ✌️
17 Replies
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
Absolute godsend, just did that now so hopefully it'll be working in a few minutes. Thanks! ❤️
Can't believe I didn't see that button when I was mucking around in the R2 settings, that's actually insane haha
It worked, tysm!! Is there any way I can point the root of the site to the index.html?
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
is your r2 bucket custom domain, ex if you input cdn.example.com
, it'd be that, or if you put it on your root/apex of your site, example.com
transform rule rewrite urls are server-side, they wouldn't see a redirect or anything
Man - gonna be sticking with cloudflare for a while with stuff like this hahaha
That's so cool!
Makes total sense :)
there's a lot of cool stuff you can do, wish they were a bit more user friendly though
Yeah definitely the docs aren't the clearest to read through
Pricing and features are by far better than anything I've seen so far though
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?
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
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)
True that's a really good point
If i ever had a page-2.jpg or page-2.js or whatever it would spaz out
well you could have it not do anything on files with extensions
Noted, I'll just remove the file extensions no prob 👍
but if page-2 was a jpg with no extension, we would assume it's html and add that extension
oh gotcha
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
Yep
large image files 😂
I'm gonna have a photography portfolio on there where people can download images so that's an unfortunate limitation
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
Yeah honestly I'd just rather go with a set and forget approach
But removing the file extensions is no problem for me. Thanks so much for the help!
Totally appreciate it