logomichael sumner
Contact
AWWWards Nominee — Michael Sumner
Special Kudos Award Badge

How to add CloudFlare SSL (Flexible)

Reasons you’ll want to use the CloudFlare SSL (Flexible SSL):

  • You’re left with no options of migrating to a new hosting provider which could provide you with a free SSL (like they couldn’t let you install Let’s Encrypt!)
  • You want a quick SSL because eBay said so. And you want to do it quickly within 3 hours, rather than having to go through the hassle of migrating to a new hosting provider.
  • You want to host your files on a server that has HTTP/2, and many other great benefits of new web technology! (of course, for free rather than using a VPS)
  • Anything in between, like these reasons found on CloudFlare’s site (see ‘Benefits to Your Customers’).

If any of these mean near and dear to you especially to optimise loading speed times quickly and with a great improvement, you’ll want to make use of CloudFlare.

There’s currently no disadvantage to committing to a Flexible SSL, except that you will notice your certificate has other random websites since this is a shared SSL certificate.

Not to worry though, unless you are an eCommerce website, you might want something more professional like an EV SSL or a TLS certificate that provides you cover for any security mishaps.

Add the domain to Cloudflare

  1. First, let’s add a site on CloudFlare. Login to Cloudflare and click ‘Add a Site’.
  2. Use the domain name so e.g. https://blog-internal.sumner.co.uk/ would become sumner.co.uk
  3. Wait for the scanning to complete; if possible you can click ‘Continue Setup’. CloudFlare will now list all the DNS records for that domain.
  4. Double check to make sure it’s all perfect, so that CloudFlare will use these on its server.
  5. Click ‘Continue’.
  6. Select ‘Free Website’, and continue.

Update your nameservers to Cloudflare’s nameservers

  1. Now, We’ll be changing the nameservers to what was listed on CloudFlare
  2. Login to your domain hosting provider and change to the Nameservers as found on Cloudflare e.g. lina.ns.cloudflare.com.
  3. If you aren’t sure how to edit your nameservers, please feel free to contact your domain hosting provider and provide them the 2 nameservers given from Cloudflare.
  4. Once you’re done updating to the new CloudFlare nameservers, you will begin to immediately see the propagation take place. Your website will not go down, since CloudFlare is using your exact same DNS records.
  5. You can check if CloudFlare’s nameservers are showing up here: https://www.whatsmydns.net/
  6. Type in your domain name e.g. sumner.co.uk and Choose ‘NS’, and click ‘Search’.

Now, we’ll have to setup the actual SSL of Cloudflare’s!

Setup the ‘Flexible SSL’

  1. Now, what’s most important is to check that the ‘Flexible SSL’ is done being issued.
  2. On your CloudFlare page, on one of the icons, click ‘Crypto’.
  3. And we’ll have to choose the ‘Flexible’ option.
  4. The issuing would take around 7 minutes. Once the blue text ‘issuing certificate’ becomes the Green Status ‘Active Certificate’, your certificate has now been issued as Flexible SSL! See here for the reason we need to choose Flexible SSL.

We got the site’s SSL working when we visit it’s https:// version. Check!
Now it’s time to implement the https:// version across the website.
And also any related apps which you’ll need to update to https://… like Google Analytics, or your Facebook page ‘website URL’. You might want to download Screaming Frog.

Perform an HTTPS migration

  1. Before we change to HTTPS, first do a Screaming frog ‘Crawl’.
  2. Next, Once we can test our website is working on HTTPS, we can install the plugin ‘CloudFlare Flexible SSL’ for WordPress before we make the actual changes to https version.
  3. Now we’ll change the URLs to HTTPS across the website, so that we’ll not get mixed content.
  4. Install a find-replace plugin like ‘Better Search Replace’ for WordPress, to find all instances of http://www.yoursite.com and replace with https://www.yoursite.com.
    It’s recommended to do a database backup before this.
  5. Once again, perform a Screaming Frog crawl of the website, to check that we don’t have any more remaining http:// left on the website and that any have been redirected to https.
  6. And finally, we’ll update our external apps like Google Search Console, and Google Analytics by adding/updating these to HTTPS properties.
  7. Hey, we’re Done!

I’d highly recommend the use of CloudFlare if you have a simple website but don’t have the quick option to install Let’s Encrypt Open SSL, nor do you have a CDN to host such files from.

Through the use of the CloudFlare reverse-proxy (that’s what happened when CloudFlare used your DNS records and told you to change to their nameservers), you’ll be hosting the files normally as you would do without any of these changes, but you get the protection/shield from CloudFlare like a Firewall too, and anti-DDoS attacks!

If you like this post please see my other articles like here about the Insights of Superabundance — as a Web Developer (of course!).

Please let me know in the comments how you setup CloudFlare, like any additional features you use probably for WordPress websites as well?