How to create and configure an AWS S3 bucket to host a static website and serve content through an AWS Cloudfront endpoint.

First, login using the AWS Console and the admin credentials you have created. Next, we will navigate to Storage and S3 as seen below.

Click on S3.

Below we you will need to create a unique Bucket name.

Unique name given to S3 bucket above under bucket name

Next, we will leave all ACL’s unchecked.

above we have unblocked all ACL’s allowing all traffic and have checked off a the bottom of the window that we acknowledge the unblocking

On the properties tab we will now setup our S3 bucket to be a static website host. We will also, designate the home of the default website as index.html.

When designating the index.html file we must create the file and make note of where index.html has been saved.

Above choose Host static website and designate file here we choose to call it index.html, but it can be anything.

Scroll to bottom of the window and click on save changes.

Next, choose permissions and goto Update bucket policy, click edit.

copy & paste the bucket policy update below:

The script above represents a correct policy that has been applied

Now we will upload our our index.html file associated with the project.In this case it is index.html which was created and stored on my local PC using MS Word and saving in html format. The upload was successful as evidence at bottom of screen of upload date, time and size of file.

Remember this file or any file you choose must be saved locally on your workstation

Next choose properties at top of window and scroll to bottom of page for the Static website hosting option. Click on url at bottom of page your index.html file will load.

Above click on url at the bottom of the page and access the website

You completed step one of our process of making a S3 bucket a static host. But if you notice this is not a secure method of access the S3 bucket as all of it contents are exposed to the public which is very scary.

We will now create a Cloudfront to securely serve our end users through a Content Delivery System, providing user access via AWS Edge locations. Navigate to the AWS Management Console and type Cloudfront in the search bar.

Click on Create Distribution.

click create distribution

Click on the Origin domain drop down and the listing will appear choose it.

If you click on Origin Domain a drop list will appear and you choose your distribution

Choose Yes use OAI (bucket can restrict access to only Cloudfront)

Next enter the name of the root URL (index.html)

after entering root to url index.html above click save changes

Next you will access Cloudfront you will see the Distribution that you just created, choose it and copy & paste the url provided under Distribution Domain name in to your web browser.

paste the distribution domain name into web browser

Next to test the new secure Cloudfront website access click the Distribution domain name link at top left corner of the window.

As you can see a secure link has was enabled in CloudFront for user access. Making the experience secure, seamless and providing durability and is providing low latency since we are using Content Delivery Services on our AWS edge locations.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Eric Wainwright

Eric Wainwright

DevOps engineer in search of Cloud Engineer role. Looking for Cloud Operations or Cloud Infrastructure opportunities.