tinyapps.org / blog

Migrating from Netlify to Cloudflare Pages #

After almost 5 years of hosting at Netlify (at $9/month for basic, anonymized analytics), just moved to Cloudflare Pages after reading this r/webdev post:

Netlify just sent me a $104K bill for a simple static site

along with the related HN comments.

The previous server migration, from Slicehost/Rackspace to Netlify, had been largely to avoid just such unlimited billing exposure.

Notes

• Custom apex domains require moving Name Servers to Cloudflare DNS.

• Trailing exclamation marks in _redirects need to be removed for the redirects to work in Cloudflare Pages.

• Cloudflare Pages forcefully strips .html extensions, though an option for their preservation was promised in June 2022. UPDATE: For now, have settled on doubling .html extensions (except for index.html pages) to prevent the 308 redirects to extensionless pages.

• Disabled "Email Address Obfuscation" in Cloudflare dashboard → tinyapps.org → Scrape Shield to prevent HTML validation errors (e.g., "there is no attribute 'DATA-CFEMAIL'" and remove unwanted JavaScript (email-decode.min.js) from being served.

• Redirect www to non-www (H/T cloonan & Rickard):

  1. "Create a DNS record for the www subdomain. It must either be an A record with the 192.0.2.1 value or an AAAA record with the 100:: value. The new DNS record must also have Cloudflare’s proxy enabled (orange-clouded) so that it can enact the Page Rule behavior that you will create next."
  2. Cloudflare dashboard → select domain → "Page Rules" → "Create Page Rule"
  3. "URL (required)" → www.example.com/*
  4. "Pick a Setting (required)" → "Forwarding URL"
  5. "Select status code (required)" → "301 - Permanent Redirect"
  6. "Enter destination URL (required)" → https://example.com/$1
  7. "Save and Deploy Page Rule"

• Disable access to *.pages.dev subdomain:

  1. "Use Cloudflare Access over your previews (*.{project}.pages.dev). Refer to Customize preview deployments access.
  2. Redirect the *.pages.dev URL associated with your production Pages project to a custom domain. You can use the account-level Bulk Redirect feature to redirect your *.pages.dev URL to a custom domain."

• Prevent your pages.dev deployments showing in search results:

  "Google and other search engines often support the X-Robots-Tag header to instruct its crawlers how your website should be indexed. For example, to prevent your *.pages.dev deployment from being indexed, add the following to your _headers file:"

  https://:project.pages.dev/*
X-Robots-Tag: noindex

• After deleting the Netlify site, revoke their access to any connected GitHub repository via GH account settings → Applications → Installed GitHub Apps.

Related

• Migrating from Netlify to Pages

• Moving from Netlify to Cloudflare Pages

/misc | Feb 26, 2024

Subscribe or visit the archives.