CloudFlare is a cloud content delivery network service. At Weberest we recommend using this service for your website for multiple reasons:
- Speed – having your website distributed to multiple services around the word will speed up the delivery of content to the user based on their location. The used will load the website from a server that is closest to them. ClouldFlare will distribute the website on more than 160 servers around the word.
- Blocking hack attempts – ClouldFlare is filtering all suspicious traffic to make sure unwanted bots and hackers will have a hard time loading your website.
- Prevent DDOS attacks – Make sure your websites does not go offline because of Denial of Service attacks.
- And more
Here is how to set it up:
Backup the database
Back up the database either manually (by logging into PHPMyAdmin) in the website’s host, or you can do it by using the WordPress plugin UpdraftPlus.
After creating the backup download the database to your local PC to have it in case something goes wrong.
Install wordpress plugin
The first step is to install this plugin to the wordpress site: CloudFlare Flexible SSL. It is very important to install and activate this plugin before changing the DNS namesevers. Otherwise you will be locked out of the admin due to redirects.
Setup a cloudflare account
Creating an account
Create an account at https://www.cloudflare.com/. Afterwards add the website’s URL. Select the Free Website option.
Copy cloudflare DNS nameservers
You will get a similar notice with the nameservers that you need to change:
|
Current Nameservers |
Change Nameservers to: |
|
ns.inmotionhosting.com |
zara.ns.cloudflare.com |
|
ns2.inmotionhosting.com |
zod.ns.cloudflare.com |
Please note: Your nameservers might be different so do not copy and paste the ones listed here!
Change the nameservers of the domain
You need to log into your hosting (in this case its inmotionhosting.com) and change the nameservers of the website to the new nameservers, which cloudflare uses to route your users to increase loading speed.
So you just need to change the current nameservers (in this case ns.inmotionhosting.com and ns2.inmotionhosting.com) to the cloudflare servers (in this case zara.ns.cloudflare.com and zod.ns.cloudflare.com)
It might take up to 24 hours for the nameservers to change, but it usually happens quicker. You can enter your domain here to check if the nameservers have changed: https://whois.icann.org/en/lookup?name=
Enable Cloudflare SSL
Check status in Cloudflare
Go back to the Cloudflare account and log in. When the nameservers change you will see Status: Active in the Cloudflare admin panel. This means that the website is currently using the Cloudflare CDN (Content Delivery Network) to load your website to users.
Next step is to activate the HTTPS certificate and make the website secure using SSL.
Enable Flexible SSL
In the Cloudflare admin panel click on the Crypto tab. There you will find the SSL section and a dropdown to the right. Make sure that the dropdown selects Flexible.
Enable HSTS
Important: Only after you have confirmed that your site is fully functional with HTTPS-only enabled, you can take it a step further and enable HTTP Strict Transport Security (HSTS).
HSTS is a header that tells browsers that your site is available over HTTPS and will be for a set period of time. Once a browser sees an HSTS header for a site, it will automatically fetch the HTTPS version of HTTP pages without needing to follow redirects.
HSTS can be enabled in the crypto app right under the Always Use HTTPS toggle. You can read here more about HSTS.
When enabling the HSTS set the max-age to 6 months.
Change site URL in WordPress admin
Before doing this step, please make sure that the website is working with HTTPS and it is showing Status: Active in the cloudflare admin. Otherwise you might get locked out of the admin.
Log into the WordPress admin panel and go to the main Settings and change the WordPress Address and Site Address fields to the https version (example from http://www.mysite.com to https://www.mysite.com)
Fix insecure content
Edit database links to HTTPS
Important: Before executing this step, please make sure you’ve backed up your database and files on the server.
Download and install the plugin “Better search and replace” from here: https://wordpress.org/plugins/better-search-replace/
Activate the plugin and then go to Tools > Better Search Replace.
In the Search for field fill in the following:
http://yoursitenamehere.com
In the Replace with field fill in:
Select all database tables by clicking on the first then while holding SHIFT click on the last they and they should all select.
Please change yoursitenamehere.com with your actual domain, do not copy the code above as it is. The only difference between the two lines is the S in HTTPS.
First make sure that the Run as dry run? Checkbox is selected. And press the Run Search/Replace button. This will allow you to see which tables will be affected with the operation.
If everything seems ok, remove the checkmark and click the Run Search/Replace button again.
This will make sure no insecure content is loaded on the page and that all resource will be loaded via HTTPS.
Check for insecure content
To make sure that all content is loaded over HTTPS, do a ScramingFrog crawl. Insert the HTTPS url in the software and start the crawl.
After it finishes, click on Reports > Insecure Content to generate a report of the pages that have content loaded via HTTP. If there are any pages with insecure content, investigate where they are loaded in each page and change their addresses to either relative links or to links with HTTPS.
It’s possible that some background images are loaded using HTTP from the CSS styles of the website. These will not change by the Search and Replace operation, since CSS files are not loaded from the database. If insecure content is loaded from the CSS, edit the links to either relative paths or paths with HTTPS.
Check for double redirects
Each time a redirect is done, the SEO value of a link decreases by about 15%. Let’s think of the following scenario.
Let’s say you have a link from another site to your site and it is http://yoursite.com
But you want the main version of your site to be https://www.yoursite.com (https because you’d like to have SSL security and to have www)
When you activate the Flexible SSL from cloudflare, it’s very likely that the original link will redirect twice rather than once:
http://yoursite.com —> https://yoursite.com —> https://www.yoursite.com
So in this case instead of losing 15%, you would lose 30% of your SEO link juice. Luckily there is a way to avoid that.
Go to the CloudFlare admin panel and click on “Page Rules”. You will notice that you have 3 free page rules to use, which is exactly how much you need.
So we will be creating 3 page rules as follows:
Add a page rule and in the field “If the URL matches” you will be entering a variation of your domain (for example http://yoursite.com/*)
Important: Please note that the URL finishes with an asterisk * symbol so that the redirect would work with all internal URLS on the domain.
Then click the “Add a Setting”, select Forwarding URL and “Select Status Code” to 301 – Permanent Redirect. Then enter in the “Destination URL” the main URL you’d like to use (in our case https://www.yoursite.com/$1)
This time by using the $1 in the Forwarding URL, it makes the same redirect to the right internal URL destination.
These are the 3 page rules in our case:
If the URL matches (new page rule for each one):
http://yoursite.com/*
http://www.yoursite.com/*
https://yoursite.com/*
Destination URL (the same for all page rules):
https://www.yoursite.com/$1
Now open the Chrome Console by inspecting an element or CTRL + SHIFT + I on Chrome on Windows. Go to the Network tab and enter each one of the domain variations that need to be redirected. See how many 301 redirects you get, if it is only 1 than you’ve done it right, if they are 2 it means that something went wrong, so try the process again.
Configure the Search Console
Claim the new HTTPS addresses in the console
Go to the Google Search Console and claim the version of your site with HTTPS://www.mytestsite.com (with HTTPS and WWW) and HTTPS://mytestsite.com (HTTPS without WWW).
In the search console go to Site Settings and make sure that the correct preferred domain is selected (either with or without WWW). You can see how the website is loading at the moment (with or without WWW) and set it as that.
Upload the new HTTPS sitemap
Find the updated XML sitemap of the website (usually created by the Yoast SEO plugin) and usually found in https://mytestsite.com/sitemap_index.xml
Having found the XML sitemap, go to the main version of the domain in the search console (HTTPS with or without WWW based on the preferred domain) and add the sitemap there. It is important to add the updated sitemap to the correct preferred domain version to tell Google which the main version of your site is.
Great job, you’ve successfully migrated a website to the SSL secure certificate.
