Static website hosting by using S3, CloudFront and Route53

Static website hosting by using S3, CloudFront and Route53

Static website hosting by using s3 and cloud front and Route53

Published Jun 17, 2024

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.