Adding HTTPS in your personal website is a good niche. It create additional security and trust to your personal website. Based on Google it is not possible to create HTTPS directly if you are using CNAME redirect. Below is Google troubleshooting regarding HTTPS:
HTTPS serving Issue: I want my content served through HTTPS.
Solution: While you can serve your content through HTTPS using direct URIs such as https://storage.googleapis.com/my-bucket/my-object, when hosting a static website using a CNAME redirect, Cloud Storage only supports HTTP. If you want to serve your content through a custom domain over SSL you can:
- Set up a load balancer.
- Use a third-party Content Delivery Network with Cloud Storage.
- Serve your static website content from Firebase Hosting instead of Cloud Storage.
They gives us an option to use HTTPS by using third party CDN. The easiest way is to use Cloudflare. Below are the things I did to enable HTTPS in Cloudflare.
1. Signup to Cloudflare#
Go to the signup page and create an account. This step is really stright forward so I will not explain any further.
2. Change your Domain Nameserver#
Now it depends on your domain name provider. Before you change your Nameserver just make sure your domain is not locked. Otherwise you will go nuts trying to change your Nameserver and it always go back to your original name server. If you want to check your current Nameserver you can use ICANN Lookup. You need to be patient because the changes for Nameserver require several hours.
3. Set HTTPS settings#
Once your domain verified by Cloudflare, you would be able to set SSL/TLS. On the Overview tab select the Flexible.
We wont be able to create Full HTTPS because Google Cloud Storage only serve HTTP. Next we need to enable Always use HTTPS in Edge Certificates. After you enable it, any HTTP request will be redirect to HTTPS.
4. Enable static HTML content cache#
By default Cloudflare does not cache static HTML content. Go to page rules and add a rules to cache everything on your website.
5. Additional settings#
There are 3 additional settings that I think are important. They are:
- Minify settings (for speed up page loading)
- Compression settings (reduce bandwith)
- Always On settings (if Google Storage Cloud are down or miss configuration on server side)
Thats all my settings for this website. If you have any feedback just let me know on the comment section below.
