How to Host an HTTPS-Enabled Website on AWS S3 with CloudFront, SSL & Route 53

Step 1: Create an S3 Bucket for Static Website Hosting

Go to the AWS S3 console: AWS S3 Console

Click Create bucket.

Enter a unique bucket name (e.g., royalontech.pk).

Choose the AWS region closest to your users.

Uncheck “Block all public access”.

Enable static website hosting:

• Select “Enable”.
• Choose “Host a static website”.
• Set the index document (e.g., index.html).

Click Create bucket.

Step 2: Upload Your Website Files

• Open your S3 bucket.

• Click Upload and add your index.html, CSS, JS, and image files.
• Set public read access for the files by adding a Bucket Policy:
• Go to Permissions → Bucket Policy and paste the following JSON:

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

Replace example.com with your bucket name.

Step 3: Request an SSL Certificate from AWS Certificate Manager

1. Go to AWS Certificate Manager (ACM): AWS ACM
2. Click Request a certificate.
3. Choose “Request a public certificate”.
4. Enter your domain name (e.g., example.com and *.example.com for subdomains).
5. Choose DNS validation.
6. Click Request.
7. In the ACM console, find the CNAME records for validation.
8. Add these CNAME records in Route 53 (see next step).

Step 4: Create a Route 53 Hosted Zone and Add DNS Records

1. Go to Route 53: AWS Route 53
2. Click Create hosted zone.
3. Enter your domain name (e.g., example.com).
4. Choose Public hosted zone.
5. Click Create hosted zone.
6. Copy the NS (Name Server) records and update them in your domain registrar (e.g., GoDaddy, Namecheap, etc.).
7. Once DNS is updated, add a CNAME record to validate the SSL certificate (from Step 3).

Step 5: Create a CloudFront Distribution

1. Go to AWS CloudFront: AWS CloudFront
2. Click Create Distribution.
3. Origin Settings:
4. Set Origin Domain Name to your S3 bucket URL (e.g., example.com.s3.amazonaws.com).
5. Set Origin Access to “Origin Access Control (OAC)”.
6. Click Create new OAC, then Save changes.
7. Click Yes, Update Bucket Policy to grant CloudFront access to S3.
8. Default Cache Behavior:
9. Viewer Protocol Policy: Redirect HTTP to HTTPS.
10. Allowed HTTP Methods: GET, HEAD.
11. Distribution Settings:
12. Alternate Domain Names (CNAMEs): example.com.
13. Choose the SSL certificate from ACM.
14. Click Create Distribution.

Step 6: Update Route 53 with CloudFront Distribution

1. Go to Route 53 → Hosted Zones.
2. Click Create Record.
3. Choose Record Type: A (Alias).
4. Select Alias to CloudFront Distribution and choose your CloudFront domain name.
5. Click Create Record.

Step 7: Test Your HTTPS Website

Open https://example.com in your browser.

Verify that HTTPS is working.

Your static website is now hosted on AWS S3 with CloudFront (CDN), SSL encryption, and Route 53 DNS management.

Conclusion

By following these steps, you’ve successfully deployed a secure and scalable static website using AWS S3, CloudFront, ACM, and Route 53. This setup ensures high performance, security, and global reach.