Create And Host A Static Website On AWS S3 : Webdev

In this article we will see how to create a very simple webpage (just one page) and use the AWS S3 to host it.

Step 1 – Create the index.html

<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>

It should look like this one:

r/webdev - Create and host a static website on AWS S3

Step 2 – Create the S3 Bucket

Choose a bucket name and a region. The bucket name must be universally unique.

Set the public access.

Scroll down and finally create your bucket.

After that you must see the following screen:

Nice! Your S3 bucket has been created successfully!

Step 3 – Upload your index.html page.

Choose your bucket name and configure it a little bit more. 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.com with your bucket name. Press “Save”.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::dusaitis.com/*"
        }
    ]
}