How to host a static website on AWS S3 Bucket
Do you know that you can register on AWS and get a free tier account for 12months? Yes, you can.
So S3 bucket is one of the various features or services available on the AWS cloud platform. So let’s talk briefly about Amazon S3.
What is AWS S3: AWS S3 (“Simple Storage Service”) enables users to store and retrieve any amount of data at any time or place, giving developers access to highly scalable, reliable, fast, and inexpensive data storage, Designed for 99.999999999 percent durability, AWS S3 also provides easy management features to organize data for websites, mobile applications, backup and restore, and many other applications.
So, How can you host your test website or real website without launching any EC2 instances, the way out is AWS S3; let’s dive in.
STEP 1:
If you do not have an account on AWS, then you will need to create one for free, and if you do already then just sign in to the console.
Once you successfully Sign, you will be taken to a dashboard that looks like this
Front the dashboard use the search box to search for S3 and click to open, it displays a create bucket page as shown below:
Click on the create bucket and give your bucket a name e.g my-mediumarticle-bucket, selection the AWS region you want to place your website.
NOTE: For your bucket content (your website), to be accessible to everyone i.e. the public, you much uncheck the Block all public access checkbox and tick the agreement checkbox
After this is done, kindly click the create button and your bucket will be created with a dashboard that looks like below.
Now, the time has come for us to upload our website into our bucket to do that, click on the bucket name my-mediumarticle-bucket and click on the upload. The upload can be done in 3 ways namely;
- Add Files: this enables us to add numerous files but cannot accommodate a folder or directory
- Add Folder: This enables us to add a folder but one after the other in the case of numerous folders.
- The third option is to drag the whole project and let it be uploaded at one which is easier. This is our best alternative
Once our website files have been dragged to the page, we can click the upload button to upload our web files to the S3 bucket an image of the upload process is shown below. NOTE: The content of our website folder is what we are to upload else there may be directory location problems.
Once the files are uploaded successfully, we have 2 more steps to viewing our website. but first, return to your bucket dashboard and click on the name of the bucket, we have some tweaking to our permission and properties tab.
Click on the properties tab and scroll up and locate static website hosting and click on edit
It opens up another page where you have a chance to change the static website hosting status from disable to enable
- Click on enable to use static website hosting feature, immediately you choose to enable, select host a static website as hosting type, and in the index and error document section enter the name of your index file and error file (you can use the index file name as error file name too) then save changes.
Immediately after you save changes, a bucket website endpoint which is the URL for your static website would have been generated under the static website hosting of your properties tab.
Lastly, navigate to the permission tab of the bucket and locate the bucket policy section. Click edit and replace the policy with the ones below and click save.
{
“Version”: “2012–10–17”,
“Statement”: [
{
“Sid”: “PublicRead”,
“Effect”: “Allow”,
“Principal”: “*”,
“Action”: [
“s3:GetObject”,
“s3:GetObjectVersion”
],
“Resource”: “arn:aws:s3:::my-mediumarticle-bucket/*”
}
]
}HURRAY! We have hosted our static website on AWS S3, copy and paste the bucket website endpoint on a web browse to view.
