Cloudflare
Cloudflare

 

Cloudflare is probably one of the most accessible Content Delivery Networks out there. Check out their plans here. I’ve had the chance to test their free plan both on static websites and Content Management Systems such as WordPress. In this post, I’ll explain how I set it up with my WordPress blog and I’ll share the problems I had in the process.

Key benefits

Their infrastructure:

  • Compresses, caches and minifies your assets for faster load time
  • Hosts your content closer to your audience through its worldwide CDN
  • Handles HTTP/2 for compatible browsers
  • Manages your DNS settings
  • Encrypts client-server communications using SSL
  • Protects your site from DDoS attacks
  • Handles page redirects
  • … and more

All the features listed above can be used for free.

Configuration

To setup Cloudflare on your website, you have to do a few things.

  1. Go to Cloudflare, create an account and enter your domain name.
  2. Cloudflare will give you a list of nameservers. Once you have them, go to your domain registrar page and replace your current nameservers for Cloudflare’s nameservers.
  3. Once your domain name registrar has saved your new nameservers, go back to Cloudflare and continue the installation process
  4. That’s it! Your traffic will now¬†go through Cloudflare’s system.

Challenges

#1 Jetpack & Cloudflare

Depending on your setup, Cloudflare might block Jetpack from communicating with your WordPress’ backend. Here’s what I had to do to solve the issue:

1. Create a PageRule on Cloudflare to exclude WordPress’ dashboard from Cloudflare

2. Enable Cloudflare’s “Flexible SSL” option

Screen Shot 2017-08-07 at 9.56.04 PM.png

3. Install and activate Cloudflare’s WordPress plugin

4. Install the Cloudflare Flexible SSL plugin

5. Enable administration over SSL by adding the following to your wp-config.php file

/**
* Admin over SSL
*/
define(‘FORCE_SSL_ADMIN’, true);

6. Set the port to 443 (the port through which Jetpack communicates) by adding the following to your wp-config.php file

/**
* Set port to 443
*/
$_SERVER[‘SERVER_PORT’] = 443;

7. On your WordPress admin panel: change both your site address and WordPress address to HTTPS

8. Create a Cloudflare PageRule to redirect all your HTTP traffic to HTTPS

I initially thought that whitelisting Jetpack’s service IP on Cloudflare would solve the problem but Jetpack uses the following IP range 192.0.64.0/18, and Cloudflare doesn’t allow the /18 notation.

Closing comments

  • Don’t be surprised if Cloudflare doesn’t work right after the DNS setup. Propagation takes a while.
  • They have a handy “development mode” that pauses Cloudflare and directs all traffic to your origin – this is helpful when making changes on your website.

For those of you who’d prefer using AWS with their WordPress site, I’ve written a post on Amazon S3 and Cloudfront.