Handling Root Domains for HubSpot Hosted Websites

0 Comments

When you host your website with Hubspot, typically you use the “www” subdomain. So the address for your website is “www.mysite.com”. But, what if you want to use the root domain - “mysite.com”? After all, it is pretty common these days for companies to host their websites on the root domain and dispense with the “www”. Companies like Twitter, Slack, TechCrunch, Slate, and many others, host websites on their root domain.

If you host with HubSpot, however, you cannot use the root domain for your website. According to HubSpot’s documentation, “Root domains cannot be connected to HubSpot. You will need to redirect your root domain with your DNS provider.”

 
site domain blog

So what can you do? You need to have something hosting your SSL certificate at “https://mysite.com” that redirects traffic to “https://www.mysite.com”. In this post, we describe a solution that we’ve used for numerous HubSpot websites.

Root Domain SSL Redirect with AWS S3, CloudFront, and Route 53

At Rare Karma, we’ve used a solution with many of our clients, based on Amazon Web Services (AWS) Simple Storage Service (S3), CloudFront, and Route 53 DNS services. This solution is relatively easy to set up and costs pennies per month in hosting fees.

S3 can be used to host static websites. We aren’t actually going to host any content in S3, but simply configure it to redirect requests from “mysite.com” to “www.mysite.com”.

Amazon CloudFront is a content delivery network (CDN). As with S3, we are not going to use CloudFront to host any content, but we are going to use it host and SSL certificate. In this way, we can redirect HTTPS traffic as well as HTTP traffic from “mysite.com” to “www.mysite.com”.

We use the Amazon Route 53 DNS service to point the root domain to the CloudFront/S3 redirect service, and the “www” subdomain to HubSpot. For this solution, you need to use Route 53 as the DNS because it allows you to create an "A" record that points to CloudFront rather than a dedicated IP address.

Rare Karma has set up a number of clients with this solution, and the cost averages less than a dollar a month. In the following sections, we walk through the process of setting up this solution.

Setting Up Amazon S3 to Redirect Root Traffic to WWW

The first step is to set up an Amazon S3 website to redirect traffic to “www.mysite.com”. If you do not have an Amazon Web Services (AWS) account, you can create one here.

Once you are logged in to your AWS account, under the “Services” menu, select “S3”. From the S3 control panel, select “Create bucket” to set up a bucket for your S3 website.

Name your bucket with the domain name. In our example, this is “mysite.com”. Then click “Create” to create your bucket so that you can configure the options.

Your bucket, with the name of your domain, now appears in your list of S3 buckets. Click on it so that you can configure the options needed for it to redirect traffic to your HubSpot website.

After clicking on your bucket, select the “Properties” tab and click on the “Static website hosting” option. Select “Redirect requests” and enter the subdomain where HubSpot is hosting your website - “www.mysite.com”. Specify the protocol as “https”.

This specifies the entire functionality of the S3 website. All it does is take requests and forward them, over HTTPS, to “www.mysite.com”.

Next, we set up the SSL certificate using CloudFront.

Creating a CloudFront Distribution to Support SSL (HTTPS)

By itself, neither the DNS nor the S3 website redirection can handle HTTPS traffic. That’s because neither of them can host an SSL certificate for our website. For this purpose we use AWS CloudFront working together with S3.

From your AWS account, under the “Services” menu, select “CloudFront”. Next, from the CloudFront control panel, select “Create Distribution” and pick “Web” as the delivery method.

That will bring you to a “Create Distribution” form where you specify the CloudFront properties for your website. Under “Origin Domain Name” you select the S3 website that you just created. In our case, that is “mysite.com.s3.amazonaws.com”.

The “Origin ID” field will automatically populate with a unique identifier lik “S3-mysite.com”. You can leave this alone, it is just used to uniquely identify the origin. Next, scroll down to the section “Default Cache Behavior Settings”.

