Cloudflare R2 is a powerful, cost-effective object storage solution that integrates seamlessly with Cloudflare's global network. This makes it an excellent choice for hosting static websites, including those built with Gatsby. This guide will walk you through the process of deploying your Gatsby site on Cloudflare R2.
Note: the steps below work for the output of any static site generator. Gatsby development has slowed since Netlify acquired it in 2023, so if you are starting a new project, compare it with the alternatives first.
Prerequisites
- A Gatsby website ready for deployment.
- A Cloudflare account.
- A Cloudflare R2 bucket.
Preparing the bucket
First make sure you connect the bucket to a domain, that will enable the contents of the bucket to be publicly accessible through the domain. To do this you can connect a domain in the bucket settings in Cloudflare R2.
Make sure you create an API Token, that we will use in the next step to upload our static website to Cloudflare R2. You will need the Access Key ID, Secret Access Key and the Endpoint URL.
Uploading the static website into the Cloudflare R2 Bucket
If your website is already hosted on AWS S3 the process is pretty straightforward, just upload the contents to Cloudflare R2 instead of AWS S3 by changing the endpoint to the one from Cloudflare R2 and use the credentials you have from the previous step.
Since Cloudflare R2 is compatible with AWS S3, we can use the aws cli tool to deliver the contents of our public folder to the Cloudflare R2 bucket.
You can find the instructions to install the AWS CLI tool here: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html.
Also AWS provides a Docker image: amazon/aws-cli that you can use to run the aws commands without installing the tool directly on your system.
Once you have the aws cli tool setup you can run the following command to upload the contents:
AWS_ACCESS_KEY_ID=<your_access_key_id> AWS_SECRET_ACCESS_KEY=<your_secret_access_key> aws s3 sync ./public s3://<your_bucket> --region auto --endpoint-url <your_endpoint> --checksum-algorithm=CRC32
Verify the contents
Once the files have been uploaded, try to access the index.html file of Gatsby on your connected domain in your browser: yourdomain.com/index.html.
Adjusting URLs
As you probably noticed, to access the page on Cloudflare we need to add the suffix /index.html. To fix this we can use Cloudflare's Rules feature to make a rule that overwrites the original request URL and appends index.html to paths ending in / when accessing the pages from the Cloudflare R2 bucket.
Open Cloudflare's Rules feature. Find the "Create rule" button and select the "URL Rewrite Rule" option.
In the rule configuration, create a custom filter expression, and specify a rule with URI Path ends with "/" and Rewrite to: concat(http.request.uri.path, "index.html").
This rewrites paths like /your-page/ to /your-page/index.html. Paths without a trailing slash, such as /your-page, are not matched by this rule. Try it out by accessing the domain directly like: https://yourdomain.com.