Host Static Website on AWS for free
Tags: aws, s3, website
Published: 2024-02-25 14:39:46

In this quick start guide, we'll walk through the steps to set up and host a static website on AWS, allowing you to showcase your content or project to the world without breaking the bank. Whether you're a developer, blogger, or just someone looking to establish an online presence, AWS provides an accessible and efficient way to deploy and manage static websites with ease. Let's dive into the process and get your website up and running on the AWS cloud.

## Walkthrough...

- Get you a free website template quickly.
- Create S3 bucket 
- Add bucket policy 
- And your website is hosted, tadaa!

## Get you a free website template quickly.

If you have the source code for your website ready, then well, kudos to you!, but you came here in a hurry just to get your portfolio website out there, well, here I am to save you.

Go to [HTML5 Up](https://html5up.net/)

Pick a template..

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/njsohpez7u6qoif7ei6q.png)

Hit download, and the source code will get downloaded.

Browse to the folder, and open it with vs code


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gow1ed2e820ya60bwu1e.png)

Edit the index.html page, add your relevant info like name, designation, that you wish to add like shown below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nao4r2vcvfifzsfp3olr.png)

Save it.
Make sure, you don't change the folder structure of the source code, if you have no idea about how all HTML, CSS, and JS are working.

## Create S3 bucket 

Login to your AWS account and navigate to the S3 dashboard.

Click on 'Create Bucket'


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmexrl6eyy6djsck3qcw.png)

Give a unique name to your bucket.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3fnd2dokhiujmopc22g.png)


You need to change the 'Block Public Access' setting for the bucket.
'Uncheck the Block all public access' checkbox 
and check the 'I acknowledge.....' box, as shown in the snip below.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l6bnnuokxx7t11mcid8l.png)


Hit Create Bucket.

## Change bucket policy

Let's add a bucket policy to our bucket, that will allow to read the objects within our AWS bucket.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9mgzv77an4z6n19vv5ap.png)

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

Copy the code and paste it in the 'Bucket Policy' section, under the Permissions tab, by clicking on Edit. Now, replace the 'bucket-name' with your bucket name.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z159ul0peptz02kmqfqn.png)


## Add source code to the bucket

Go back to the 'Objects' section. Click Upload.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxwu40lw8m3v4w1c8nwx.png)

Now, we will be uploading the files and folders that are present in our source code for our website. 
First, we will upload the files. Click on Add files. 

Select the files that are present in the source code folder. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zknq1tc1lc46sgszc0ew.png)

After selecting the files, click Upload. 

All the files will appear in front of you as Objects. 

Now let us upload folders that are present in our source code folder in a similar fashion as done above.

Now the bucket will look something like this...


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aa8bhb5j1ck2gnc5pxqy.png)


## Get the URL for your bucket 

Go to the 'Properties' section, scroll down to 'Static Website Hosting'

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0cgyek6hshfbpfxbyix.png)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9zibegfg9vh92ywti97.png)


Copy the link, and open it in the new browser, wohoooo! your website is now hosted! For FREE! 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jncmi4fon93fwgzqy3yi.png)


And it's done! 

Thank you for reading!!
Give a like, and share it with your folks!