Explained: How to Configure a Static Website Using S3 and Cloudfront

  Introduction

Websites that employ client-side technologies (such HTML, CSS, and JavaScript) and don't need server-side technologies can be easily and affordably hosted using Amazon Web Services (AWS) (such as PHP and ASP .NET). A static website is one of these types and is frequently used to display content that doesn't change.

To host a static website that is safe, quick, and scalable to handle enterprise traffic and prevent data loss, utilise Amazon Simple Storage (S3). Store your website's files on Amazon S3 and use S3 to serve material to our site visitors to do this. You can use Amazon CloudFront to build a content delivery network (CDN) after setting up a static website in S3.

In edge locations, or data centres around the world, a CDN makes website content accessible. By lowering latency, edge locations can help your site load faster. This is crucial if your website uses large media files, such as HD images, audio files, or videos.

Are you prepared to begin?

If you followed the instructions, your surroundings should now appear as follows:

Make a bucket in Amazon S3 for your static websitewebsite

An AWS object storage service is Amazon Simple Storage Service (Amazon S3). It is renowned for its performance, security, and scalability qualities. The need for object storage is widespread, and every non-critical AWS solution frequently includes Amazon S3.

With the help of the AWS Management Console, you may build an S3 bucket. You can utilise the Command Line Interface or the AWS API, as with many other AWS services (CLI). Configure the bucket for a static website after it has been created.

To create an Amazon S3 bucket for your static site, please watch the video below.

NOTE

Click here and substitute YOUR BUCKET NAME with the name of your S3 bucket to obtain a bucket policy that grants public access to every object in your S3 bucket.

Click here to download a zip file containing a simple website.

In the address bar of the new browser tab, paste the endpoint. The website should load as follows:

Powered by an Amazon S3 bucket, this website.

Up until this point, you've built a bucket policy, an Amazon S3 bucket, and set it up to serve a static website. Finally, you published a straightforward example website and made a web browser accessible to everyone.

AWS advises against using Amazon S3 to directly serve websites. As an alternative, we advise using Amazon S3 as the origin of your content delivery network (CDN). A CDN copies your website from its original location and stores it in other places around the world. Low latency when users access your site is the main advantage of using a CDN.

For your static site, create an Amazon CloudFront distribution

To hide your website behind a CDN, you must first build an Amazon CloudFront distribution.

A worldwide content delivery network (CDN) that sends data securely and effectively is called Amazon CloudFront. By moving your website closer to the network's edge, CloudFront lowers latency when it is accessed from various parts of the world. A static website hosted in an Amazon S3 bucket requires the configuration of an Amazon CloudFront distribution.

To create an Amazon CloudFront distribution for your static site, please watch the video below.

Note: It will be different for you. This domain name is unique to each distribution in Amazon CloudFront and is generated at random.

In the address bar of the new browser tab, paste the domain name. It displays the website that you uploaded to your Amazon S3 bucket.

image.png

You use an Amazon CloudFront distribution to access your website.

Visit various pages on your website and click on them to increase traffic.

Visit the website in a different web browser if you use a different one.

Conclusion

In this case, a static website was hosted in an Amazon S3 bucket that you built. You established an S3 bucket as the source for an Amazon CloudFront distribution that you had generated. You've confirmed that we can use Amazon S3 and Amazon CloudFront distributions to directly access our static website.

I appreciate you reading all the way through my article. I hope you had a special insight today. If you liked this article, please tell your friends about it. If you have any comments or suggestions for me, please leave them in the comment section.