How to host your static website on AWS S3 transferring your Squarespace domain to Route 53 with G suite Gmail service
A step by step guide to host your website in a S3 bucket on AWS
Scroll down if you want to get right to the guide
I was paying +$45 per month on Squarespace which is an easy to use platform, but compared to $1- $5 per month if I host a static website on AWS, well I’ll take those $1 to $5.
This is a step by step guide, meant for people with some little experience programming and some experience using AWS, but even if you don’t I will break it up in easy steps to follow.
This guide assumes that you:
- Already have some CSS and HTML files, ready to be hosted.
- Have an AWS account.
- Have an Squarespace account and a domain in it.
- Use the G suite through Squarespace.
Let’s get to it!
First part
Transfer your Squarespace domain to Route 53 in AWS
If you have already a domain on Route 53, skip this part
- Start by logging into Squarespace and select domains.
2. Click on the domain you want to manage, scroll to the bottom of the left hand panel and untick the option Lock Domain and disable the Whois Privacy
3. Check that all the registration is in order and with an email that you actually use. During the transfer process, you will receive confirmation emails there.
4. Open a new browser tab and login in AWS and search Route 53
5. Once in Route 53 go to Hosted Zones and create a hosted zone
6. On the Domain name, put the domain you will be transferring from Squarespace. In the comment area you can write anything relevant to your page or leave blank. Leave the Type as Public Hosted Zone.
7. By default, the created Hosted Zone has a set of records by default. We have to add a few more to keep the mail service and to redirect the traffic from your domain to where you will store your static website.
We’ll start by adding the email records first. To keep google’s email active on your domain, you need to create a record of the type MX, in the value area paste this:
1 ASPMX.L.GOOGLE.COM.
5 ALT1.ASPMX.L.GOOGLE.COM.
5 ALT2.ASPMX.L.GOOGLE.COM.
10 ALT3.ASPMX.L.GOOGLE.COM.
10 ALT4.ASPMX.L.GOOGLE.COM.
Those are the Google servers and their priority settings. You set them all so in case that one is not working, the service will reach other of the servers. Leave the name blank or @ and the TTL as 3600.
8. Next, create other Record set, type TXT and leave the name blank and the TTL value as 3600. In the value, paste this:
“v=spf1 include:_spf.google.com ~all”
This prevents that spammers use your domain to… Spam.
9. We’ll create other records later, but for now this is enough. Go now to Registered Domains. There select the option Transfer Domain.
10. There you put the domain name and select the TLD (That’s the ending of your domain, for example.com, the TLD is .com). Depending on the TLD, the cost of the transfer will vary.
11. AWS asks for the Authorization code, to get it just go back to the tab where you had Squarespace open. Copy the transfer key that was activated after you unlocked the domain and paste it on Route 53.
12. For the name server options, choose the second option. Select the Hosted Zone you created some steps ago.
13. In the next step, set all the contact information. I suggest you to enable the privacy protection.
14. Check that everything is alright and confirm the purchase. Remember to have a valid payment method, if not AWS will cancel the transfer and you have to apply a new payment method and repeat the transfer process.
15.The transfer of the domain takes about 30 minutes to complete. You will receive about 2–3 emails for verification. Keep in mind that it could take more than that.
Second part
Create S3 buckets to host your website
- Go to services and search for S3. We’ll create 2 buckets in total, one for your domain as example.com and other as www.example.com
2. Click on the Create bucket option and set the name to your domain example.com and select your desired region.
3. You can leave Configure options as it is by default and Set Permissions to Block all while we are building.
4. Then create another bucket with the name your domain as www.domain.com and select the same region you choose before and set permissions to Block all.
5. Now, click over the example.com bucket and in the overview, select upload.
6. To upload your files you can add single files or also drag and drop files and folders.
7. Then Set permissions for the users who can modify the files in the bucket and Set properties for storage class as Standard.
8. Once all your website files are uploaded, go to the Properties tab of the bucket and select Static website hosting. There you have to point to an index document, so choose your index HTML file and save.
9. Now go back to the S3 dashboard and select the www.example.com bucket and go to Properties. There select Static website hosting and select Redirect requests to your example.com bucket.
10. Now we need to redirect the traffic from the example.com to your S3 hosted page. For that, go back to Route 53 and select Hosted zones and create a Record set of type A -IPv4. Leave the name blank and select Alias. In the Alias, select the S3 website endpoint you created. Leave everything else as it is by default.
11. Then create another record A-IPv4, name www and select the same Alias you used for the step before.
Third part
Setting up Gmail
Now we need to finish the setup for Gmail, if not, your email account using your domain won’t work at all.
- Previously, in the first part of this guide, we setup 50% of the work for the email service. For this step, open in another tab Google and log in with your administrator domain’s email account. look for the Admin app in your Google apps menu.
2. There, navigate to Apps>G suite>Gmail and go to Authenticate email and there click on generate a New record. A pop up will appear, there you can leave the setup as it is and just click generate and copy the value area’s content.
3. Copy the TXT record value and open any text editor and paste the value. You need to make a small modification because the string value is too long for the record values on Route 53. Divide it at any position where there are less than 255 characters using “ ”. The structure is
“ + spacebar + ”
Once you finish adding that, copy the content. The result will look like this.
4. Now, go back the Route 53 and create a new Record set of the type TXT with the name google._domainkey, leave TTL as it is and in the value paste the text you modified in the step before.
5. Once that’s done, go back to the tab where you had the Google Admin console open and click on start Authenticating. If all goes well, you will see that the status says “Authenticating email”.
6. Finally, check that your MX (email exchange) setup is right, by going to the check MX tool of google ( https://toolbox.googleapps.com/apps/checkmx/ ). There just put your domain and if all when well, you will have something like this.
Any critical error (Red triangle with exclamation mark) means that your email will not work properly or maybe it won’t work at all.
Fourth part
Making your site live
- We are almost ready, we need one last step. Go to the S3 dashboard and click over your example.com bucket and go to Permissions and there go to Block public access and unblock the public access.
2. Then, go to the bucket policy and click on policy generator
3. Set the following:
- type of policy as S3 bucket policy
- Effect as allow
- Principal as *
- AWS service as Amazon S3
- Action as GetObject
- ARN as arn:aws:s3:::example.com/*
4. Copy the policy text and go back to the tab with the Bucket policy and save.
We are set and ready! Supposing the domain transfer finished by now, your site should be live once you complete that last step, check it by going in your browser to your domain.
This guide was created with the help of the following guides:
Some of those are old or were missing steps, which is why I created this updated guide.
Let me know if this was helpful for you!
