Method #1 how to host your static website on aws
By
22 Jul 2022
share
copy link
Static websites can be html,css or js projects or with some js frameworks(angular, react) built outputs. To host it on AWS there are several options, in this post we will discuss S3 static website hosting.
First we need to create an S3 bucket https://console.aws.amazon.com/s3/, Choose create bucket and enter a bucket name (for example mystaticwebsite.com). Choose the AWS region and hit “create bucket”.
The next step is to enable “static website hosting” on this bucket. Choose “bucket properties”, scroll down and under static website hosting choose “edit”. Enable static website hosting. In the index document you should point to your index file (most probably index.html). In the error document you should write your custom error document file.
Example index html document:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
We Love DevOps at Sweeft.
</body>
</html>
Example error html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hi we can’t find anything sorry :(
</body>
</html>
Upload index and error documents to S3. go to “S3 bucket permissions” and edit “Block all public access”, uncheck the box. Edit bucket policy
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::YOUR_BUCKET_NAME_HERE/*"
]
}
]
}
In case of error:
You can make an automatic CI/CD pipeline with AWS codepipeline integrating your git repository, which we’ll cover in next posts.
Stay tuned! More interesting DevOps posts are coming soon…
