29 replies

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:

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)"

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:

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') }
  })
}

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

Serving static files to squarespace domain with R2 bucket

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)"

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:

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') }
  })
}

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') }
  })
}

Serving static files to squarespace domain with R2 bucket

Serving static files to squarespace domain with R2 bucket

Similar Threads

Similar Threads

Similar Threads