How to set up a static website with SSL/TLS and a custom domain using AWS S3 and Cloudfront
If you want to set up a static website for (basically) free using, using AWS then you’ve come to the right place. Let’s talk about the solution on a high level before we dive in and build it.
Things you need before we get going;
- AWS Account
- Custom Domain
- Your static site files (HTML, CSS, JS, etc)
AWS S3
S3, or Simple Storage Service is AWS’s answer to Object storage. S3 has powered thousands of companies, from Dropbox, to Netflix to Adobe to governments. A substantial amount of the data you access online probably comes from S3.
Create a bucket
Once logged into AWS, open the S3 Management console and Click Create Bucket. Name your bucket the same as your domain name is. Click Create.
Ensure Static Website Hosting is enabled
Select the bucket in S3 and click on Properties. Click Static Website Hosting and select Use this bucket to host a website. Input index.html (or whatever your main HTML page is called) for both the index document and error document. If you have a 404 Not Found HTML file, then specify the location of the file in error document.
Unblock Public Access
Ensure public access is not blocked to the bucket. Select the Permissions tab and ensure Block all public access is set to off.
Upload the content
Upload the content to the S3 bucket ensuring that the index file is in the root directory. When uploading; make sure that public access is granted to all of the objects (files). Select the standard storage class and click upload.
For this article, I uploaded a HTML Charity template provided by Colorlib. https://colorlib.com/wp/template/aid/
Once uploaded ensure you can access your index.html file publicly. Click on the file and click the Object’s URL.
We also need to check that the static website functionality is working as we desire. Click on Properties then Static Website Hosting. Click the endpoint link to check the website homepage displays correctly (as per below).
Route 53
Route 53 is a DNS managed by AWS. This allows you to manage your domain names along with other DNS records.
Create a hosted zone
Open the Route 53 management console and select Hosted Zones. Click Create Hosted Zone and enter your domain name.
It’s important that if you’ve purchased a domain name from another provider (GoDaddy, 1&1 etc) then you must make Route 53 the DNS service for the previously created domain by changing the nameservers to point to the ones AWS provide in your hosted zone.
To do this log into where you purchased the domain (in my case Godaddy) and update the nameservers to the four that amazon provides you in your newly created hosted zone (it’s listed as a record set with the type NS). This update takes hours to propagate across the global DNS but we can continue while this takes place.
Certificate Manager
We need an SSL certificate to use HTTPS. Fortunately AWS provide these for free — for AWS resources at least. First, make sure that you select the US East (N. Virginia) Region, as Cloudfront can only use Certificates in that region. Once in the US East Region, navigate to the AWS Certificate Manager service.
Request a certificate
We need to request a certificate for our custom domain name. Select Request a certificate and add two domain names; the root domain and *.<rootdomain>. The asterisk means that the SSL certificate can be used for any 1 level subdomain (i.e. www.aidanhallett.com or me.aidanhallett.com or anything.aidanhallett.com). It can’t however be used for something.likethis.aidanhallett.com — and you’d need to create additional level domain names for that. In our case though we only need the root and the wildcard certificate.
Select DNS Validation for the Validation method and click confirm on the review page. Ensure that you click Create record in Route 53 for each of the domains. This will automatically create a DNS entry in Route 53 which is used to prove to AWS Certificate Manager that you own the domain.
Once completed, it can take 30 mins or more to propagate and for you to be able to use the SSL Certificate. Once verified on Route 53, validation status will be shown as success.
Cloudfront
Cloudfront is a Content Delivery Network provided by AWS. It is used to deliver content to users around the globe. It caches content to increase performance. Create a Web distribution with Cloudfront.
Settings to modify
- Set the Origin Domain Name to <bucket-name>.s3.amazonaws.com (e.g. aidanhallett.com.s3.amazonaws.com).
- Set the Viewer Protocol Policy to Redirect HTTP to HTTPS
- To reduce price change the Price Class to Use only US, Canada, and Europe.
- Alternative Domain Names (CNAME) should include any domains that you want to root to this website. (www. and non www.)
- SSL Certificate should be set to the SSL Certificate you created
- Set the Default Root Object to index.html (or the homepage filename).
Once you’ve created the distribution, it again takes more time to propagate. The cloudfront domain name (e.g. d1n7y1ke6iuxpy.cloudfront.net) should be checked.
Back to Route 53…
Select the hosted zone in question (e.g. aidanhallett.com), and create a record set. The record set should be the root domain and be routed to an ALIAS. Now you should see the distribution you created in Cloudfront.
Repeat the above step for the other CNAMES (e.g. www.aidanhallett.com) and route to the same Cloudfront distribution.
Finally, we can see that my custom domain routes to Cloudfront, which pulls the content from my S3 bucket! Hope this was useful - If it was, please give me a clap! If you have any questions, feel free to comment below.
