Hosting static website with AWS S3
In this article, I would like to talk about how we can host a static website with AWS S3. Here I am going to host a small website with an image. So first, we can understand how to upload an image to an s3, and then we can host our static website.
Steps
- Create a bucket in S3
- Upload an image to the s3
- Allow publically access to that image
- Host a static web application
Create a bucket in S3
First, navigate to the s3 from the AWS console and click the Create bucket button.
Then give a unique name to the bucket name ( this name should be unique otherwise we can not create a bucket). I gave a name like host-app-static-1234
After that, without changing any default values scroll down and click the create button. So like that we can create our s3 bucket.
Upload an image to the s3 bucket
Now we are going to upload an image to s3. So first navigate to the bucket that we created by clicking the name of the button.
Then we can see the upload option in the bucket. Let's follow the below step to upload the file.
- Click the upload button
- Click the Add files button
- Scroll down and press the upload button
Then we can see our image like this in the bucket.
Let's click the name of the image that we can see. In my case, I click the sky.png. Then we can see the object URL of our image.
But if we click that we can see a permission error like below. The reason for that is by default AWS not allowed to publicly access the objects in the bucket.
Allow publically access that image
To allow access to the bucket object publically, we need to edit some default policies in AWS. Let's see how can we do it.
- Navigate to the permission section of the bucket and click the Edit button on the Block public access (bucket settings) section.
- Untick the Block all public access checkbox and save the changes.
- Then scroll down to the Bucket policy section and click the Edit button
- Then we can see the Edit bucket policy section let's copy the Bucket ARN and click the policy generator button.
Then we navigate to the AWS policy generator. In there you can see the steps in the below picture. We can follow the below steps
- Select Type of Policy = s3 bucket policy
2. Principal = *
3. Service name = Amazon s3
3. Action = GetObject ( because we are going to get the object publically)
4. Amazon Resource Name (ARN) = your resource name that you copied from the above step and add /* to it. Eg : arn:aws:s3:::host-app-static-1234/*
5. Then add the statement and click the generate policy button
Then we can see the policy like below as a JSON object. Let's copy that.
Then go back to the Edit bucket policy page and add that policy and save the changes.
Then let's go to the Object URL of the image and click the URL. We can see our image now. In my case, it looks like this.
Host the static web application
Now we know how to add the image to the image to s3 and how to access it publically. Let's host our static application in the s3. For that, I use below HTML code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> Host static app to s3 </h1>
<img src="https://host-app-static-1234.s3.amazonaws.com/sky.png" alt="image" width="500" height="500" />
</body>
</html>Change my image URL to your one so you can see the image that is uploaded to the s3.
Steps to host website.
- Navigate to the properties section of the bucket and scroll down we can see the static website hosting section and just click the Edit Button
2. Enable that static website hosting like below and type the name of the Html file you are going to upload. In my case, I name it index.html. Then save the changes.
3. Then upload the HTML file in the same way we upload the image. ( Just click the upload button and add the file). Then we can see our HTML file. Let's click it
4. Then we can see the Object URL of the HTML file as now objects are publically available we can click the URL and see our website
5. In my case it looks like below
That's it, guys. We did it. I hope you learn something from this article and let's upload some unique websites with the help of AWS S3 and share them with friends.
