Last active
April 5, 2020 15:08
-
-
Save dougg0k/41306d5cef6a9c22d68b919b56da67ac to your computer and use it in GitHub Desktop.
A way to use Cloudflare CDN with Netlify
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1- Create Github account. | |
2- Create your private repo and push your files. | |
3- Login into Netlify with Github and add your repo there. | |
4- Given that you have your netlify.toml in your project already configured. Keep Post Process disabled. | |
5- Add your domain to Netlify, but do not configure the DNS nor Alias. | |
6- Create a Cloudflare account. | |
7- Add your domain there and configure the DNS to theirs where you bought your domain. | |
8- Configure the DNS adding CNAME @ with generated Netlify URL from your project in target and CNAME www with @ in target. Both with orange cloud activated (proxified). | |
9- SSL > Full. | |
10- Speed > Optimization, Activate Brotli and Rocket Loader and Minify all 3 options. | |
11- Caching > Browser Cache TTL to Respect Existing Headers and Always Online to ON. Given that you are setting the s-max-age header in the netlify.toml file in your project. | |
12- Network > Activate HTTP/3 and 0-RTT Connection Resumption. | |
13- Scrape Shield > Activate all 3 options. | |
14- Create a Integromat.com account, or use another similar service. | |
15- Create a Scenario with a WebHook and point to a HTTP Request and configure based on the steps below. | |
16- Add the Webhook url to Netlify as Deploy is Successful. | |
17- Wait for some time for the DNS to take effect. | |
18- Done. | |
Make sure you are using proper CSP headers to have certain Cloudflare features working. | |
https://support.cloudflare.com/hc/en-us/articles/216537517-What-is-Content-Security-Policy-CSP-and-how-can-I-use-it-with-Cloudflare- | |
Cloudflare Purge Cache Steps - Http Request: | |
1) Create a new webhook | |
2) Set URL method as DELETE and value as https://api.cloudflare.com/client/v4/zones/<ZONE_ID>/purge_cache. You can find the Zone ID in the Overview page of your site in Cloudflare. | |
3) Set triggers and filters. (Depends on the Service used) | |
4) Add customer headers X-Auth-Email and X-Auth-Key. The values are your Cloudflare account e-mail and main API key, which can be found in My Profile --> API Keys. | |
5) Set Content type as application/json. | |
6) Check Automatically compute the value of the Content-Length header. (Depends on the Service used) | |
7) Select Customize the webhook payload and set the following payload: | |
{ | |
"purge_everything": true | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment