DEV Community

Cover image for Host a static-website on AWS S3
Abraham E. Tavarez
Abraham E. Tavarez

Posted on • Updated on

Host a static-website on AWS S3

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 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. Otherwise, let's continue.

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

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

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

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

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

6- Click Create bucket.
create bucket

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

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

9- Click on Enable:

enable static

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

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. (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

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

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

14- Finally, you should see your folder listed:

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

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

object url

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

site

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

Top comments (0)