Enforce https/ssl and redirect www to root domain with Cloudflare

Enforce https/ssl by redirecting non-ssl traffic

First of all, the good news is that Cloudflare automatically provides your site with a free SSL certificate, no need to manually set up a certificate via Let's Encrypt

Enforcing all of your users to use https can be done easily in cloudlare with page rules. Cloudflare put together a very helpful support article how to do it.

In a nutshell, just head over to "Page Rules" in your cloudflare dashboard. At the time of writing you have three free rules which should be plenty.

01 cloudflare page rules overview o

Click on "Create page rule", and add your domain as http://NEW_STATIC_WEBSITE.COM/* . In the settings, select "+ Add a setting", and then "Always Use HTTPS" which enforces https/ssl for this URL. Click "Save and Deploy" and you're done!

02 cloudflare new page rule always https ssl o

Now head over to "NEW_STATIC_WEBSITE.COM" in your browser, and you will find that the shiny green lock will be there.

One important thing to notice, this will only work for the root domain now. Any subdomains are not included, which first and foremost will also include "www". So, at this point, www.NEW_STATIC_WEBSITE.COM will a) not resolve at all as there is no DNS record defined for it, and b) https won't be used for it as the rule above does not cover subdomains in general. We will make www resolve in the next chapter and have it go to the root domain which I prefer.

Redirect www requests to the root domain without www

Tastes differ, but I don't really like the "www" in front of a url, so I never use it, and also redirect the traffic to the root domain. Some prefer to redirect everything to the www version, but that is up to you.

I only got this to reliably work by both addind a page rule and a DNS record. To start with the page rule, head over to the page rules tab in Cloudflare's dashboard again, and create a new rule as follows:

Variable Value
URL matches *www.NEW_STATIC_WEBSITE.COM/*
Settings Forwarding URL
Type 301 - Permanent Redirect
Destination URL https://NEW_STATIC_WEBSITE.COM/$2
03 cloudflare forward www to root page rule o

Quick explanation, any traffic coming in via a with www will be automatically and permantly (301) redirected to the destination URL, which is the same domain, without www, and with https. The "$2" is a placeholder (or variable) and will fill in the part from the second asterisk above. So if one of your users enters with the link "www.NEW_STATIC_WEBSITE.COM/amazing-blog/post-1" he will be redirected to "https://NEW_STATIC_WEBSITE.COM/amazing-blog/post-1". Just like it should be.

Overall, your page rules should look similar to this:

04 cloudflare page rules finished o

However, for some reason I don't fully understand, the above www forwarding page rule is necessary but not sufficient to make the www redirect work. In addition, you need to add a DNS record for www pointing to the root domain. Open the DNS tab in Cloudflare and add a new record:

Variable Value Explanation
Type CNAME (Add a CNAME record, Cloudflare will take care of "CNAME Flattening")
Name www (The subdomain)
Domain name @ (Use @ to redirect to the root domain)

By now your DNS records should look similar to this:

05 cloudflare dns records overview o

Important, don't add the S3 bucket endpoint again as value for the www subdomain. Otherwise, instead of properly redirecting, it could happen that users access the same site under the root domain and under the www subdomain, which could cause Google to think it's duplicate content.

Now try going to your website with www and without the s in https: "http://www.NEW_STATIC_WEBSITE.COM" - you should be properly redirected to "https://NEW_STATIC_WEBSITE.COM" with the green lock in your browser on.

comments powered by Disqus