Custom Domains: CloudFlare Setup Guide

Many teams have purchased custom domain names for their websites and they want to use them with their SwimTopia websites. As we wrote in our blog post announcing our Enhanced Custom Domain support, supporting custom domain names while providing a high level of security has usually required making some trade-offs.

With the launch of CloudFlare's free Universal SSL service, we're now able to provide the best-of-both worlds: full custom domain support and top-notch security.

What is CloudFlare?

CloudFlare is a terrific online service that protects and accelerates websites, including many well known sites like Etsy, Reddit, Yelp and Salesforce.com. Configuring your SwimTopia site to work with CloudFlare will not only enable you to use a custom domain name, but should make your site faster and provide insightful analytics and an additional layer of protection against denial-of-service and other threats sometimes faced by websites.

CloudFlare works by managing the DNS service for your website. The DNS service they provide is world-class with a global network of data centers and an easy-to-use administrative interface. Switching your DNS service to CloudFlare does require some configuration changes at your domain registrar (typically a company like Namecheap, Hover, GoDaddy or Register.com) but does not require you transfer your domain name.

Let's walk through the steps to get your custom domain configured with SwimTopia and CloudFlare. If you need any help with this setup, please don't hesitate to reach out to help@swimtopia.com for assistance.

Step 1: Buy a Domain Name

If you haven't already, you'll need to purchase a domain name from a domain registrar such as Namecheap, Hover or GoDaddy.

Once you have a domain secured, proceed to step two.

Step 2: Add Custom Domain to SwimTopia

This step requires the Manage: Website administrative privilege.

From your Team Management console, click on "Website" then "Site Settings" and finally "Advanced".

 Custom Domain Configuration

Input the desired domain for your site in the custom domain name field. Note that domain name for the site must include a subdomain such as www as in www.example.com.

This step lets SwimTopia know that any requests it receives for this domain name should go to your website. It does not point your domain name to your SwimTopia site.

For that, additional configuration is required, starting with setting up a CloudFlare account in step three.

Step 3: Setup CloudFlare Account

Visit www.cloudflare.com and setup a new account if you do not have one already. Generally you should setup this account using an email address that can be handed over to a future team computer administrator.

Once you have added an email address, selected a username and password and agreed to the terms of service, you should be guided through a CloudFlare setup wizard, starting with step four.

Step 4: Add Domain to CloudFlare

In the "Add a website" step of the CloudFlare setup wizard, you should input the domain name for your website, something like example.com and click "Add Website"

CloudFlare: Add Website

If you already use this domain for email or other services, CloudFlare will start by importing your existing domain configuration so that any existing services will continue to work with CloudFlare.

When that process is done, you will verify and configure your records in step five.

Step 5: Configure your CloudFlare DNS records

Once CloudFlare has completed importing your existing records, you should review them to confirm your settings for email (denoted by MX records) and other services are intact. If you only use the domain for your website, you may only have one or two records.

At this point, you will want to add a new CNAME record to map "www" (or any other subdomain you chose) to your SwimTopia website subdomain, such as "example.swimtopia.com" as shown below.

CloudFlare cname configuration

Note, if your imported domain configuration already has a record for "www" you will likely need to replace it with the configuration above.

Once the record is added, click the cloud icon to enable CloudFlare service for that subdomain, then proceed to step six.

CloudFlare on/off switch example

Step 6: Choose Initial CloudFlare Settings

Next, you will need to choose the initial settings for your new CloudFlare account.

In most cases, the Free plan is all that is needed to use CloudFlare and your custom domain with your SwimTopia website.

The key is to make sure the SSL option is turned on (it should be on by default) and is set to used Full SSL.

All the other default settings should work fine as-is.

CloudFlare initial settings

Step 7: Make sure SSL setting is "Full"

Double-check the "Crypto" settings for your site and make sure the SSL option is set to "Full". This will ensure all traffic to your website is encrypted end-to-end.

If you are experiencing "too many redirect" errors when trying to access your site, it is likely because the SSL setting is set to "Flexible" instead of "Full".

Please note it may take several minutes for this change to take effect. 

Step 8: Add a page rule to redirect your root domain

Generally, if someone types your root domain (e.g. http://example.com) you will want it to work just the same as if they had typed the 'www' subdomain (e.g. http://www.example.com). To support this we need to setup a Page Rule to redirect all requests sent to the root domain (without the 'www') to the equivalent 'www' subdomain. This is a good practice for your website visitors but is also recommended practice for search-engine optimization.

Under Page Rules, you should add a new rule with the following settings:

URL Pattern: example.com/*

Forwarding: On

Destination URL:  https://www.example.com/$1

The https:// is very important. The $1 will make sure any other path info in the URL is also transferred to the 'www' subdomain.

Forwarding Type: Temporary - 302

Note: Be sure to replace example.com in the above examples with your own domain name.

This rule will intercept all web requests to the root domain and redirect it to the www subdomain equivalent.

Step 9: Add a root domain DNS record

With a Page Rule in place to route all root domain traffic to the secure 'www' subdomain, we need to add a root domain DNS record so that CloudFlare can process that rule.

To do this, under the DNS settings for your domain, add a CNAME record mapping '@' to your SwimTopia website subdomain, such as 'example.swimtopia.com' as shown below. (The '@' symbol indicates this is a root domain rule).

Make sure CloudFlare is enabled on the root domain rule as indicated by the "Golden Cloud" icon.

Step 10: Update your name servers

The last step of the CloudFlare setup wizard is to login to your account at your domain registrar and update your name servers to configure your domain name to use your newly configured CloudFlare service.

CloudFlare will provide names for 2-4 name servers. You will need to use these to update the name server configuration in your domain registrar account.

The process for making this change is different for each provider. We've provided links to the support articles for some popular domain providers below. 

Note: updating your name server configuration can take 24 hours or longer to take effect, but often takes much less time.

After completing this final step, you just need to wait for the name server changes to take effect and your domain should route through CloudFlare and to your SwimTopia site.

CloudFlare will automatically procure and manage a SSL-certificate for your domain. These certificates are required to protect the data transmitted to and from your site, and are typically expensive and require a complex purchase and setup process. CloudFlare automates that process and provides an SSL certificate free of charge, but this process also may take up to 24 hours to complete.

If your name server configuration updates before your CloudFlare SSL certificates are ready you may find that your site is accessible via your custom but with an SSL certificate warning/error. This error should go away as soon as the automated SSL certificate installed process is completed.

As always, if you have questions or need help with any of these setup steps, our Customer Happiness team is ready and waiting to provide assistance at help@swimtopia.com.

Have more questions? Submit a request

2 Comments

  • 0
    Avatar
    Daniel Keith

    Hi there,
    Nice tutorial. One of my friend added his website on CloudFlare, but it is making some error.
    Any professional advice how to resolve this problem.

  • 1
    Avatar
    Pablo Sebastián Velazco

    Works like a charm, thank you very much!

Please sign in to leave a comment.
Powered by Zendesk