How to Host a Static Website with Custom Domain, SSL, and S3 on AWS

Set up an S3 bucket

• Go to your AWS console and search for S3. Click it.
• Click Create Bucket. Choose a globally unique bucket name and AWS region. It must be your domain name.
• Untick Block all public access and confirm it, since we want our static website accessible from the internet.
• Click Create

• Click Properties

• Click Edit

• Click Enable at Static website hosting
• Write index.html at Index document and error.html at Error document - optional

• Click Upload

• Click Add files, choose index.html and error.html then Click Upload

• Click Permissions and Edit at Bucket policy

• Click Policy Generator

• Choose S3 Bucket Policy
• Write * at Principal
• Choose Get Object at Actions
• Add Your S3 ARN at Amazon Resource Name (ARN)
• Click Add Statement

• Click Generate Policy

• Copy policy

• Paste in S3 policy, add /* at the end of ARN and Click Save changes

• Click Properties

• Copy this S3 URL and open in new tab

Set up Route 53

• Create hosted zone in Route 53:
• In your AWS Console search for Route 53 under Services.

• Under DNS management, click Create hosted zone

• Inside the Domain name field input your domain name.
• 'Type' will be Public hosted zone.
• Click Create hosted zone.
• Now we need to link our domain with the records in Route 53.

Set up CloudFront Distribution and SSL Certificate from ACM

• In your AWS Console search for Cloudfront under Services.

• Click Create distribution

• Choose Your S3 at Origin domain and Click Use website endpoint

• Choose Redirect HTTP to HTTPS

• Click Do not enable security protections

• Click Request certificate at Custom SSL certificate - optional

• Click Next

• Write your domain name and then click Request It can take up to 30 minutes for the certificate to be issued so try to be patient.

• Choose your certificate and click Create distribution

• Click Edit

• Click Add Item at Alternate domain name (CNAME) - optional

• Write Your Domain Name at here and then Click Save changes

• Click Error Pages and Create custom error response

• Configure Error response for 403: Forbidden and 404: Not Found

Set up Route 53 Record

• Click Services and type in Route 53, click this.
• Click the name of your hosted zone.
• Click Create record. Type your domain at Record name
• Choose A - Routes traffic --- at Record type
• Click Alias
• Click the dropdown menu at Route traffic to and choose Alias to CloudFront distribution.
• Choose the distribution you provisioned previously or paste your distribution.

Note: the only available region is US East (N. Virginia)[us-east-1]. This is due to the fact that we provisioned an SSL Certificate via AWS Certificate manager. This service is only available in US East 1.

• Click Create Records.

Test the website

Verify that the website and the redirect work correctly. In your browser, enter your URLs.

And that's it. Congratulations! You have completed this tutorial. Don't forget to delete your resources.

---

Repository: AWS Learning Labs