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

Login to your AWS account and go to the S3 Management Console. Then, press the “Create Bucket” button.

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

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

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

Set the public access.

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

Scroll down and finally create your bucket.

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

After that you must see the following screen:

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

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.

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

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

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

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

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

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.

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

Write to the Bucket policy editor.

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

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/*"
        }
    ]
}
r/webdev - Create and host a static website on AWS S3

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.

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

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

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

The state changed from “Disabled” to “Bucket hosting”.

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

Congrats! ? your site is live. ?

Thanks for reading!



Source link

Write A Comment