Introduction
Hi everyone! Today in this blog we’re going to discuss how you can host a static website using an AWS S3 bucket.
Static and Dynamic website
First of all, before hoping on AWS S3, you might be wondering what is the difference between a static and a dynamic website.
Well, a static website is usually written in HTML using CSS and JavaScript. In a static website, the display content is the same for everyone. It does not involve any server-side processing or databases.
On the other hand, a dynamic website involves more user interaction along with server-side processing and also databases if required. Its content changes with every user depending on various factors. With that, let’s also know a little about the AWS S3 objects.
AWS S3 Object
Simply put, Amazon S3 is an object storage service that stores data as objects within buckets. An object is a file and any metadata that describes the file. A bucket is a container for objects stored in Amazon S3. You can store any number of objects in a bucket and can have up to 100 buckets in your account.
S3 supports only static websites. However, if you’re looking to host a dynamic website, then you can use services like EC2 or RDS for server-side processing and databases. The scope of this tutorial is confined to static websites only.
To gain more information about the S3 service, kindly head over to its official documentation.
Demo
With that information, let’s quickly host our own static website in a few simple steps.
1. Open your AWS console and create a S3 bucket.
First, login into your AWS console, and in the search bar [Alt + s] type S3. And you’ll be directed to the following page.
Now click on the Create Bucket option.
2. Provide required configurations
Now, you’ll be asked to provide some configurations. First of all, under the General Configurations section, give a name to your S3 bucket. Remember, the Bucket name must be unique and must not contain spaces or uppercase letters. Then, provide an AWS region. We’re going to continue with the Asia Pacific (Mumbai) ap-south-1 for this tutorial.
Now, scroll down and head over to Block Public Access settings for this bucket section and uncheck the following box to give your website public access. Also, click on the acknowledgment message just below that.
Leave the rest of the configurations for now and directly scroll down to the bottom of the page and click on create the bucket. Your bucket will now be successfully created as shown below.
3. Upload your files
Click on the name of your bucket and you’ll be headed over to this page.
Now, click on the Upload option and start uploading your files or folders. It’s going to take a minute or so to upload depending on the size of your files. Once done, head over to the Properties section and scroll to the end to Static Website Hosting, and click on edit. You’ll be directed to the page shown below –
Now, change the Static Website Hosting to enable. Specify the home or default page of your website under the Index Document section. You can also provide an error page that is returned when an error occurs. Save changes when you’re done.
4. Edit Bucket Policy
For this, head over to the Permissions section of your bucket and go to the option Bucket Policy. Again, What is Bucket Policy? So it’s basically a policy, written in JSON which provides access to the objects stored in the bucket.
For hosting our website, we need to provide our own custom-defined policy. Don’t worry, it’s pretty easy. Click on Edit and a page like this will show up.
Click on the Policy Generator option. This page will let you define your own policy required to host the website.
Step 1, select policy type as S3 Bucket Policy.
In Step 2,
— Select Effect as Allow.
— Write * in the Principal section.
— Under Actions, select GetObject.
— In the Amazon Resource Name (ARN), give the ARN of your bucket which you can find under the Properties section.
— Also, add a /* in the end for the policy to be applied to every object in your bucket.
— In our case, the ARN looks like this – arn:aws:s3:::myaws-tempbucket/*
— Now, click on add statement.
Finally in Step 3, click on Generate policy and you’ll see a page like this.
Now, copy this policy, paste it in the Edit Policy section overwrite the default one, and save your changes.
5. Get the link for your website
We are almost done. Just head over to your objects and select the home or default page of your website as specified earlier. You will see an object URL for your website as shown below.
Open this URL in a new tab and voila! You will now be able to see your website. You can also share this link with anyone and they’ll also be able to see your website.
So, that was all for now. Please feel free to drop any questions, comments, or suggestions. Thank You!
