Static websites on AWS — Part I
In this article we will see how to create a very simple webpage and host it to the AWS S3 which is absolutely free for 1 year.
You are just 5 steps away from your first web page deployed to AWS S3.
Final Result:
Step 1 — Create the index.html
Open your favourite text editor and type the following source code.
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>My awesome page</title><link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap" rel="stylesheet"><style>body {margin: 40px;background-color: #131313;font-family: 'Montserrat', sans-serif;}h1 {color: #9a9a9a;font-size: 60px;}.text-white {color: #fff;}</style></head><body><h1>Welcome to my <span class="text-white">awesome</span> web page!</h1></body></html>
Step 2 — Create the S3 Bucket
Login to your AWS account and go to the S3 Management Console. Then, press the “Create Bucket” button.
Choose a bucket name and a region. The bucket name must be universally unique.
A good practice here is to set the bucket name to be excacly the same with your domain name you wish later to map. Eg:
dusaitis.co.
Set the public access. In our case we need to permit the public access as it’s required for the static website hosting.
Scroll down and finally create your bucket.
Nice! Your S3 bucket has been created successfully!
Click to the bucket name you’ve just created to upload the index.html file.
Step 3 — Upload your index.html page.
You have choosen your bucket name and you see the following screen. With the “Overview” tab selected, Click on the “Upload” button.
Click on “Add files” and choose the index.html file from your filesystem.
After choosing your index.html you should see the following screen. Press the "Upload" button to complete the upload.
Perfect! Your index.html has been uploaded successfully!
Step 4 — Set the right permissions
Click first on the “Permissions” Tab and then on the “Bucket Policy” button.
Write to the Bucket policy editor.
Write the following code snippet and replace the dusatis.co with your bucket name. Press "Save".
{"Version": "2012-10-17","Statement": [{"Effect": "Allow","Principal": "*","Action": "s3:GetObject","Resource": "arn:aws:s3:::dusaitis.co/*"}]}
You are almost ready. One final step.
Step 5 — Make your S3 bucket suitable for Static Website Hosting
Click on “Properties” tab, and then on “Static website hosting” card.
Click at the first radio button. Write the index.html to both text fields (Index document & Error document). Press "Save".
The state changed from “Disabled” to “Bucket hosting”.
Congrats! 🎉 your site is live. 🚀
Check it out at http://dusaitis.co.s3-website.eu-central-1.amazonaws.com/
In the upcoming part Static websites on AWS — Part II we will see how to add a custom domain name for our static web page.
For more tips follow me on Twitter.
Thanks for reading!
Original post: https://dusaitis.com/posts/static-websites-on-aws-part-i
