Redirects using CloudFlare – SSL everywhere on your SmugMug site

Intro

SmugMug has recently added SSL/HTTPS to all custom domains, making your site more secure.  They have also added a redirect that automatically redirects all non https traffic to the https version of your web address.  So, if I access my site using this link – http://www.photom.me – the redirect will automatically switch it to https://www.photom.me – which is perfect!  The same thing happens if someone types http://photom.me – the visitor will be redirected automatically to https://www.photom.me

But, what if someone accesses my site using this address? – https://photom.me – the site will not load because the SSL certificate is not installed on the root domain – it is only installed in the www CNAME record of your domain.

Thanks to CloudFlare, I will show you how to make https://photom.me redirect correctly to https://www.photom.me.   And, on top of this, I will show you how to redirect all links to the https://www.photom.me  (of course, replace my domain address with your address).

Pointing your domain to CloudFlare

You can add your domain to CloudFlare using their tutorial – don’t worry – it is very easy.  During the process, make sure that you use their FREE account – you do not need to pay for any other functionality; it is not required for this setup.

DNS Setup

CloudFlare will automatically import all DNS records that you have originally set up on your domain registrar.  In this tutorial, I will only focus on records that you need to set up to make your domain work with SmugMug and to redirect the non https traffic to https.

You will need to set up two CNAME records.  As I mentioned at the beginning of this tutorial – I will be using my www.photom.me domain as an example – just replace www.photom.me with your own domain.

The first CNAME record will be for the naked domain – we will redirect it to the www record of your domain:

Make sure that the ORANGE icon is ORANGE – it means that CloudFlare settings are applied to this record.  This is required for the redirect to work correctly.

The second CNAME record is a www record, which we point to domains.smugmug.com:

Remember to turn the ORANGE icon off by clicking on it once – if you leave the orange icon on for this record – your site will break.

That is it – your CNAME records have been added and you can move on to the second part of this tutorial.

Enable Crypto on CloudFlare

I know this may sound a little bit scary, but it is not.  We need to enable the SSL certificate/crypto on CloudFlare for the naked domain, so it will not give any error messages, when accessing your domain, without www at the beginning of your site link.

On your CloudFlare account open the Crypto section:

Setting redirect using Page Rules

We will use CloudFlare’s Page Rules to set up rules that will redirect all naked domain traffic to the www version of your url – which has SSL enabled.

Even if someone enters:  https://photom.me/yourgallery – they will be redirected to – https://www.photom.me/yourgallery – so the whole url will be redirected not just the root domain – which is perfect, because your old links will also work, if someone forgets to add the www at the beginning of the url.

Open the Page Rules tab:

In here we will setup two page rules – the first rule is for your domain to always use https.

Click the CREATE PAGE RULE button and fill in the fields like this:

Of course, replace my site link http://www.photom.me with your domain url.  After filling in both fields – click the SAVE AND DEPLOY button.

The second rule will be to tell cloud flare to redirect all naked domain links to the www version of your domain.

Click the CREATE PAGE RULE button again and fill in the fields like this:

The first field should have your root domain with https at the beginning and /* at the end.  The /* means that anything behind the / should be included in the redirect.

The last field should be the destination URL – your domain including WWW at the beginning and /$1 at the end.  The /$1 at the end means that everything that was forwarded from the root domain after the / will be copied behind the forwarded url, behind the /.  I know this may sound confusing – let me show you an example:

I have already set this up on my domain – it works, so you can test it and see what I mean.

When you type:

https://photom.me/Personal/USA/

The above rule will redirect the whole URL to:

https://www.photom.me/Personal/USA/

That is it!  Your redirect is ready!  Please be aware that these changes may take up to 24 hours to work on your domain – so make sure you give this a little bit of time.