Make sure that you have selected “HTTP and HTTPS” for the “Viewer Protocol Policy” and that you have allowed all the HTTP methods. Once that is done, scroll down to the section labeled “Distribution Settings”. For the “SSL Certificate” property, select “Custom SSL” and click on the button labeled “Request or Import a Certificate with ACM”. This will open a new tab where you can request an SSL certificate from AWS.

Under “Domain name” enter both the wildcard domain “*.mysite.com” and the root domain “mysite.com”, as this provides maximum flexibility. Click “Next” and walk through the steps to validate the certificate. When you are done, your new certificate will appear in the AWS Certificate Manager. Once the status shows as “Issued” it is ready to use with CloudFront.

Click on your certificate, scroll down to the “Details” section, and find the “ARN” - the unique identifier for your certificate within AWS. Select it with your mouse and copy it into the clipboard. You are going to paste it into a form to finish setting up CloudFront.

Now, go back to the browser tab where you were setting up the CloudFront distribution. In the “Distribution Settings” section, under “Custom SSL Certificate”, paste in the ARN that you just copied for your certificate.

To finish, scroll to the bottom of the page and click “Create Distribution”. That’s it, you are done setting up CloudFront with the necessary SSL certificate.

Your distribution will appear in the CloudFront listing. Once it’s status shows “Deployed”, you can start using it.

Now that CloudFront and Amazon S3 are set up, you can configure the DNS in Amazon Route 53.

Configuring Your Amazon Route 53 DNS

As mentioned previously, with this solution you need to use Amazon Route 53 as your DNS. If your DNS is hosted elsewhere, you can migrate it to Route 53 as described here. The reason that you need to be on Route 53 is that you are going to point your root domain "A" record to your CloudFront distribution (rather than an IP address), and that is a proprietary capability within Amazon Route 53.

From your AWS account, under the “Services” menu, select “Route 53”. Click on “Hosted zone” in the Route 53 dashboard. The, click “Create Hosted Zone” to configure the DNS settings for “mysite.com”.

Enter your domain (e.g., “mysite.com”) under “Domain Name” and click “Create”. This will take you to the DNS editor for your domain. The first step is to create the "A" record for your root domain. Leave the “Name” blank. For “Type” select “A” and for “Alias” select “Yes”. For the “Alias Target”, you need to paste in the CloudFront distribution domain name.

To find that, open a new tab in your browser and go back to the CloudFront dashboard, click on your distribution, and under the “General” tab copy the “Domain Name” value.

Now, go back to your Route 53 tab and paste the “Domain Name” value into the “Alias Target” field. The click “Create” to enter the "A" record.

Next, you need to enter a “CNAME” record to point the “www” subdomain to HubSpot. Before starting this, login to HubSpot and find and copy the value of the subdomain where your HubSpot website is hosted. Instructions for setting up HubSpot domains are here.

In Route 53, click on “Create Record Set” again. In the “Name” field, type “www”. Under “Type” select “CNAME”. Paste the HubSpot subdomain in the “Value” field.

Next, click on “Create” to create the “CNAME” record and you will end up back at the DNS table for your domain. As shown below, you should have and “A” record for the root domain that points to CloudFront, and a “CNAME” record for “www” that points to HubSpot.

You have now configured your website to redirect from the root domain to “www” that works for both HTTP and HTTPS traffic.

Conclusion

The configuration discussed here may seem a bit convoluted and confusing. It’s actually not, but seems that way at first if you are unfamiliar with S3, CloudFront, and Route 53. Once you’ve done it a few times, you will realize that it is a very simple configuration.

It’s great to have a website that properly redirects the root domain to “www”. If you are migrating an existing site that was hosted at the root domain, there’s an added advantage. All your old URLs will automatically redirect to the new versions starting with “www”. That saves you from dealing with broken links and implementing redirects some other way.

If you like this solution, let us know in the comments. If you’ve found something better (or simpler), let us know that too. We’d love to hear from you!

 

Written by The Rare Karma Team