Static website hosting by using S3, CloudFront and Route53

Step 1: Create an S3 Bucket

1. Log in to AWS Management Console.
2. Navigate to S3.
3. Create a new bucket:
   • Click on "Create bucket".
   • Provide a unique bucket name (e.g., your-domain-name.com).
   • Choose the appropriate region.
   • Click "Create bucket".
4. Enable static website hosting:
   • Click on the bucket name to open its properties.
   • Go to the "Properties" tab.
   • Click "Static website hosting".
   • Select "Use this bucket to host a website".
   • Enter the index document (e.g., index.html) and error document (e.g., error.html).
   • Save changes.
5. Upload website files:
   • Click on the "Objects" tab.
   • Click "Upload" and add your website files (HTML, CSS, JS, etc.).
   • Set the appropriate permissions to make these files public (you may need to update the bucket policy).

Step 2: Set Permissions

1. Set bucket policy:
   • Go to the "Permissions" tab.
   • Click "Bucket Policy".
   • Add the following policy (replace your-bucket-name with your actual bucket name):jsonCopy code
   • {
   • "Version": "2012-10-17",
   • "Statement": [
   • {
   • "Effect": "Allow",
   • "Principal": "*",
   • "Action": "s3:GetObject",
   • "Resource": "arn:aws:s3:::your-bucket-name/*"
   • }
   • ]
   • }

Step 3: Create a CloudFront Distribution

1. Navigate to CloudFront.
2. Create a new distribution:
   • Click on "Create Distribution".
   • Choose "Web" for the delivery method.
   • Set the origin domain name to your S3 bucket URL (e.g., your-bucket-name.s3.amazonaws.com).
   • Set the default cache behavior and other settings as needed.
   • Click "Create Distribution".
3. Configure the distribution:
   • Note down the CloudFront distribution domain name (e.g., d1234567890.cloudfront.net).

Step 4: Configure Route 53

1. Navigate to Route 53.
2. Create a hosted zone (if you don't have one for your domain):
   • Click on "Create Hosted Zone".
   • Enter your domain name and click "Create".
3. Create a record set:
   • Click "Create Record Set".
   • Set the type to A for alias or CNAME if not using an alias.
   • Set the name to your domain or subdomain (e.g., www).
   • For alias, set the alias target to your CloudFront distribution domain name.
   • For CNAME, set the value to your CloudFront distribution domain name.
   • Save the record set.

Step 5: Test Your Website

1. Wait for changes to propagate:
   • DNS changes can take some time to propagate.
2. Visit your domain:
   • Open your web browser and go to your domain (e.g., www.your-domain-name.com).

Step 6: (Optional) Enable HTTPS

1. Request an SSL/TLS certificate:
   • Navigate to AWS Certificate Manager (ACM).
   • Request a public certificate for your domain (e.g., your-domain-name.com and www.your-domain-name.com).
2. Attach the certificate to CloudFront:
   • Go back to CloudFront.
   • Select your distribution and click on "Edit".
   • Under "SSL Certificate", select "Custom SSL Certificate" and choose the certificate you requested from ACM.
   • Save changes.