Friday, November 27, 2015

GETTING HTTPS ON BLOGGER SITES WITH CUSTOM DOMAINS - PROBLEMS AND SOLUTIONS

In October, Blogger rolled out the HTTPS protocol for .blogspot.com domains. Since then, many users have been trying to jump on the HTTPS bandwagon. However, if you are using a custom domain with the blogger site, the current version of the HTTPS protocol is not for you because it doesn't support custom domains.

But if you still want to get your custom domain onto the HTTPS protocol, there is a way; and it's with Cloudflare.

Now, caveats first. This is not a sponsored post by Cloudflare, nor does it give you instructions on how to set up your Cloudflare account. There are tons of instructional material out there on that, plus the process is really simple. So we're not looking at that here. Instead, I'd like to share with you some of the problems that you will encounter when trying to use Cloudflare for your HTTPS protocol and how to work around them.

So let's get cracking.

The Basics
Blogger runs off its own servers and the servers are owned by Goggle. Ordinarily, if you wanted to run your site on the HTTPS protocol, you needed to install an SSL certificate on your server. But we Blogger users can't do that since we don't have access to the Blogspot server. So the next best thing we can do is to route traffic from the Blogspot server to a third party server (think DNS hosting) and let that third party server run your SSL certificate for you.

Now, purists will tell you that this goes against the 'proper' way of doing things. And I agree. So if you feel the same way, then read no further. Wait for Blogger to roll out HTTPS for custom domains.

But if you can't wait and you don't mind the redirection, then here's the solution for you.

Cloudflare
Cloudflare is a company that provides Content Delivery services. It's great if you are hosting your site on your own server at home. But given that Blogger uses Google's servers, there is little sense in using them, really, except... if you want to leverage on their SSL certificates.

Cloudflare provides free SSL certificates, which is great for low budget startups and NPOs like us. It saves us the time, money and all round bother of finding a suitable SSL certificate for our site. So if you want to leverage on their services, go on to Cloudflare, sign up for an account, add in your domain and follow the instructions. Because you are running your Blogger site off of Blogger's own servers, there is little point in using their paid service. So select their free service and follow the steps below to set up your Cloudflare settings.

Setting Up Cloudflare

Step 1:

Select Flexible SSL

Select Flexible SSL on Cloudflare

Cloudflare has a variety of options for you to select. But the one that applies to us Blogger users is Flexible SSL because what it does is it secures traffic to and from your Cloudflare server, but not the traffic between Cloudflare and Blogger. Some people are comfortable with this, some aren't. But because we Blogger users cannot install an SSL certificate on the Blogger server, this is our only option.

Step 2:

Set up Page Rules

Set up Page Rules to route http to https

The next thing you want to do is to go to the Page Rules tab and set up your own page rule. What this does is it sets up a 'force HTTPS' and directs all HTTP traffic to HTTPS, something that the current version of the Blogger HTTPS protocol does not allow.

Now, Cloudflare will tell you to set up your URL pattern as *domain.com/*. If you do this, and you are running a custom domain, and you already have the following redirections set up;
  • blogspot.com to www.domain.com (enabled in your Blogger user interface) 
  • domain.com to www.domain.com (enabled either in your Blogger user interface or in your domain host user interface) 
You will end up with a redirection loop error. Basically a page will load and tell you that the URL has too many redirects and you can't access the page.

To solve this, set your URL pattern as http://*domain.com/*. Remember to add the http:// in front and all HTTP traffic will now be redirected to your HTTPS domain.

Step 3:

Sort out your Mixed Content Errors

Photos and Resources
Now, if you are using Blogger, then I assume that you use the 'Insert Photo' button to attach your pictures onto your posts. If you do that, then all your photos are stored on the blogspot photo folder, and you have less of a headache. Also, if you are using javascript from Google's stable of .js files, then you are quite fine as well. If this is you, all you need to do is go through each and every resource link and change http:// to https://. You can do a simple search for the term 'src="http' and make the changes.

For all other resources, check that the resource is supported on the https:// protocol by copying and pasting the URL in the browser. If you find that the resource can only be found on the http:// protocol, then use a neutral domain protocol (i.e. //www.google.com) for that resource.

This is tedious, I know, but this is because while the HTTPS protocol on .blogspot.com domains will automatically recognize and draw the resource from blogspot's https:// domain, Coudflare, a third party DNS host, won't know that and so you will have to define it for them in your coding.

Do take note that you need to do this for ALL resources used in your site for the HTTPS protocol to be fully activated on your site (i.e. for the lock icon to turn green).

Internal Links
Because you are now running off of a third party DNS host, if you have internal links to your own pages that are expressed as http://domain.blogspot.com/*, these internal links will not work anymore. They will route you to a Blogger page which tells you that the site is no longer hosted on Blogger and there may be malware on it.

To get around it, change all your internal links to use your custom domain. You can choose to have them expressed as https://domain.com or just simply //domain.com.

Step 4:

RSS Feeds and Email Subscriptions.

The last thing you need to do is to change the feed on your Feedburner account. Now, if you don't have email subscription set up, then you can ignore this bit. But if you do, then you will, if you haven't already, want to change your Original Feed URL to the use the following;
https://www.blogger.com/feeds/[a long numbered id]/posts/default
Now, if you do a CTRL U from your Blogger site, you will find that there are actually 3 possible RSS feed URLs, and they come in these patterns.
<link rel="alternate" type="application/atom+xml" title="Site Name - Atom" href="http://www.domain.com/feeds/posts/default"/>
<link rel="alternate" type="application/rss+xml" title="Site Name - RSS" href="http://www.domain.com/feeds/posts/default?alt=rss"/>
<link rel="service.post" type="application/atom+xml" title="Site Name - Atom" href="https://www.blogger.com/feeds/[a long numbered id]/posts/default"/>
The first two are alternates, and if you use them, your feeds will break once there are changes in your domains or protocols. By using the one listed 'service.post', you will ensure that your feeds still flow smoothly no matter what changes you make to your site.

Once you have done all that, all you need to do is wait for Cloudflare to populate their DNS with your information, which usually takes a full day, and you are done.

Do take note that during the time that Cloudflare is taking to populate their DNS, you will get intermittent service to your site. That is normal. But the down time is no longer than 10-15 minutes each time. And once the site is fully populated, your site will be as stable as it was when it was running off of Blogger's server.

Like our messages?

Sign up to get our messages delivered daily.

Social Media Policy Privacy Policy Disclaimer Terms of Use