Free SSL Certificate (HTTPS) For Website With CloudFlare

Scenario: you have been developing a website for quite sometime now. However, it is still serving via port 80 (or regular http). You would like to upgrade to port 443 https because it will boost your SEO and make your clients feel safe when they visit your page. Of course you don't want to pay for the SSL Certificate nor go through the troubles installing it (generate CSR, Private Key, etc.) on your server. This tutorial will teach you how to upgrade to https the EASY way for FREE using CloudFlare.

Prerequisites: Glossary:

Chapter 1: Create a CloudFlare account & add your website

  1. Go to cloudflare.com and click Sign Up.
  2. Fill in all the required info and click Create Account.
  3. Enter your domain name and then click Begin Scan.
  4. The DNS Scan will take about 60 seconds. Once it has finished, click Continue.
  5. All of your DNS records are displayed. If there is any missing, you can add them here. Then, click Process and Continue.
  6. You will get 2 CloudFlare nameservers. Save these nameservers somewhere.
    Example: john.ns.cloudflare.com, nora.ns.cloudflare.com.
  7. Go to your domain provider (e.g. GoDaddy, Network Solution, InternetBS, etc.). I will demonstrate the rest of the chapter using InternetBS.
  8. Login to your InternetBS account and select your domain name.
  9. Click Update DNS List.
  10. Fill in the Nameservers column with the 2 nameservers from step 6. Leave the IP column empty. Then, click Save.

Note: It might take up to a few hours (but usually only 5 minutes) for your domain to propagate and update. You can check DNS Propagation at whatsmydns.net.

Your website is now officially on CloudFlare. You can check out other benefits that CloudFlare provides HERE. For a more in depth tutorial on CloudFlare, check out this article.

Chapter 2: Turn on SSL

Your domain must be Active on CloudFlare before you can start this chapter. If it is still Pending, please wait a little bit longer.

  1. Go to cloudflare.com and Login.
  2. Click on your domain name.
  3. Click on Crypto.
    CloudFlare Crypto
  4. In the SSL section, select Flexible.
    CloudFlare Crypto Flexible
  5. Your website is now secured and can be access via https. You can check by adding https:// at the beggining of your domain.
    https

Note: If you don't see HTTPS Secured Lock, but instead Not Secure or Not Secure, that means your webpage contains non-https resources such as CSS, JavaScript, Image, etc. See the examples below to fix this problem.

  <link rel="stylesheet" href="http://yourdomain.com/css/style.css">
  <link rel="stylesheet" href="https://yourdomain.com/css/style.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

Chapter 3: Redirect your domain from http to https

Now that you can access your domain via both http and https, you probably want to redirect all your traffic to the secured port. There are many ways to do this such as modifying php header, javascript protocol detection, .htaccess redirect, etc. In this chapter, we will use CloudFlare's Page Rules method.

  1. Go to cloudflare.com and Login.
  2. Click on your domain name.
  3. Click on Page Rules.
    CloudFlare Page Rules
  4. Click Create Page Rule.
  5. Under If the URL matches, type in your domain name in the following format: http://*yourdomain.com/*
    Example: http://*breakproject.com/*
  6. Under Then the settings are, select Always Use HTTPS.
    CloudFlare Always Use HTTPS
  7. Close your browser, wait for a few minutes, clear cache, then visit your website.

That's it! Your website is now secured and ready to gain more business. If you find this tutorial useful, please share and subscribe to our Fan Pages. Also, feel free to leave me any feedback in the comment section below.

An Do By An Do
11/28/2016

Copyright © Break Project 2014