ClouDIY: A static website using Amazon S3
Hosting a static website using Amazon S3
Credit: Original teaching provided by Rohan Arora.
You can use Amazon S3 to host a static website. On a static website, individual webpages include static content. They might also contain client-side scripts.
By contrast, a dynamic website relies on server-side processing, including server-side scripts, such as PHP, JSP, or ASP.NET. Amazon S3 does not support server-side scripting, but AWS has other resources for hosting dynamic websites.
This tutorial includes instructions and step-by-step walkthroughs to host a static website on Amazon S3 bucket. Here is a list of the steps:
Step 1: Create a bucket
Step 2: Enable website hosting
Step 3: Configure an index document
Step 4: Upload the index document while making it public
Step 5: Test your website
Step 6: Delete your objects and bucket
Step 1: Create a bucket
Sign into the AWS Management Console and search for S3 via search bar provided at the top of this page. Click S3 to go to Amazon S3 dashboard.
Choose Create bucket. The Create bucket wizard opens.
In Bucket name, enter a DNS-compliant name for your bucket.
The bucket name must:
Be unique across all of Amazon S3.
Be between 3 and 63 characters long.
Not contain uppercase characters.
Start with a lowercase letter or number.
In Region, choose the AWS Region where you want the bucket to reside.
Under Object Ownership, enable ACLs by selecting ACLs enabled and control ownership of objects uploaded in your bucket by selecting Bucket owner preferred.
This ensures that the bucket owner owns and has full control over new objects that other accounts write to the bucket with the bucket-owner-full-control canned ACL
Scroll down to Block Public Access settings for this bucket and uncheck Block all public access.
Check option to acknowledge that the current settings might result in this bucket and the objects within becoming public.
While scrolling down accept default versioning, tagging, encryption and other options, and choose Create Bucket.
You've created a bucket in Amazon S3.
Step 2: Enable website hosting
Click on the S3 bucket you’ve just created.
Choose Properties.
Scroll down and under Static website hosting, choose Edit.
Under Static website hosting, choose Enable, and set Hosting type to Host a static website.
In Index document, enter the file name of the index document typically index.html.
The index document name is case sensitive and must exactly match the file name of the HTML index document that you plan to upload to your S3 bucket. When you configure a bucket for website hosting, you must specify an index document. Amazon S3 returns this index document when requests are made to the root domain or any of the subfolders.
Optionally, we can also mention the error document. However, we will keep it blank.
Specify redirection rules and save all changes made to the S3 bucket.
(Optional) If you want to specify advanced redirection rules, in Redirection rules, enter JSON to describe the rules. For this demo, we will keep it blank.
Choose Save changes.
Under Static website hosting, note the Endpoint.
The Endpoint is the Amazon S3 website endpoint for your bucket. After you finish configuring your bucket as a static website, you can use this endpoint to test your website.
Step 3: Configure an index document
When you enable static website hosting for your bucket, you enter the name of the index document (for example, index.html). After you enable static website hosting for the bucket, you upload an HTML file with this index document name to your bucket.
For this demo, the index.html document is already created and preconfigured. Click here to download.
Step 4: Upload the index document while making it public
Go to Objects and click Upload.
Click Add files.
Upload the same index.html file that you downloaded in step 3.
Within Permissions, choose Grant public-read access and check I understand the risk of granting public-read access to the specified objects.
This will allow us to make index.html file public and visible on the internet.
Finally, click Upload.
This will mark the completion of uploading process of the index.html file.
Step 5: Test your website
As we have configured all the desired parameters in advance, let us now test our website.
Click Close to exit from this page.
Switch to Properties category.
Under Static website hosting, access the Endpoint link to view the webpage.
Here is the desired outcome.
This marks the completion of this hands-on session.
Step 6: Delete your objects and bucket
When you no longer need an object or a bucket, it is recommended that you delete them to prevent further charges. If you completed this getting started walkthrough as a learning exercise, and you don't plan to use your bucket or objects, it is highly recommended that you delete your bucket and objects so that charges no longer accrue.
Before you delete your bucket, empty the bucket or delete the objects in the bucket. After you delete your objects and bucket, they are no longer available.
If you plan to delete your bucket, you must first empty your bucket, which deletes all the objects in the bucket.
Click Buckets to access the buckets list.
Select the S3 bucket and click Empty.
To confirm deletion, type permanently delete in the text input field, and click Empty.
Upon emptying, click Exit to exit from the page.
After you empty your bucket or delete all the objects from your bucket, you can delete your bucket.
To delete a bucket, in the Buckets list, select the bucket, and choose Delete.
To confirm deletion, in Delete bucket, type the name of the bucket, and finally choose Delete bucket.
Comments