# 5 Easy Steps to Deploy Static Website to AWS S3

#### Requirements

To follow this guide, you will be required to have:

1. AWS Account
    
2. Static Site Template or your custom HTML
    

#### Step 1: Creating a bucket

To create a bucket in AWS S3, follow these steps:

1. Go to your AWS Console.
    
2. Search S3 and Select it from the search bar.
    
3. Click on `Create bucket`.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696824858893/c77174de-8ce6-4365-860b-302ac536f9fc.png align="center")

1. It will open up a new window where you will be required to fill up the bucket information.
    
2. Add bucket name. It should be the name of your website.  
    eg. `buysoundbar`
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696825133193/5cbf16e7-0f50-463d-8656-140b4816430b.png align="center")
    
3. Skip all the settings to default and at the bottom, click on `Create bucket` to create your bucket.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696825310812/f31f3afc-6f0f-44cb-93f8-22053b36d5cf.png align="center")
    
4. Once the bucket is created, a pop-up message will be shown and you will be redirected to the bucket list page.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696825346978/fae5a0d9-27f5-4188-aae4-4158ed853e18.png align="center")

#### Step 2: Making bucket public

By default, Block public access is on for each new bucket. Bucket should be made public before hosting any static website on it.

1. Select your bucket from the list.
    
2. Select `Permissions` tab.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696827021942/f2398835-4a97-4c81-a97f-2e356d6e02ba.png align="center")

1. On the `Block public access` block, click on `Edit` to update the public access.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696827408537/f36f2551-5b67-43b7-8aa1-4c5867743b02.png align="center")
    
2. De-select the checkbox for public access.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696827616343/f55ef036-2b88-4e38-94d1-01889bfca13a.png align="center")
    
3. Click on `Save changes` to save the settings.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696827647837/9bee4121-1d71-476d-9a82-f22f94676eb2.png align="center")
    

#### Step 3: Upload your static site content

Create `index.html` page and add the following content.

```xml
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Buy Soundbar</title>
  </head>
  <body>
    <h1>Welcome to Buy Soundbar</h1>
  </body>
</html>
```

1. Select your bucket in AWS S3.
    
2. Click on `Upload` . In the next screen, select `Add files` to add file.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696828279289/bc1c4ca0-b8fe-47f1-835e-845679a6db5d.png align="center")
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696828288339/78c1719e-dcca-4f5f-9032-d40d995819c1.png align="center")
    
3. Select the file to upload. I have selected the `index.html` file from my device to upload it. Once the file is selected, click on `Upload` the button from the bottom of the page.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696828422234/7f175048-4c9f-41c2-b15f-2b47e4a88778.png align="center")

#### Step 4: Making objects public using bucket policy.

All the objects present in the bucket should be public for any static website. To make the objects public, we will be using the bucket policy.

1. Select your bucket.
    
2. Select `Permissions` the tab for the bucket.
    
3. Move to the `Bucket policy` block and click on `Edit`.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696829065286/1e52d521-5489-4507-94eb-6d03e96cfcd0.png align="center")
    
4. Paste the following policy in the editor.
    
    ```json
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "PublicReadGetObject",
                "Effect": "Allow",
                "Principal": "*",
                "Action": [
                    "s3:GetObject"
                ],
                "Resource": [
                    "arn:aws:s3:::Bucket-Name/*"
                ]
            }
        ]
    }
    ```
    
    Your editor should look like this:
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696829612380/c0d53d61-2193-4fb6-b39d-4eedb3de7ed5.png align="center")

Replace `Bucket-Name` with your bucket name. The final version should look like this:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696829686232/1b761b7f-6cb3-4d1c-9d6b-e9b62a77ff21.png align="center")

Click on `Save Changes` to save the policy.

#### Step 5: Enabling Static website hosting for the bucket

1. Select your bucket
    
2. Click on `Properties` tab. Move to the bottom of the Properties tab.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696830952092/b3affca7-e890-4722-b49e-bad6f9e2d476.png align="center")
    
    By default, static website hosting is disabled. Click on `Edit`.
    
3. Select `Enable` toggle for Static website hosting in the Edit page.
    
4. Add `index.html` in the Index document and click on `Save changes`.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696831075679/d329326f-6413-4b69-9f14-b12e961f1398.png align="center")

1. After saving, move to the bottom of the `Properties` tab in the `Static website hosting` section. You will find the URL for your static site.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696831152530/933f5a36-0221-4894-8f9c-8e8ca3d523e6.png align="center")

1. Open the link in the new tab and you will see your static website which is hosted in AWS S3.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1696831298848/0debc800-9158-4a25-bbab-64071f1162ec.png align="center")

Congratulations 🎉. You have successfully hosted your static website using AWS S3.

#### What's next?

Static website hosting with AWS S3 and CI/CD with Github Action.

#### [Part 2: 4 Steps to configure CI/CD for website deployed in AWS S3](https://blog.eklak.dev/4-steps-to-configure-cicd-for-website-deployed-in-aws-s3)
