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:
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.
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/*"
}
]
}
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. ?
Thanks for reading!