Posts

wordpress fast and secured

How to setup Cloudflare free CDN and SSL in WordPress

This tutorial will guide you on how to setup Cloudflare in WordPress and how CDN makes your site load faster and more secured through SSL technology on your WordPress website.

Step 1: Setup your site to Cloudflare.

If you do not have yet your site configured to Cloudflare you might want to read our step by step tutorial on how to setup Cloudflare CDN to your website. This will thoroughly guide you in setting up your website to Cloudflare.

Step 2: Get a free SSL certificate from Cloudflare.

Applying for an SSL certificate from Cloudflare is easy and it’s free, you may read this tutorial for detailed instructions on how to get free SSL certificate from Cloudflare.

Step 3: Install the Cloudflare plugin.

Hover to Plugins, then click Add New.

On the search box enter the phrase cloudflare.

On the results find the plugin Cloudflare authored by the Cloudflare team and click Install Now.

cloudflare plugin
Picture 3.1. Finding and installing the Cloudflare plugin.

Using the same phrase in the search box, you may see the plugin Cloudflare Flexible SSL by iControlWP. Install this plugin also.

flexible ssl plugin
Picture 3.2. Finding and installing the Cloudflare Flexible SSL plugin.

This will allow your WordPress website to be accessed with an https rather than http and it prevents redirection loop from http to https to http and so on.

Step 4: Activate the plugins.

Go to Plugins and make sure that both plugins are activated.

activated plugins
Picture 4.1. Make sure that both plugins are activated.

Step 5: Configure the Cloudflare plugin.

Hover over Settings, then click Cloudflare.

Since we already have an account as given in Step 1, we would choose Sign in rather than Creating an account.

sign in form
Picture 5.1. Cloudflare plugin sign in form.

The email address that is asked was the email address that you have used during the sign-up process in Step 1.

To get your API key, login to your Cloudflare account.

Click on the email address on the upper right then click My Profile.

Scroll down a little bit, and you will see the View API Key button and click it.

cloudflare api key
Picture 5.2. Getting your Cloudflare API Key.

You will be prompted for your password, enter your password and copy the text you can see and paste it the API key textbox in your Cloudflare plugin on your WordPress website.

Then click, Save API Credentials.

Your Cloudflare settings will be up to your own preference, but I would recommend that you click Apply on Optimize Cloudflare for WordPress and toggle the Automatic Cache Management to On.

cloudflare plugin settings
Picture 5.3. My Cloudflare plugin settings.

That’s it, you have successfully configured Cloudflare free CDN and SSL to your website. Just tweak some of the settings and find the best for you.

But we recommend that if you are a heavy user that you upgrade Cloudflare plans to paid version for more options and better performance and security.

How to get free SSL certificate from Cloudflare

In this tutorial, I’m going to show you how to get a free SSL certificate from Cloudflare. This will turn your website from http to https making it more secure, reliable and more trusted among your users.

What is SSL?

SSL (Secure Sockets Layer) is a standard security used for establishing an encrypted link between a web server and a browser. This ensures that all data passed between the web server and the browser remain private and secured.

Why use SSL?

The main reason to use SSL is to keep sensitive information sent across the internet to remain private and encrypted that only the intended recipient will be able to decode it.

Another reason is that users will completely trust your website especially if it handles sensitive pieces of information such as credit card information.

Step 1: Login to your Cloudflare account.

Head over to the official website of Cloudflare and click Log In in the top menu.

If you don’t have a Cloudflare account yet, you might want to read the tutorial how to setup Cloudflare CDN to your website to setup your website to Cloudflare.

Step 2: Apply for an SSL certificate.

From the overview tab, you should see the menus on the top and click Crypto.

cloudflare overview
Picture 2.1. Cloudflare Overview

On the SSL menu, select Flexible from the drop-down settings. If you’re applying for the first time this process should take at least 24 hours to be completed.

On this example, we already have a Flexible SSL certificate and it is already active.

free ssl
Picture 2.2. Applying for free SSL certificate.

Step 3: Force your website to always use https.

On the menus on the top, click Page Rules.

Click Create Page Rule.

cloudflare page rules
Picture 3.1. Cloudflare Page Rules

On the url textbox enter your domain name with the pattern like I have in the picture.

This is a url pattern that will force all pages on your website to be accessed with https instead of unsecured http.

page rule
Picture 3.2. Adding a page rule.

On the bottom part, click Add a Setting. From the drop-down menu select Always Use HTTPS then click Save and Deploy.

