loading...
Cover image for Adding SSL to Your Site (Free!)
Right From Basics

Adding SSL to Your Site (Free!)

harishv7 profile image Harish Updated on ・2 min read

Hosting (5 Part Series)

1) Getting a Free Domain For Students 2) Hosting with GitHub Pages 3) Connecting Namecheap Domain with GitHub Pages 4) Adding SSL to Your Site (Free!) 5) HTTPS – What’s the Big Deal?

SSL Error Message

Seen the error image before?

This happens when you visit my personal website, harishv.me, with a www in front. This redirects to https://harishv.me and all you will see is this ERR_SSL_PROTOCOL_ERROR as the site is unable to provide a secure connection.

If you are using a normal GitHub Pages site, which means it has a domain that has .github.io, you can simply go to the GitHub repository you are using, click settings, go all the way down till you see Enforce HTTPS. Clicking this will mean that your site will always be served over HTTPS.

When researching free SSL options to add onto my website, I found that you can actually use Cloudflare’s name servers under their free plan to obtain a SSL certificate for your website.

Simply,

  1. Create a Cloudflare account
  2. Allow Cloudflare to scan your website records
  3. Check and verify that the automatically generated records by Cloudflare matches with those on your registrar’s page (in my case, this is Namecheap.com)
  4. Cloudflare will now give you 2 nameservers to add into your account
  5. Login to Namecheap
  6. Click on Domains List
  7. Select the domain you want to add SSL for and click on Manage at the right side
  8. Under nameservers, copy and paste the 2 nameservers Cloudflare gave you
  9. Once done, on Cloudflare’s Overview tab, click on Recheck Nameservers

Cloudflare also offers up to three page rules in the free plan. With this, we can always enforce a `https on our website. To do that,

  1. Click on the Page Rule tab at the top in Cloudflare
  2. Enter this: http://*<your-domain-name>.com/*
  3. Add the settings to be Always Use HTTPS
  4. Click on Save and Deploy

The asterisks are like wildcard patterns which means any URLs entered in that format will be enforced to utilise HTTPS connection. For example, www.harishv.me or http://harishv.me/blog will all now be enforced with HTTPS.

That’s all folks. Get your free SSL certificate with Cloudflare now!

P.S. If you’re wondering why is HTTPS that big of a deal, wait a few days for my next article on HTTPS - What’s the Big Deal?.


Looking for Hosting?

Both services offer great uptime and customer service. Oh did I mention - you get a free domain name with both Bluehost and Hostinger!

Hosting (5 Part Series)

1) Getting a Free Domain For Students 2) Hosting with GitHub Pages 3) Connecting Namecheap Domain with GitHub Pages 4) Adding SSL to Your Site (Free!) 5) HTTPS – What’s the Big Deal?

Posted on by:

harishv7 profile

Harish

@harishv7

Passionate hacker + Chai addict

Right From Basics

Right from Basics (RFB) is a platform that introduces the world of programming to a newbie.

Discussion

markdown guide