Cloudflare Pages Deployment Plugin for Sanity Studio
Trigger Cloudflare Pages Deploys from your Sanity Studio.
Install
Run the following command in your studio folder using the Sanity CLI:
sanity install cloudflare-pages-deploy@sanity/dashboard part, you'll need to manually install this as well:
sanity install @sanity/dashboardYour first Cloudflare Pages Deployment
Once installed, you should see a new "Deploy" tool in your Sanity Studio navbar.
Create a new deployment by clicking Create New.
Next, you'll be prompted to add the following:
Display Title
A name for your deployment. This can be whatever you want, to help you organize your deployments. Typically, this should be the environment you are deploying to, likeProductionorStaging.
Cloudflare Project Name
This is the actual Project Name listed in your Cloudflare account. Navigate to your Project Settings within Cloudflare Pages to find your Project Name.
Cloudflare API URL (Proxy)
This is the API Endpoint URL where the requests should be sent to by the plugin. For more information why this is necessary look at the CORS section of this README here. This can also be specified with port and must not end with a trailing slash at the end.
Cloudflare Email
The Email of your Cloudflare account. Necessary for logging in via HTTP headers.
Cloudflare API key
This is a token from your Cloudflare Account (not project). Navigate to your Account Settings, and click on show Global API Key to reveal the current key. Unfortunately, it is not possible to use Cloudflare API tokens to access the Pages API. If Cloudflare manages to implement this, just give me a hint and write me an email or open an issue so I can fix this. In the meanwhile get your Global API Key here.
Cloudflare CORS
As it is not possible to access Cloudflare Pages Deployments at the moment via API Tokens, we have to utilize the Cloudflare Global API Key which is only accessible via Email and API Key in the HTTP-Header like described here. Another problem is the missing CORS functionality when accessing the Cloudflare API. For this reason I created a minimal Cloudflare Worker script that passthroughs only the needed API-requests and sets the according CORS headers. Deploying a Worker Script is really straightforward and can also be done in the browser. A simple template from me that should do the job can be found here.
TODO:
- [ ] Automate npm publishing on git tags (automatic updates on package.json version)
License
Originally written for Vercel by:
nickdimatteo.com · Github @ndimatteo · Instagram @ndimatteo
