Static Hosting with AWS S3

You configure an Amazon S3 bucket for static website hosting, and then upload your website content to the bucket. The following guide will take you through the process to set up a fast-loading static site.

1. Go to the AWS Console

• Sign in to your AWS account or create one
• Within the Services dropdown menu click on S3 to be taken to your console

2. Create a bucket

Make sure you name the bucket with your exact domain name.

• Select a region (we use Sydney, Australia)
• Fill out the relevant details to create the bucket
• Once created click on your bucket and head into Properties
• Click on Static Website Hosting
• Enable by adding an index.html file
• Go back into Permissions and click Bucket Policy and paste in the below code

{
"Version": "2012-10-17",
"Statement": [{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::yourdomain/*"
}]
}

Note: Make sure to change yourdomain to your domain name (without the www).

3. Create a Hosted Zone

• In the Settings drop down menu click on Route53
• Head to Hosted Zones and click Create Hosted Zone

4. Create a Record Set

• Under Alias click Yes and wait until the target matches the bucket you created before you select it (be patient, this can take a while).
• Don’t forget to add the www alias
• Add your other DNS settings as normal
• Click Create and BOOM! Now you can enjoy the almost free hosting

5. Auto SSL with the CloudFront CDN

• Request a certificate with the certificate manager. You will need to verify ownership of the domain with a validation email that is sent so you will need a working email system for the domain.
• Once you have the site on an S3 Bucket and can see this working well, set up a CloudFront distribution for this site. The SSL works only through CloudFront.
• IMPORTANT! Add your Alternative Domain Names such as www.yourdomain or it won’t show in Route53
• IMPORTANT! Use the Certificate Manager (ACM) location in the US East (North Virginia)
• Set the original and current web addresses
• Leave all other settings as details
• Select your SSL certificate in the Distribution settings
• Make sure to specify a default root object (ie. index.html)
• Once your distribution is setup and deployed correctly you should be able to select it in the A records within Route53 and set as an Alias Target

Was this guide helpful? We’d love to hear your feedback or if you have any additional tips for static website hosting.