Our Sponsor

First a huge thank you to this articles sponsor Tutorials Dojo!

Elevate your cloud computing career with Tutorials Dojo, the ultimate resource for mastering AWS, Azure, and GCP certifications. I’ve personally been using Tutorials Dojo for over 5 years and have used their practice exams to pass multiple AWS Certification exams. Their expertly crafted study guides, hands on labs, and realistic practice exams are designed to help you ace your certification exams on the first try. I can personally validate the quality and value Tutorials Dojo’s practice exams, I promise you they’ll be harder then the actual exam you sit.

Thank you so much to Tutorials Dojo for sponsoring this weeks issue!

Prerequisites

Amazon Web Services (AWS) offers a flexible, low cost solution for hosting a static website. In this guide, you will learn how to use Amazon S3 to store your website files and AWS CloudFront to deliver your content. Before you begin you’ll need:

• An active AWS account
• Basic familiarity with HTML (or your preferred static site language)
• Your website files, including index.html, ready for upload

Step 1: Create an S3 Bucket

1. Sign in to the AWS Management Console.

2. Go to the S3 service.

3. Choose “Create bucket.”

4. Enter a unique bucket name (for example, “my website bucket”) and select your preferred region.

5. Uncheck “Block all public access” so your site can be publicly accessible.

6. Confirm the warning about making the bucket public.

7. Click “Create bucket.”

Step 2: Configure S3 for Static Website Hosting

1. In the S3 dashboard, select the new bucket.

2. Go to the “Properties” tab.

3. Scroll to “Static website hosting” and click “Edit.”

4. Choose “Enable.”

5. Set “index.html” as your index document. Optionally, specify an error document (for example, “error.html”).

6. Save your changes.

Step 3: Upload Your Website Files

1. Inside your bucket, open the “Objects” tab.

2. Click “Upload” and add your website files (HTML, CSS, images, and so on).

3. Follow the on screen prompts to complete the upload.

Step 4: Set the Bucket Policy for Public Access

You need a bucket policy that allows public read access to your website:

1. Open the “Permissions” tab for your bucket.

2. Click “Bucket Policy.”

3. Paste the following JSON (replace “your bucket name” with the actual bucket name):

{
   "Version":"20121017",
   "Statement":[
      {
         "Sid":"PublicReadGetObject",
         "Effect":"Allow",
         "Principal":"",
         "Action":"s3:GetObject",
         "Resource":"arn:aws:s3:::your bucket name/"
      }
   ]
}

4. Save the policy.

Step 5: Set Up Your CloudFront Distribution

CloudFront distributes your content worldwide with low latency:

1. In the AWS Console, go to CloudFront.

2. Click “Create Distribution.”

3. Under “Origin Domain,” pick your S3 bucket. (Keep “Origin Path” empty.)

4. For “Viewer Protocol Policy,” select “Redirect HTTP to HTTPS.”

5. Under “Default Root Object,” enter “index.html.”

6. Leave other settings at default or adjust as needed.

7. Click “Create Distribution.”

Step 6: Wait for CloudFront to Deploy

CloudFront distributions can take 10 to 15 minutes to deploy. In the CloudFront dashboard, watch the status change from “In Progress” to “Deployed.”

Step 7: Test Your Website

1. Find your CloudFront distribution’s domain name (for example, d1234abcd.cloudfront.net).

2. Enter it in your browser’s address bar. Your website should now appear.

Additional Tips

Security Best Practices

• Consider using AWS WAF for additional protection.
• Regularly review and update your bucket policy.
• CloudFront automatically handles SSL/TLS encryption, but verify your settings if you encounter issues.

Performance Optimization

• Enable compression for text based files to speed up loading.
• Adjust CloudFront cache behaviors based on how frequently your site is updated.
• Optimize images and static assets for faster delivery.

Cost Considerations

• S3 and CloudFront use a pay as you go model.
• Monitor AWS usage and set up billing alerts to avoid surprises.

Troubleshooting Common Issues

• If the site is not accessible, revisit your bucket policy and public access settings.
• If changes are not appearing, try clearing the CloudFront cache or confirm your uploads.
• For SSL or HTTPS problems, review the viewer protocol settings and any SSL certificate configurations.

Conclusion

By hosting a static website on AWS using S3 and CloudFront, you gain scalability, high performance, and strong security. Key benefits include global content delivery, high availability, a cost efficient pay as you go model, and robust security features. As you grow more comfortable with AWS, explore additional optimizations and keep an eye on your usage and security settings.