HTTPS on Blogger (Yes, you really can do it.)

Having HTTPS on all of my webpages is something that I aim for, even if it's not required. It's always better to have encryption and not need it, rather than needing it and not having it. There's also the benefit of Google ranking HTTPS higher, so it gives all you SEO people a free boost.

Now, where does HTTPS stand with Blogger right now? It's a Google product after all, you'd assume that it has it by default. Nope. Not all all. Well, unless you count the login page. It's been a common complaint for years, with no solution from Google yet.

That being said, using CloudFlare as a HTTP-to-HTTPS proxy works quite well. (Yes, I know that this won't protect against state level eavesdropping; but come on, you're using a Google product to begin with. The privacy ship sailed a long time ago.) Here's the basic things that you'll need.

1. A domain name that you can control the nameservers of (e.g., not FreeDNS).
2. A CloudFlare account (can be any level, free or paid).
3. Admin privileges on your Blogger page.

Not bad for $0/m.

As a general walk-through, you'll need to complete the following steps (if you need more detail on each of them, Google is your friend).

1. Switch your domain name's nameservers to CloudFlare. (I would suggest doing this a few hours before everything else.)
2. Go to the Blogger home page → hit the ↓ button to see the drop down menu and click "Settings" → then under "Publishing", add a URL (blogger.davidmanouchehri.com in my case). When you try to add it, you'll get an error saying that it couldn't find two CNAME records; go add them in CloudFlare and click save again (the dynamically generated one can be deleted afterwards).
3. In CloudFlare under the DNS section, flip it on for your CNAME record (should go from a gray to orange cloud).
4. Go to the "Crypto" section and pick the "Flexible SSL" option. I also enabled HSTS for all my subdomains.

That's it. Well, almost. With the Blogger template I'm using, I got a mixed content warning since the navigation bar and favicon were still being loaded over HTTPS.

These two steps will generally get you a quick fix.

1. Remove the navigation bar in Blogger (it looks horrible in my opinion anyway).
2. Throw in a HTTPS URL for the favicon. Adding it somewhere in the header should do the trick. 

Try loading up your Blogger page and see if it works.

Now, it's probably a better idea to fix your template properly to avoid having the favicon listed twice, but I gave up after about 30 seconds of messing around with Blogger. I tested it on both Chromium 44 and Firefox 39.0 without any issues, they seem to favor the HTTPS link over HTTP (as they should).

If you have any questions or results you'd like to share, feel free to leave a comment.