Overview
In this article, you will learn how to deploy a simple website using HTML, CSS, and JavaScript using Amazon CloudFront and S3.
Amazon Simple Storage Service (S3) allows you to host static websites by providing object level storage. It stores and retrives data as objects iwithin buckets, making it perfect for static website hosting.
Amazon CLoudFront is a Content Delivery Network (CDN) service which utilizes a network of edge locations to cache copies of your website content closer to users, reducing latency and ensuring faster delivery.
Step 1: Log in to AWS and Access S3
Login to your AWS management console and search for s3 in the search bar.
Step 2: Create an S3 Bucket
- Click on create a bucket
- Choose General purpose
- Enter a unique name for your bucket
- Ensure Block all public access is selected.
Leave the rest of the settings at their default values and click Create bucket.
Step 3: Upload Website Files
Once your bucket is successfully created:
- Click on the newly created bucket.
- Upload your index.html, css , javascript , and any other static files.
Step 4: Set Up CloudFront Distribution
Now, we'll set up a CloudFront Distribution.
- Navigate to CloudFront in AWS Console.
- Click Create Distribution.
- Create a new Origin Access Control (OAC) to securely grant CloudFront access to your S3 bucket.
- Set Redirect HTTP TO HTTPS
- Since this is a basic tutorial, your website won't need WAF.
Once you’ve completed the setup, AWS will create your CloudFront distribution.
Step 5: Update the s3 Bucket Policy
After creating the CloudFront distribution, you'll see a prompt asking you to update your S3 bucket policy. This step is important to allow CloudFront access the content in your bucket.
Copy the policy, head over to your s3 bucket permissions tab and paste the new policy in the Bucket Policy Editor and save the changes.
Step 6: Access Your Website
Copy the Distribution Domain Name from CloudFront, open it in your browser, and you will see your static website!
Conclusion
You've now successfully hosted a static website using Amazon S3 and Amazon CloudFront. With S3 providing scalable storage and CloudFront ensuring fast, reliable content delivery through its edge locations, your website is well-optimized for performance and availability.