Reading time: 5 minutes
Introduction
Hello everyone! Today in this blog we are going to discuss how you can host a static website using an AWS S3 bucket.
Static and Dynamic Website
First, before hoping for AWS S3, you might be wondering what is the difference between a static website and a dynamic website.
Reading: How to create a website using aws3
Well, a static website is usually written in HTML with CSS and JavaScript. With a static website, the content displayed is the same for everyone. It does not involve any server-side processing or databases.
On the other hand, a dynamic website requires more user interaction along with server-side processing and databases if needed. Its content changes with each user depending on various factors. It also lets us know about the AWS S3 objects.
AWS S3 object
In simple terms, Amazon S3 is an object storage service that stores data as objects in buckets. An object is a file and all of the 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 have up to 100 buckets in your account.
S3 only supports static websites. However, if you want to host a dynamic website, you can use services like EC2 or RDS for server-side processing and databases. The scope of this tutorial is limited to static websites only.
For more information about the S3 service, please go to its official documentation.
Demo
With this information, we can quickly host our own static website in a few simple steps.
1. Open your AWS console and create an S3 bucket.
First, log in to your AWS console and type [Alt + s] S3 in the search bar. And you will be redirected to the following page.
Now click on the Create Bucket option.
2. Provide required configurations
Now you will be prompted to provide some configurations. First, in the General Configurations section, give your S3 bucket a name. Remember that the bucket name must be unique and cannot contain spaces or capital letters. Then specify an AWS Region. We will continue with the Asia Pacific (Mumbai) ap-south-1 for this tutorial.
See also: Create a Website with These Essential Assets
Now scroll down and go to the Block public access settings for this bucket section and uncheck the following box to allow public access to your website. Also click on the confirmation message just below.
Leave the rest of the configurations for now and scroll directly to the bottom of the page and click Create Bucket. Your bucket will now be created successfully as shown below.
3. Upload your files
Click on your bucket name and you will be taken to this page.
Now click the Upload option and start uploading your files or folders. Depending on the size of your files, uploading will take about a minute. When you’re done, go to the Properties section and scroll down to Static Website Hosting and click Edit. You will be redirected to the page shown below –
Now modify the static website to enable hosting . Specify the home page or default page of your website in the Index Document section. You can also provide an error page to return when an error occurs. Save changes when finished.
4. Edit Bucket Policy
To do this, go to the Permissions section of your bucket and go to the Bucket Policy option. Again, what is the bucket policy? So it’s basically a policy written in JSON that allows access to the objects stored in the bucket.
To host our website we need to provide our own custom policies. Don’t worry, it’s pretty easy.Click edit and a page like this will appear.
Click Policy Generator option. This page allows you to define your own policy required to host the website.
Step 1, select the policy type as S3 Bucket Policy.
In Step 2
— Select Effect as Allow.
See also: Create First GUI Application using Python-Tkinter
— Write * in the main section.
— Under Actions, select GetObject.
– In the Amazon Resource Name (ARN), specify the ARN of your bucket, which can be found in the Properties section.
– Also add a /* to the end so that the policy is applied to every object in your bucket.
— In our case, the ARN looks like this: arn:aws:s3:::myaws-tempbucket/*
— Now click Add directive.
Finally, in step 3, click Create Policy and you will see a page like this.
Now copy this policy, paste it in the Edit Policy section, overwrite the default policy and save your changes.
5. Get the link for your website
We’re almost done. Just go to your objects and select your site’s home page or default page as previously indicated. You will see an object URL for your website as shown below.
Open this URL in a new tab and voila! You can now see your website. You can also share this link with others so they can see your site too.
Okay, that’s it for now. Please do not hesitate to leave any questions, comments or suggestions. Thank you!
See also: How to create a QR code and direct people to a website, document, or other media
.
