← Return home

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:

Screenshot 2020-10-20 at 4.32.54 PM

Step 1 - Create the index.html

Open your favourite text editor and type the following source code.

1<html>
2  <head>
3    <meta charset="utf-8">
4    <meta name="viewport" content="width=device-width, initial-scale=1.0">
5    <title>My awesome page</title>
6    <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,900&display=swap" rel="stylesheet">
7    <style>
8      body {
9        margin: 40px;
10        background-color: #131313;
11        font-family: 'Montserrat', sans-serif;
12      }
13      h1 {
14        color: #9a9a9a;
15        font-size: 60px;
16      }
17      .text-white {
18        color: #fff;
19      }
20    </style>
21  </head>
22  <body>
23    <h1>Welcome to my <span class="text-white">awesome</span> web page!</h1>
24  </body>
25</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.

Screenshot 2020-10-03 at 9.15.17 PM

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.

image1

Set the public access. In our case we need to permit the public access as it's required for the static website hosting.

Screenshot 2020-10-03 at 9.48.03 PM

Scroll down and finally create your bucket.

Screenshot 2020-10-03 at 9.55.30 PM

Nice! Your S3 bucket has been created successfully!

image2

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.

image3

Click on "Add files" and choose the index.html file from your filesystem.

Screenshot 2020-10-03 at 10.21.38 PM

After choosing your index.html you should see the following screen. Press the "Upload" button to complete the upload.

image4

Perfect! Your index.html has been uploaded successfully!

image5

Step 4 - Set the right permissions

Click first on the "Permissions" Tab and then on the "Bucket Policy" button.

image6

Write to the Bucket policy editor.

image7

Write the following code snippet and replace the dusatis.co with your bucket name. Press "Save".

1{
2    "Version": "2012-10-17",
3    "Statement": [
4        {
5            "Effect": "Allow",
6            "Principal": "*",
7            "Action": "s3:GetObject",
8            "Resource": "arn:aws:s3:::dusaitis.co/*"
9        }
10    ]
11}

image8

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.

image9

Click at the first radio button. Write the index.html to both text fields (Index document & Error document). Press "Save".

image10

The state changed from "Disabled" to "Bucket hosting".

image11

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!

Would you like to get updates for new stories?