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”.

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”.

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: Choose a Cloudflare Plan

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

Step 6: 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.

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

The Cloudflare service should be enabled by default, as in the above image. If not, click the cloud icon to enable it.

Step 7: Make sure SSL setting is “Full”

Double-check the “SSL/TLS” 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:

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.

Return to the DNS section of the Cloudflare configuration and add the below:

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 above. (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: Disable Rocket Loader

Unfortunately, having Rocket Loader enabled can cause some issues with SwimTopia loading some resources. We recommend you disable Rocket Loader. To do so, go to the Speed tab in Cloudflare and set Rocket Loader to Off.

Step 11: 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. 

• NameCheap
• Hover
• 1&1
• GoDaddy 

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 domain but with an SSL certificate warning/error. This error should go away as soon as the automated SSL certificate installed process is completed.

Important note for GoDaddy Customers:

If your DNS was set up through GoDaddy originally, there’s a decent chance that there will be additional top-level records that can interfere with your SwimTopia site loading properly. If there are any CNAME or A records that point to a specific IP address you will want to remove them.

And IP address is an identifier like 172.16.25.41 that identifies a single device on the network. Your SwimTopia site isn't hosted on a single server, but instead "in the cloud" with multiple virtual servers that are added/removed automatically as traffic goes up and down. Thus your SwimTopia service is never accessed via specific, static IP address.

That said, if you use your custom domain for email it you will very likely have one or more MX records in your configuration with IP addresses. Don't remove those!

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.

Bonus Step: Use Custom Domain by Default

Once your site is up and running with your custom domain, it will be accessible via either your custom domain (e.g. www.example.com) or your SwimTopia subdomain (e.g. example.swimtopia.com). After you've gone through the trouble to set it up, you probably want to make sure your custom domain is always used for all requests. To do this, send a request to help@swimtopia.com requesting that we “enable your custom domain by default”. When we receive this request, we will verify your custom domain configuration and flip a switch to make all requests to your SwimTopia subdomain redirect to your custom domain. In addition, all auto-generated emails, such as registration confirmation messages, will link to your custom domain instead of your SwimTopia subdomain after this change.

Please note that your team administration console will always be accessible via either your custom domain or your subdomain (e.g. https://example.swimtopia.com/manage). This provides a failsafe in the event your custom domain registration unexpectedly expires, or something else happens that makes your custom domain unreachable. You'll always be able to access your team management console — including the ability to remove the custom domain configuration under Website > Advanced > Settings if you need to.

hcmanagewebsitesitesettingsadvanced