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:
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.
5- Leave Bucket Versioning and Default encryption -Disabled. you can always Enable them later if need it.
6- Click 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:
8- Scroll all the way to the bottom until you see Static website hosting and click on Edit.
9- Click on Enable:
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:
11- Scroll all the way down and click Save changes.
12- Well done! Now we’re ready to upload our website files.
Click on the Objects tab located on the same page, then click on the big orange 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
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.
15- To see your website, click on index.html and look for the Object URL link:
Congratulations! If you followed all the steps you should be looking at your static-website.
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
