Introduction

You can use Amazon Web Services (AWS) to easily and inexpensively host websites that use client-side technologies (such as HTML, CSS, and JavaScript) and do not require server-side technologies (such as PHP and ASP .NET). This type of website is called a static website and is often used to display content that does not change.

You can use Amazon Simple Storage (S3) to host a static website that is secure, fast, and scalable to prevent data loss and support enterprise traffic. To do this, store your site files in Amazon S3 and use S3 to serve content to to our site visitors. After setting up a static website in S3, you can create a content delivery network (CDN) using Amazon CloudFront.

A CDN makes website content available in data centers around the world, called edge locations. Edge locations can help speed up your site by reducing latency. This is especially important if your website displays large media files, such as high-resolution images, audio or video.

Are you ready to start?

After following the instructions, your environment should look like this:

Create an Amazon S3 bucket for your static site

Amazon Simple Storage Service (Amazon S3) is an AWS object storage service. It is known for its scalability, availability, security and performance features. Object storage is a common need, and Amazon S3 is often part of every non-critical solution built into AWS.

You can create an S3 bucket using the AWS Management Console. As with many other AWS services, you can use the AWS API or the Command Line Interface (CLI). Once the bucket is created, configure it for a static website.

Kindly watch the below video to create an Amazon S3 bucket for your static site

NOTE

• To get a bucket policy that allows public access to all objects in your S3 bucket, click here and replace YOUR_BUCKET_NAME with the name of your S3 bucket.

• To download a zip file containing a basic website, click here.

Paste the endpoint into the address bar of the new browser tab. You should see the site load like this:

This website is powered by an Amazon S3 bucket.

Till now, you created an Amazon S3 bucket, configured it to host a static website, and created a bucket policy. Finally, you uploaded a simple example website and made it publicly available in a web browser.

AWS does not recommend serving websites directly from Amazon S3. Instead, we recommend using Amazon S3 as your content delivery network (CDN) origin. A CDN takes a copy of your website from its original location and stores it in multiple global locations. The main benefit of using a CDN is low latency when users access your site.

Creating an Amazon CloudFront distribution for your static site

Now, you will create an Amazon CloudFront distribution to place your website behind a CDN.

Amazon CloudFront is a global content delivery network (CDN) that delivers data securely and efficiently. CloudFront brings your site to the edge of the network, reducing latency when accessed from a variety of global locations. You configure an Amazon CloudFront distribution for a static site hosted in an Amazon S3 bucket.

Kindly watch the below video to create an Amazon CloudFront distribution for your static site

• Copy the value in the Distribution Domain Name field.

Note: Yours will be different. This domain name is randomly generated and unique for each distribution in Amazon CloudFront.

• Paste the domain name into the address bar of the new browser tab. The website you uploaded to your Amazon S3 bucket is displayed.

• You access your website through an Amazon CloudFront distribution.

• Drive traffic to your website by visiting and clicking on different pages.

• If you use a different web browser, visit the site in a different browser.

Conclusion

Here, you created an Amazon S3 bucket and used it to host a static website. You created an Amazon CloudFront distribution and configured it to use an S3 bucket as a source. You have verified that we can directly access our static website through Amazon S3 and Amazon CloudFront distributions.

Gratitude for perusing my article till the end. I hope you realized something unique today. If you enjoyed this article then please share it to your buddies and if you have suggestions or thoughts to share with me then please write in the comment box.

Follow me and share your thoughts,GitHubLinkedInTwitter