page rule
Picture 3.3. Saving the page rule.

Now open your website and you should be able to access it with https and a green lock. If you are getting an error saying that it is not secure. Don’t worry, sometimes it just takes a while for it to be completed.

You should be able to access it with https sooner or later.

no ssl
Picture 6.1. Before (Accessing lccmdormitory.xyz from Google Chrome with no SSL certificate)
with ssl
Picture 6.2. Before (Accessing lccmdormitory.xyz from Google Chrome with SSL certificate)

If you are not sure if you have configured it correctly you may head to SSL Shopper – SSL Checker and enter your domain name and click Check SSL. You should have a result something like this.

ssl checker result
Picture 4.3. SSL Checker by SSL Shopper result.

You can also use this site to check mixed content as page rules will not going to correct it for you. This should help for you to identify what mixed content should be changed.

That’s it, you have now gotten a free SSL certificate from Cloudflare. This should help with encrypting sensitive data on your website.

setup cloudflare

How to setup Cloudflare CDN to your website

This tutorial will guide you to setup Cloudflare CDN to your website. This aims to share the knowledge about CDN and why you should use it.

What is CDN and why should I use it?

CDN (Content Delivery Network) is a system of distributed servers across the globe.

Websites use CDN to minimize the distance of the visitors to your website’s server. An example if your website host is in the United States while your visitor is in the Philippines, it will take a longer time to deliver content from the United States to the Philippines rather than China to the Philippines.

The goal of CDN is to distribute your content to different servers and data centers around the globe. So if your website is accessed from the Philippines then the content will be coming from the nearest server rather than getting the same content from a farther server.

Step 1: Create a Cloudflare account.

Go to the official Cloudflare website and click Sign Up on the menu bar. Fill up the required fields in the form and click Create Account.

cloudflare website
Picture 1.1. Cloudflare Website
cloudflare registration
Picture 1.2. Cloudflare Registration Form

Step 2: Add your domain name to Cloudflare.

After you have successfully registered to CloudFlare, you will be asked to enter the domain name of your site. For this example, I will use lccmdormitory.xyz as the domain name. After entering your domain name click the Add Site button.

add your site
Picture 2.1. Adding your website to Cloudflare.

Step 3: Select a Plan

You have to select a plan of your choice, for this example, I will pick the FREE Plan with $0/month.

cloudflare plans
Picture 3.1. Select a Plan for your website.

Step 4: Set up DNS records to be protected by Cloudflare.

Toggle all gray icons to allow Cloudflare to protect them.

dns records
Picture 4.1. Before (Some DNS records are not protected by Cloudflare)
dns records protected by Cloudflare
Picture 4.2. After (DNS Records are now protected by Cloudflare)

Step 5: Point your nameservers to Cloudflare nameservers.

Each hosting server has their own nameservers. For this example, I host my site in freehosting.com so my nameservers point to their server and we need to change this to point it to the Cloudflare servers.

Not sure on how to change your name server? Here are the tutorials from some domain name registrars. If your domain name registrar is not on the list you may consider contacting your provider or open a support ticket to help you out.

changing nameservers to cloudflare
Picture 5.1. Pointing the nameservers to Cloudflare

My domain name is registered on Hostinger so I should follow the steps they have given.

current nameservers
Picture 5.2. Finding my nameservers.

I copied the nameservers from Picture 5.1 to replace my current nameservers. After that, click the Update button.

cloudflare nameservers
Picture 5.3. Replacing my current nameservers to Cloudflare nameservers.

Go back to the Cloudflare website as seen in Picture 5.1 and click Continue.

Note:

It may take up to 72 hours for your DNS to propagate worldwide. Propagation happens whenever you change your nameservers, during the propagation it may work on some machines. Once it has been completed you should receive an email from Cloudflare. You may also check the status on Cloudflare website. This process is safe and your website will not face any downtime while being processed.

Just wait, wait and wait. If the process has been completed and successful, the overview of your website should look like this.

success website
Picture 6.1. A website successfully configured on Cloudflare.

Here is a test from webpagetest.org on our example site lccmdormitory.xyz where it presents the before and after configuring Cloudflare to our website.

no cloudflare cdn
Picture 6.2. Before (No Cloudflare CDN)
with cloudflare cdn
Picture 6.3. After (Successfully configured Cloudflare CDN)

That’s it, you have now configured your site to the Cloudflare CDN. You should experience faster loading times and improved security.