Guided Lab: Setting up a Static Website on Amazon S3
Description
One notable feature of Amazon S3 is its capability to host websites. By enabling website hosting on an S3 bucket, users can easily host a static website that consists of HTML, CSS, JavaScript, and other static files. When configured for website hosting, S3 provides a website endpoint URL for accessing the site. However, it’s important to note that S3 is only suitable for static websites; it does not support server-side scripting or database interaction. This means S3 can serve files as they are stored but cannot perform server-side logic processing like a traditional web server.
Objectives
In this lab, you will:
- Learn how to serve a static website on Amazon S3
- Set the permissions required in hosting a public static website
Subscribe to access AWS PlayCloud LabsLab Steps
Serve a static website on Amazon S3
1. In the AWS Management Console, search for “S3” using the search bar and select the S3 result under Services.
2. Click on the “Create bucket” button. You will be prompted to configure your bucket.
3. Configure bucket details:
- Bucket name: Give your bucket a unique name that follows the S3 naming rules.
- Bucket names must be globally unique and follow naming rules. Consider adding a timestamp for uniqueness.
- Region: Choose the region where you want to store your bucket. For this lab, you can only use N. Virginia Region to store your bucket.
- Uncheck the box that says “Block all public access” and acknowledge that the bucket will be publicly accessible.
Expand the other sections, and take a moment to review the available configurations.
4. Click on the “Create bucket” button at the bottom of the page to create your bucket.
5. In the S3 console, select your bucket and click on the “Upload” button. You can either drag and drop or browse for the files that contain your static web content, such as HTML, CSS, and JavaScript files.
6. Use this sample template for your HTML file. Save this as index.html.
<!doctype html>
<title>Static Website on Amazon S3</title>
<style>
body { text-align: center; padding: 150px; }
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
.sample {padding: 10px 20px 10px; border-top: groove; border-bottom: groove;}
</style>
<article>
<div class="sample">
<h1>Welcome to my website!</h1>
</div>
</article>
7. Click the “Upload” button to upload your file.
8. After clicking the “Upload” button, a confirmation will appear to let you know that the process has started and a file has been created.
9. Click the “Close” button, then go back to your bucket.
10. Select your bucket and click on the “Properties” tab. Under the “Static website hosting” section, click on the “Edit” button. Choose “Enable” and enter the name of your index document (usually index.html).
11. Click on the “Save changes” button.
12. After enabling website hosting, you will see a URL under the “Static website hosting” section that looks like http://bucket-name.s3-website.region.amazonaws.com.
Set the permissions required in hosting a public static website
1. Go back to your S3 bucket and navigate to the “Permissions” tab.
2. Under “Permissions”, edit the Bucket policy.
3. Add the bucket policy written in JSON format below:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::[bucket-name]/index.html"
}
]
}4. Click Save Changes at the bottom of the page.
5. Under the “Static website hosting” you will see a URL that looks like http://bucket-name.s3-website.region.amazonaws.com. Copy this URL and paste it in your browser to access your website.
