DEV Community

Sivaranjanibharath
Sivaranjanibharath

Posted on

Create a static S3 website

Step 1: Create a bucket

  • Sign in to AWS console and open S3 service using the link (https://console.aws.amazon.com/s3/). Image description
  • Select Create bucket. Enter the bucket name(Ex. Hello) and choose the region where you want to create bucket.Leave the other settings as default.
    Image description

  • Then, choose Create option to create the bucket.

Step 2: Enable static website hosting

  • Now, bucket is created. Under the bucket list select the bucket you have created.Then, To enable static web hosting go to Properties tab of the selected bucket.
  • Look for Static website hosting, choose Edit.

Image description

  • Then, under Static website hosting, choose Enable.

Image description

  • In Index document, enter the index file name of the index document, typically index.html(you have to create one for your website)
  • In Error document, enter the error file name of the error document, typically error.html(you have to create this one for returning when an error occurs)
  • Click Save changes

Image description

Step 3: Edit Block Public Access settings

  • Click into your bucket and then select the ** Permissions** tab at the top
  • Under Public access settings click edit.

  • Now disable Block all public access and click save changes.

Image description
-It will ask for confirmation to unblock public access as shown below. Type confirm and click confirm .

Image description

Step 4: Add a bucket policy that makes your bucket content publicly available

  • Under Permissions tab you will find Bucket policy and click edit to add bucket policy.

  • Add the following policy and click Save.

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::Bucket-name/
"
}
]
}

Image description
Step 5: Configure an index document

  • Create an index.html file.Save it locally and the filename should match the index document name that you entered in step 2.Then upload the file in the bucket you created as shown below.

Image description

Image description

Image description

Step 6: Configure an error document

  • Create an error.html file.Save it locally and the filename should match the error document name that you entered in step 2.Then upload the error.html file in the bucket you created as shown in above screen shot.

Step 7: Test your website endpoint

  • To check your website Go to Buckets and select Properties.At the bottom of the page,under Static website hosting, choose your endpoint below to see your website as shown in above screen shot.

Image description

Image description
Step 8: Clean up

  • Delete the resources if you created this website for learning purpose.

Top comments (0)