Skip to content

Create a static website on AWS with an S3 bucket under SSL/HTTPS

Published by Michael Horne on 27th October 2020

We are going to be creating a simple, static website using services on AWS. The tricky part is getting the static website to respond using https and an SSL certificate.

With this it’s also possible to monitor employee’s activity so keep that in mind if you have some remote staff as it’s very worthwhile keeping an eye on what they are doing.

We will be putting the static website files into an S3 bucket. Our domain will be on Route 53 and we will create an SSL certificate using the Certificate Manager. We will then use CloudFront to tie everything together.

Please note, it is important (for technical reasons) to do all this in the us-east-1 region. The CloudFront SSL stuff doesn’t work if you try and do it anywhere else (apparently). I have no clue why! – Mike

With thanks to freecodecamp.org – their post (which is a bit outdated and also a bit wrong) helped me get to the point of working things out!

Register your domain

If you need to, use Route 53 to register a new domain. It’s far easier having your domain on Route 53, but if you have it registered somewhere else, you can still follow this method and branch off when necessary.

For our purposes, we will assume you have created a new domain called mytestdomain.com.

Create your S3 buckets

  1. Go to the S3 management console and create an S3 bucket for mytestdomain.com in the us-east-1 region. This is the main bucket where all the static resources will go.
  2. Upload a basic index.htm file and an image that appears on that index.htm page. (This proves that internal links/src work). Later on, we’ll use the AWS CLI tool to upload/sync some static files from our local machine.
  3. Under the Properties tab of the bucket, click “Static website hosting”.
  4. Select “Use this bucket to host a website”.
  5. Enter index.htm as the Index document. (If you want to use .html, that’s fine). I also enter index.htm into the Error document. You can put something different here if you want a different static error page to appear. You shouldn’t get errors anyway…
  6. Click Save.
  7. Under the Permissions tab, click Block Public Access.
  8. Turn off the top tick box so you have all unticked boxes and click Save.
  9. Also under the Permissions tab, click Bucket Policy.
  10. You want to create a new policy and enter the following into the big text box: 
    {
"Version": "2012-10-17",
"Statement": [
    {
    "Sid": "PublicReadGetObject",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::mytestdomain.com/*"
    }
]
}
  11. Click Save. It will complain about public access being enabled. It would be difficult to host a static, public website without giving public access, and we’ve only given read access anyway.
  12. Go back into the Properties tab and click Static website hosting.
  13. There’s an “endpoint” URL there. Click it, and you should get your website.
  14. COPY your endpoint URL to Notepad, making sure you say that it is for the mytestdomain.com domain.
  15. Go back to the S3 management console and create an S3 bucket for www.mytestdomain.com in the us-east-1 region. This is the secondary bucket that we need to make sure that both www.mytestdomain.com AND mytestdomain.com both respond correctly.
  16. Under the Properties tab of the bucket, click “Static website hosting”.
  17. Select “Redirect requests” and enter mytestdomain.com as the target domain and http as the protocol (we’ll come back and fix this later to https).
  18. Can’t remember, but you might have to do the Permissions stuff again for this bucket. On the other hand, you may not!
  19. Click the endpoint URL and you should get your site again.
  20. COPY your endpoint URL to Notepad, making sure you say that it is for the www.mytestdomain.com domain.

Configure your domain using Route 53

  1. Go to the Route 53 management console.
  2. Click Hosted zones.
  3. Select your mytestdomain.com domain.
  4. You will see an NS record and an SOA record. Leave these alone.
  5. Click on Create record.
  6. Select Simple routing and click Next.
  7. Click on Define a simple record.
  8. Leave the top field blank.
  9. Under Value/Route traffic to, choose “Alias to S3 website endpoint”.
  10. Select the US East (N. Virginia) us-east-1 region.
  11. Click Choose S3 bucket and your bucket for mytestdomain.com should come up. Select it.
  12. Choose record type “A”.
  13. Turn Evaluate target health off.
  14. Click Define simple record.
  15. Click on Create record AGAIN.
  16. In the top field, type www.
  17. Choose Alias to S3 website endpoint.
  18. Select us-east-1 again.
  19. Choose the S3 bucket for www.mytestdomain.com.
  20. Choose record type “A”.
  21. Turn Evaluate target health off.
  22. Click Define simple record.
  23. Click Create records. This should return you to the domain dashboard with the two new records created.
  24. You can now try www.mytestdomain.com and mytestdomain.com which should give you your website. You MIGHT have to wait a few hours for it to appear.
  25. You will notice that you can get your static website now, but it is under http, NOT https. That’s the next bit!

Create your SSL certificate

  1. Go to the Certificate Manager management console.
  2. Click Request a certificate.
  3. Select Request a public certificate.
  4. Under “Domain name”, type in mytestdomain.com.
  5. Click “Add another name to this certificate”
  6. Enter *.mytestdomain.com in the new field that appears.
  7. Click Next.
  8. Choose DNS validation.
  9. Click Next.
  10. Ignore the tags and just click Review.
  11. Click “Confirm and request”.
  12. This will return you to the management console.
  13. Click the little arrow next to *.mytestdomain.com to expand the certificate.
  14. You will see that both mytestdomain.com and *.mytestdomain.com are not ready yet.
  15. IF you have got your domain in Route 53:
    1. Expand each of them and click “Create record in Route 53”.
    2. This will create some new identification records in Route 53 for you so that the certificate validates.
    3. This can take a few minutes, so be patient.
  16. IF you are not using Route 53:
    1. You will need to create CNAME records accordingly – this procedure differs for every domain registrar, so you’re on your own!

Configure CloudFront to use the certificate and publish the website

  1. Go to the CloudFront management console.
  2. Click Create distribution.
  3. Click Get started under “Web”.
  4. Under “Origin domain name”, enter your mytestdomain.com endpoint URL. Do not select from the list it gives you.
  5. Origin ID pre-fills. Leave it alone.
  6. Under Viewer Protocol Policy, select “Redirect HTTP to HTTPS”.
  7. Under Cache policy, select Managed-CachingDisabled. (If you want your site cached, choose Managed-CachingOptimized).
  8. Under Alternate domain names, enter mytestdomain.com.
  9. Choose Custom SSL certificate and select your Certificate from earlier.
  10. Click the Create distribution button.
  11. Do exactly the same, but for Origin domain name, enter your www.mytestdomain.com endpoint URL and under Alternate domain names enter www.mytestdomain.com.
  12. Choose the same SSL certificate and click the Create distribution button.
  13. The Distributions will take some time to spin up (about 5-10 minutes, longer if you sit there watching it).
  14. Copy the two cloudfront.net host names and make a note of which is which (one for mytestdomain.com and one for www.mytestdomain.com).

Take remedial action in S3

  1. Go back to S3 and choose your www.mytestdomain.com bucket.
  2. Under Static website hosting, change the protocol to https for the redirect.

Take remedial action in Route 53

  1. Go into Hosted Zones and into your mytestdomain.com domain.
  2. Change the two A records.
    1. Change Value/Route traffic to and select “Alias to CloudFront distribution”.
    2. Keep the same us-east-1 region.
    3. In the third box, paste in the the appropriate cloudfront.net host name for which A record you are changing.
    4. Keep “A” record type.
    5. Click Save changes.

Test it out

Providing your distributions have been… um… distributed, your https://mytestdomain.com and https://www.mytestdomain.com should now give you your static website under SSL.

Additional step to sync content from your local machine to your static website hosting on S3

  1. Install the AWS CLI tool. Instructions on how to do that are here. You will want version 2. The version 2 CLI for Windows instructions can be found here.
  2. Go to your S3 bucket with the static website files (the mytestdomain.com one in our example).
  3. Delete the files from the bucket to give you an empty bucket.
  4. Now, on your local machine, create a folder to hold your static website files.
  5. Into that folder goes your index.htm file, and any other files you need to make it look “pretty”.
  6. (On Windows) Create a batch file with the following inside it:
    aws s3 sync . s3://mytestdomain.com –acl public-read
  7. Open up a command prompt in that folder and run the script.
  8. You should find that it reports syncing the files from that folder to the S3 bucket.
  9. Check your S3 bucket and refresh it to see the files.
Published inawsweb hosting