Last Updated: May 14, 2022
·
28.91K
· wallin

Host a static site on Amazon S3, with custom domain and SSL

Log in to your AWS account at aws.amazon.com:

Setup S3

First, go ahead and create an S3 bucket with the same name as your domain name, eg. www.example.com. Enable the feature called static website hosting by clicking enable website hosting and provide a suitable index document (such as index.html)

IMPORTANT: take note of the S3 website endpoint. They differ from the regular S3 endpoints.

NOTE: Don't forget to make your files public when you upload them to the S3 bucket!

Install SSL Certificate

Next, we need to upload the SSL certificate that you've bought for your domain (eg. though ssls.com). Currently it is only possible through the AWS Command Line Utility If you're on OSX you can install it through homebrew:

$ brew install awscli
$ aws iam upload-server-certificate --server-certificate-name certificate_object_name --certificate-body file://public_key_certificate_file --private-key file://privatekey.pem --certificate-chain file://certificate_chain_file --path /cloudfront/

NOTE: Don't forget to type file:// in front of the filename or it won't work!

For more details on the upload process, see the AWS Guide

Setup Cloudfront

Next, Create a new Cloudfront distribution:

  • Origin Domain Name: enter the S3 website bucket endpoint that you just created
  • Viewer Protocol Policy: select Redirect HTTP to HTTPS
  • Alternate Domain Names (CNAMEs): type the domain that you wish to use, eg. www.example.com
  • SSL Certificate: select Custom SSL certificate and then the one you uploaded in the previous step
  • Custom SSL Client Support: select Only Clients that Support Server Name Indication (SNI)
  • Default root object: type index.html

for all other options, the default should be fine

Setup DNS

Last, go to Route 53 and create a hosted zone for your domain (if you haven't done it already). Then create a new record set:

  • Name: your domain. It is important that this matches the CNAME you entered when you created the Cloudfront distribution, eg. www.example.com
  • Type: A - IPv4 Address
  • Alias: Yes
  • Alias Target: select the cloudfront distribution that you created above.

All done! You should now have a new static site with SSL up an running.

Bonus tip

This is a perfect fit for hosting sites generated by the excellent middleman framework. The plugin middleman s3 sync makes deployments to S3 super easy!