Indotechboy — Have your website using SSL connection yet ? Having SSL on your website / blog are becoming more and more important today. The reason? Well, websites and blogs today are growing massive like dragonfly in a summer 🐞 (can't find dragonfly emoticon in my keyboard 😝) and I'm sure not having SSL on our website can left us behind at least a bit in the competition. Moreover Google, the search engine master have signalled that website having SSL conection can earn a little bit ranking boost in SERP (Search Engine Ranking Page).

Cloudflare and https
Image credit: skylarvision@pixabay

Table of contents:

  1. Chit-chat
  2. Generate Certificate Signing Request (CSR)
  3. Generating Cloudflare SSL certificate
  4. Installing SSL certificate on your cPanel
  5. Finalizing

Although SSL certificate price are getting cheaper these day, for example at the domain registrar I use now, Namecheap offers SSL certification for a single domain website starting as low as $ 7.88/year.

But but but, if we only want to have SSL connection on our personal website / blog, why go for premium SSL if there are free SSL certificate provider out there ? Yipee 🎉.

So today, there are two best place where we can get free SSL certificate for our website / blog:

  • Let's Encrypt
  • Cloudflare

To be frank Let's Encrypt is the first best place to go for a free SSL certificate for our website. Unfortunately, it is requiring advanced knowledge (like SSH command, etc.) to applying SSL for our website from Let's Encrypt, not to mention it is a headache to do it if you have a cPanel based shared web hosting.

So, I myself finally had succesfully to installed the free SSL certificate for my personal blog from the option two above, Cloudflare.

I am using Cloudflare instead because my personal blog is hosted at cPanel based web hosting, it is way more easier than installing Let's Encrypt's SSL certificate.

Whose this tutorial for:

  1. You want to use free SSL for your website.
  2. You want to use Cloudflare SSL certificate on your cPanel based web hosting.
  3. You have configured your website domain to Cloudflare correctly. If not, you can check the tutorial (for Namecheap web hosting + domain): Setting up Namecheap's web hosting domain to Cloudflare.

Steps installing Cloudflare SSL certificate on a cPanel web hosted website

Part 1: Generate Certificate Signing Request (CSR)

First we should generate Certificate Signing Request from our cPanel that will be used when generating the SSL certificate later in Cloudflare.

  1. Login to your cPanel.
  2. Click on "SSL/TLS" menu.

    cPanel SSL/TLS menu
  3. Click on "Generate, view, or delete SSL certificate signing requests." link.

    cPanel SSL/TLS management menu
  4. Look on the "Certificate Signing Requests on Server" table. If there is one for your domain, you can click "Edit" link beside it to view your Encoded CSR. If not, then you must create a new Certificate Signing Request using the form below it.
  5. Copy the content in "Encoded CSR" column because we will need it when generating SSL certificate on Cloudflare later.

    cPanel Copy encoded CSR

Part 2: Generating Cloudflare SSL certificate

  1. Login to your Cloudflare dashboard, enter your domain configuration.
  2. On the domain list menu, click "SSL/TLS" menu, then click "Origin Server" submenu. Click "Create Certificate" button to start our certificate creation.

    Cloudflare create origin CA
  3. On the first input radio selection, choose "I have my own private key and CSR", then fill it in with the "Encoded CSR" we have copied on part 1 step 5 of the tutorial above. Scroll down and click "Next" button.

    Cloudflare paste CSR
  4. Copy the content on "Origin Certificate" column, this will be very important so make sure you have a safe copy of them.

    Cloudflare copy origin CA

Part 3: Installing SSL certificate on your cPanel

  1. Login back to your cPanel -&t; "SSL/TLS".
  2. Click on "Manage SSL sites" under "Install and Manage SSL for your site (HTTPS)" section.
  3. Scroll down to "Install an SSL Website" section. Choose your website domain, then copy the content on "Origin Certificate" we got in part 2 step 4 of the tutorial above to "Certificate: (CRT)" textarea.

    cPanel paste origin CA
  4. Next, we can click on "Autofill by Certificate" button if the "Private Key (KEY)" input has not been filled yet.
  5. Click "Install Certificate" button to finishing the SSL certificate creation process on your website.

    cPanel successfully installed SSL

Part 4: Finalizing

There are some additional steps should be taken to avoid extra errors like visitor browser will give "insecure connection" error.

Remove Origin CA certificate
  1. Login to your Cloudflare dahsboard. Next, enter your domain configuration and back again to "SSL/TLS" -> "Origin Server".
  2. Scroll down and we will see the Origin Certificate that we had generated before.
  3. Click on "✖" icon, check the confirmation box and click "Revoke" button.

    Cloudflare revoke origin CA
Uploading Cloudflare Origin CA root certificates to web server

Some origin web servers require uploading the Cloudflare Origin CA root certificate.
support.cloudflare.com

  1. Login to your cPanel and back to "SSL/TLS" ➡ "Generate, view, upload, or delete SSL certificates." menu.
  2. Scroll down to "Upload a New Certificate" section. Then, paste the following Cloudflare Origin CA — RSA certiticate on the large textarea (Note: You can find this Cloudflare Origin CA root certificate on Cloudflare's support website):

    Cloudflare Origin CA — RSA Root (click to expand)
    -----BEGIN CERTIFICATE-----
    MIIEADCCAuigAwIBAgIID+rOSdTGfGcwDQYJKoZIhvcNAQELBQAwgYsxCzAJBgNV
    BAYTAlVTMRkwFwYDVQQKExBDbG91ZEZsYXJlLCBJbmMuMTQwMgYDVQQLEytDbG91
    ZEZsYXJlIE9yaWdpbiBTU0wgQ2VydGlmaWNhdGUgQXV0aG9yaXR5MRYwFAYDVQQH
    Ew1TYW4gRnJhbmNpc2NvMRMwEQYDVQQIEwpDYWxpZm9ybmlhMB4XDTE5MDgyMzIx
    MDgwMFoXDTI5MDgxNTE3MDAwMFowgYsxCzAJBgNVBAYTAlVTMRkwFwYDVQQKExBD
    bG91ZEZsYXJlLCBJbmMuMTQwMgYDVQQLEytDbG91ZEZsYXJlIE9yaWdpbiBTU0wg
    Q2VydGlmaWNhdGUgQXV0aG9yaXR5MRYwFAYDVQQHEw1TYW4gRnJhbmNpc2NvMRMw
    EQYDVQQIEwpDYWxpZm9ybmlhMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKC
    AQEAwEiVZ/UoQpHmFsHvk5isBxRehukP8DG9JhFev3WZtG76WoTthvLJFRKFCHXm
    V6Z5/66Z4S09mgsUuFwvJzMnE6Ej6yIsYNCb9r9QORa8BdhrkNn6kdTly3mdnykb
    OomnwbUfLlExVgNdlP0XoRoeMwbQ4598foiHblO2B/LKuNfJzAMfS7oZe34b+vLB
    yrP/1bgCSLdc1AxQc1AC0EsQQhgcyTJNgnG4va1c7ogPlwKyhbDyZ4e59N5lbYPJ
    SmXI/cAe3jXj1FBLJZkwnoDKe0v13xeF+nF32smSH0qB7aJX2tBMW4TWtFPmzs5I
    lwrFSySWAdwYdgxw180yKU0dvwIDAQABo2YwZDAOBgNVHQ8BAf8EBAMCAQYwEgYD
    VR0TAQH/BAgwBgEB/wIBAjAdBgNVHQ4EFgQUJOhTV118NECHqeuU27rhFnj8KaQw
    HwYDVR0jBBgwFoAUJOhTV118NECHqeuU27rhFnj8KaQwDQYJKoZIhvcNAQELBQAD
    ggEBAHwOf9Ur1l0Ar5vFE6PNrZWrDfQIMyEfdgSKofCdTckbqXNTiXdgbHs+TWoQ
    wAB0pfJDAHJDXOTCWRyTeXOseeOi5Btj5CnEuw3P0oXqdqevM1/+uWp0CM35zgZ8
    VD4aITxity0djzE6Qnx3Syzz+ZkoBgTnNum7d9A66/V636x4vTeqbZFBr9erJzgz
    hhurjcoacvRNhnjtDRM0dPeiCJ50CP3wEYuvUzDHUaowOsnLCjQIkWbR7Ni6KEIk
    MOz2U0OBSif3FTkhCgZWQKOOLo1P42jHC3ssUZAtVNXrCk3fw9/E15k8NPkBazZ6
    0iykLhH1trywrKRMVw67F44IE8Y=
    -----END CERTIFICATE-----
  3. Click "Save Certificate" button to save it.

Done! Now our website connection is encrypted using Cloudflare SSL! The SSL even support for wildcard domains, so even whether we later create blog.mydomain.com or bio.mydomain.com, etc., Cloudflare is ready to encrypt the website connection!

Just to make sure, don't forget to set the "SSL/TLS encryption mode" in your Cloudflare's domain to Full or Full (strict). You can find the configuration on your Cloudflare domain configuration dashboard ➡ "SSL/TLS" ➡ "Overview".