DEV Community

Cover image for Hosting a static website using Amazon S3
Oteng Isaac
Oteng Isaac

Posted on

Hosting a static website using Amazon S3

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.Using Amazon S3 you can store and retrieve any amount of data from anywhere and can store any type of data.To store data in Amazon S3, you work with resources known as buckets and objects. A bucket is a container for objects. An object is any type of file and any metadata that describes that file.
In this tutorial, we would use Amazon S3 bucket to host a static website. In Amazon S3, the static website can sustain any conceivable level of traffic, at a very modest cost, without the need to set up, monitor, scale, or manage any servers. All the files of the website are upload to Amazon S3. We can configure any of our s3 buckets as a static website.
When an S3 bucket is configured for website hosting, the bucket is assigned a URL. When request is made to this URL, Amazon S3 returns the HTML file, known as the root object, that has been set for the bucket.
To enable public access to the bucket or objects, permissions must be configured that allows access. To configure these permissions, we would use BUCKET POLICY which is is a resource-based AWS Identity and Access Management (IAM) policy which grants other AWS accounts or IAM users access permissions for the bucket and the objects in it.

We would follow the following steps to complete the tutorial.
Let’s go to the AWS management console and search for Amazon S3.

Let’s go to the AWS management console and search for Amazon S3.

AWS console

In the bucket section click on Create bucket

create bucket
In the General configuration section, enter a unique name for the bucket and choose a region preferably a region closer to your location .In this tutorial, I have typed 'tutorotengcode123' as my bucket name. Note: This name must be unique among all created buckets on the AWS platform.

bucket name

In the Object Ownership section, choose ACLs enabled and Object writer. By selecting ACLS enabled, we have allowed objects in this bucket to be owned by other AWS accounts and access specified using ACLs. By selecting Object writer, we have allowed an object writer to remain the object owner.

Object ownership

In the Block Public Access settings for this bucket, deselect the Block all public access option and choose to select the check box to acknowledge the current settings of turning off block all public access.

block access

Note: Bucket, access points, and objects by default do not allow public access. By deselect Block all public access and accepting to acknowledge the current settings we are allowing public access.
We would scroll down and keep the default settings for encryption and click on Create bucket.

defaults keep
We can view details of the created bucket by clicking on the View details in the Success Alert.

Success Alert

Click on the name of the created bucket and in the Objects tab, click on the Upload button.

Upload

In the Files and folders section, click on Add files.
At this stage we can add all the files and folders that make up our static website. Select all the files and folders and click on Upload.

addfiles

After a successful upload of files, we should receive in the Success alert Upload succeeded.
Let’s review the upload files.

review

Click on the Properties Tab and scroll down to the Static website hosting section.
Static website hosting is disabled by default.

disabled

Click on Edit.

Edit
For Static website hosting, select enable ,for Hosting type select Host a static website, and for index document enter index.html.

index

Click on the Permissions tab, make sure Block all public access is set to Off.

off

Click on Edit in the Bucket policy section. Under the Bucket ARN, Click to copy the bucket’s ARN. In the Policy editor, copy and paste the bucket policy below by replacing the “Your_Bucket_ARN” with your bucket’s ARN.

{
  "Id": "MyPolicy",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "S3GetObjectAllow",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "Your_Bucket_ARN/*",
      "Principal": "*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

grant
The policy grants the s3: GetObject permission to any public anonymous user. Now click on Save changes.

Let’s go back to the Properties Tab and scroll down to Static website hosting section. In the Static website hosting section, under Hosting type, check to ensure that bucket hosting is set. Under the Bucket website endpoint, click the copy icon to copy the Bucket website endpoint.

congratulations

Paste the copied bucket website endpoint in your browser’s address bar and press enter.

final
Congratulations!!!!!!!!!!!!!!, we have successfully hosted a static website on Amazon S3.

Top comments (0)