Host a static-website on AWS S3 
Tags: beginners, aws, cloud, webdev
Published: 2021-03-09 13:14:21

Are you looking for a free and easy way to host a static-website? Or maybe you're just looking to learn more about AWS S3? Either way, this article will help you!

#Intro

A **static-website** is a website that doesn't change. All of its content is pre-built and static, just sitting somewhere as opposed to a dynamic website where its content is built at the time of the request and can change based on new data, for example, a weather website.

**AWS S3 (Simple Storage Service)** is a super easy storage solution that allows you to store and retrieve unlimited amounts of data from anywhere. You can store any kind of data on S3, from text files to pictures, data files, videos and more. AWS calls these files "objects," and the name of your object is called a key. 

Even though AWS S3 is simple to use, S3 also has advanced options for security, encryption and more. You can read more about [AWS S3](https://aws.amazon.com/s3/) after you're done. 

##Let's get started

If you don't have an AWS account, follow this link to create a [free AWS account](https://aws.amazon.com/). Otherwise, let's continue.

1- Head over to our **AWS Management Console**, then search for *S3* and click on it.

![](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/search_s3.PNG)

2- Click on the big orange **Create Bucket** button. 
You can think of a *Bucket* as a folder for you to organize your data.

![](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/create_btn.PNG)

3- Now we need to give our Bucket a name. This name needs to be *globally unique*. When you create a Bucket, AWS will create a URL that's unique to each Bucket in the world.
 
I'll use my initials and the purpose of this Bucket as name:
![create a bucket](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/bucket_name_region.PNG)

4- Uncheck **Block all public access**. AWS by default will *Block all public access*, so in order for the public to see your website, we need to make this particular Bucket public.
Now, check the *acknowledge* box so we can continue.

![creating public bucket](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/public_bucket.PNG)


5- Leave **Bucket Versioning** and **Default encryption** *Disabled*. you can always *Enable* them later if need it.

6- Click **Create bucket**.
![create bucket](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/create_bucket_bottom.PNG)

7- Nicely done! Now you can see that your new Bucket was created. Let's click on the Bucket and navigate to the **Properties** tab:

![properties tab](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/bucket_properties.PNG)

8- Scroll all the way to the bottom until you see **Static website hosting** and click on **Edit**.

9- Click on **Enable**:

![enable static](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/enable_static.PNG)

10- Go down to **Index document** and type the name of the main or home page file of the website. If your file name is not already index.html, just write the name of the main page file.
In my case its index.html:

![main file](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/main_file.PNG)

11- Scroll all the way down and click **Save changes**.


12- Well done! Now we're ready to upload our website files.
If you need a template HTML page, you can download a simple one that I created for you on [GitHub](https://github.com/AbeTavarez/static-website-template). (You can ignore the README.md file)
Now that you have the files ready, click on the **Objects** tab located on the same page, then click on the big orange **Upload** Button: 

![upload button](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/upload_btn.PNG)

13- If you have a single file, you can upload your index.html file by clicking on **Add files**. If you have multiple files, click on **Add folder** instead.

In my case, I have a Folder (HTML_Cloud_Resume) that contains an index.html file and another folder (CSS) that contains a main.css file.
- HTML_Cloud_Resume/index.html
- HTML_Cloud_Resume/CSS/main.css

![uploaded file](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/uploading_html_css.PNG)

Now scroll down and click on **Upload**, then click **Close**.

14- Finally, you should see your folder listed:
![](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/folder_listed.PNG)

Click on your folder, select all the **Objects** in the folder, click on **Actions**, scroll down and click on **Make Public**, and then the orange **Public** button again, and finally, click **Close**. Now your *Objects* are also public.
*If you have any files inside other folders, make sure to make them public as well.*

![make objects public](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/make_objects_publick.PNG)

15- To see your website, click on index.html and look for the **Object URL** link:

![object url](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/object_url.PNG)

Congratulations! If you followed all the steps you should be looking at your static-website.

![site](https://abe-assets-cloud.s3.us-east-2.amazonaws.com/aws-static-site.PNG)

You can share this link with the world now. If you make any changes to the website files just upload again the files that you changed to your S3 **Bucket**.

Thanks for reading. Please share with your friends or leave me a clap or comment.  

I'll see you on the next one!

Contact me on [LinkedIn](https://www.linkedin.com/in/efrenabrahametavarez/)