How to Host a Static Website on Amazon S3

How to Host a Static Website on Amazon S3 image

Static websites can be hosted on various web servers however for many customers the Amazon S3 cloud is their preferred choiceeasy steps website owners can host their pages on Amazon S3.


Static Website and Amazon S3 Hosting: How To Prepare The Cloud

By definition static websites are web pages that include static elements — this might include client-side scripts. On the other hand, the dynamic websites utilize frameworks and complex solutions in order to provide server-side processing. Static websites, therefore, load much faster and will not place a heavy load on the resources of the servers. Amazon S3 is specially created for static websites as it does not support server-side scripting.

Website owners will be required to have prepared a suitable directory structure — the sites will need to be prepared in suitable way. All images and links should point to the relevant elements accordingly. There are two ways to configure the Amazon S3 buckets — either to use the AWS Management Console or the AWS SDKs.

Before being able to host the static sites the necessary environment needs to be prepared. According to Amazon’s terminology, every object is stored in a “bucket”, if it is not set then it must be created. We remind our readers that object storage and transfer is charged while creating buckets is free.

Amazon S3 bucket creation via the Management console is done by following these steps:

  1. Login to the AWS Management services and open the S3 console.
  2. Choose the Create bucket option and enter the required data. The name must comply with the DNS requirements conventions — the name must be unique across the whole Amazon S3 cloud, be at least 3 characters and not longer than 63, must start with a lowercase letter or number and not contain any uppercase characters in its name.
  3. The region options selects the geographical location where the site will be hosted.
  4. The default option is to allow public access to the S3 bucket. Confirm all data and select the Create Bucket button.

Also Read How To Make a Jekyll 4.0.0 Site



Uploading Your Static Website to Amazon S3: The Necessary Steps

When the website administrators have created their Amazon S3 bucket they will have a ready-made environment into which the files can be uploaded. The first step into launching the site will be to prepare the relevant index document which is the bucket’s home page, Amazon refers to it as the default page. During the configuration of the bucket, the users are given the option to specify which file will serve this role, by default this will be a index.html.

amazon s3 settings image

When the users have created their S3 bucket they will then need to upload their files. By opening a file manager window on the local computer and navigating to the prepared files folder the website owners can use a drag and drop to the AWS console with the relevant bucket opened.

An important factor to consider is that cloud services do not follow the traditional files organization scheme. By definition, the Amazon S3 is a flat container of objects. However, the users can recreate a logical hierarchy by using the key names of the files. This is done by using the approach: if only the file name is referred to then it is considered that it is placed in the root of the public HTML location. The folder structure can be simulated by adding links to objects in the following way: to link a file hosted at data/2020/May/image.jpeg the Amazon S3 cloud will look for it in data/2020/May subfolder. Other types of links may not work properly on Amazon S3 depending on the code used.

Also Read How to Fix Shared Hosting Email Problems



Static Website Hosting on Amazon: Advanced Options

To allow for public access viewing the Amazon S3 buckets the website owners will need to enable it. This is done by disabling the block public access setting and then write an allow policy. To do the setting changes you will need to navigate to the Amazon S3 bucket which has been prepared for the static website and then choose the Permissions menu, click on Edit and then clear all public access values and then Save. This will present a pop-up window to which the website owners will need to confirm this choice. This will change the Access status to show “Objects can be public”.

amazon s3 hosting image

The second step is to write a public access policy to Amazon S3, this is done in order to allow Internet users to access the bucket. From the management console select the bucket and then enter the Permissions and then enter in the Bucket Policy option. The following rule needs to be entered in the Bucket policy editor:

{
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “PublicReadGetObject”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: [
“s3:GetObject”
],
“Resource”: [
“arn:aws:s3:::example.com/*”
] }
] }

The Resources section will need to be replaced with the with the bucket name you own, replace the example.com> with your URL. Click on Save to confirm the changes.

These are the basics you need to set up in order to upload and allow public access to your Amazon S3 static site. Other options you can configure may include security rules and advanced configuration. The exact configuration will depend on individual use cases.

Researched and created by:
Krum Popov
Passionate web entrepreneur, has been crafting web projects since 2007. In 2020, he founded HTH.Guide — a visionary platform dedicated to streamlining the search for the perfect web hosting solution. Read more...
Technically reviewed by:
Metodi Ivanov
Seasoned web development expert with 8+ years of experience, including specialized knowledge in hosting environments. His expertise guarantees that the content meets the highest standards in accuracy and aligns seamlessly with hosting technologies. Read more...

Leave a Comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Privacy Policy.
I Agree
At HTH.Guide, we offer transparent web hosting reviews, ensuring independence from external influences. Our evaluations are unbiased as we apply strict and consistent standards to all reviews.
While we may earn affiliate commissions from some of the companies featured, these commissions do not compromise the integrity of our reviews or influence our rankings.
The affiliate earnings contribute to covering account acquisition, testing expenses, maintenance, and development of our website and internal systems.
Trust HTH.Guide for reliable hosting insights and sincerity.