{"id":365,"date":"2022-05-20T09:58:43","date_gmt":"2022-05-20T09:58:43","guid":{"rendered":"http:\/\/checkmateq.com\/blog\/?p=365"},"modified":"2023-08-07T17:25:33","modified_gmt":"2023-08-07T17:25:33","slug":"static-website-using-s3-bucket","status":"publish","type":"post","link":"https:\/\/www.checkmateq.com\/blog\/static-website-using-s3-bucket","title":{"rendered":"Hosting static website using S3 bucket and Route53"},"content":{"rendered":"

Amazon Web Services<\/a> offers many options to host a website, as a static website does not need any server-side processing hosting a static website using s3 is simplest, affordable and recommended way.<\/p>\n

In this blog we will see how to configure a AWS S3 bucket <\/strong>(Simple Storage service) to host a static website and use\u00a0 AWS Route53 service <\/strong>to make your website accessible using your domain name.<\/p>\n

Creating s3 bucket and configuring it to host a static website<\/strong><\/p>\n

Step-1: creating s3 bucket<\/strong><\/p>\n

Login to your aws console enter “simple storage service” in search bar and click on s3<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Click on create bucket on the top right.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n

Enter a unique name for your bucket with no spaces and uppercase letters, if have a domain name use the same for your bucket name and\u00a0 scroll down to “Block Public Access settings for this bucket”<\/p>\n

\"\"<\/p>\n

 <\/p>\n

As you are going to use your s3 bucket to host a static website, objects of the bucket should be publicly accessible, uncheck “block all public access” and acknowledge it below, this allows to make bucket objects public.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Now scroll down and click on “create bucket” button.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Step-2: Adding bucket policy to make bucket objects public<\/strong><\/p>\n

Click on the bucket name you have created<\/p>\n

\"\"<\/p>\n

 <\/p>\n

go to permissions scroll down to “Bucket policy” and click on edit, remove the already existing content, and paste the below given policy to make your bucket objects public, this policy grants\u00a0 “s3:GetObject” permission to any public anonymous users. This permission allows anyone to read the object data, which will be useful when you use S3 bucket to host your website.<\/p>\n

 <\/p>\n

{\r\n      \"Version\": \"2012-10-17\",\r\n      \"Statement\": [\r\n        {\r\n          \"Sid\": \"PublicRead\",\r\n          \"Effect\": \"Allow\",\r\n          \"Principal\": \"*\",\r\n          \"Action\": [\r\n                      \"s3:GetObject\",\r\n                      \"s3:GetObjectVersion\"\r\n                    ]\r\n         }\r\n    ]\r\n}\r\n<\/pre>\n
 <\/p>\n
Scroll down and click on “save changes” button\u00a0 in the bottom right.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Step-3:uploading files to s3 bucket<\/strong><\/p>\n
In next steps basic html files<\/strong> named “index.html”<\/strong> and “error.html”<\/strong> are uploaded into the bucket, you can upload your website files or create html files using below syntax.<\/p>\n
index.html<\/strong><\/p>\n
\n
<!DOCTYPE html><\/div>\n
<html><\/div>\n
<head><\/div>\n
<title>Website<\/title><\/div>\n
<\/head><\/div>\n
<body><\/div>\n
<h1>This is website hosted aws s3<\/h1><\/div>\n
<p>Hey! you have succesfully hosted a website using s3<\/p><\/div>\n
<\/body><\/div>\n
<\/html><\/div>\n<\/div>\n
<\/div>\n
<\/div>\n
error.html<\/strong><\/div>\n
<\/div>\n
\n
\n
<!DOCTYPE html><\/div>\n
<html><\/div>\n
<body><\/div>\n
<h1>Error<\/h1><\/div>\n
<\/body><\/div>\n
<\/html><\/div>\n
 <\/p>\n<\/div>\n<\/div>\n
Now go to objects and click on upload button .<\/p>\n
\"\"<\/p>\n
 <\/p>\n
\n
\n
<\/div>\n<\/div>\n<\/div>\n
Click on add files select the files to be uploaded scroll down and click on upload button.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Step-4: Enabling static website hosting on s3 bucket<\/strong><\/p>\n
click close and go to properties, scroll down to “Static website hosting” click on “edit” button.\u00a0 enable static website hosting.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
select “Host a static website” scroll down to “Index document” and enter your home page file name of your website from the uploaded files and also give your error page file name, then scroll down and click on “save changes” to\u00a0 save the settings.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Now go to “static website hosting” in properties copy the link under “Bucket website endpoint” and paste it in your browser.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
Here you go, you just hosted a website using aws s3 bucket.<\/p>\n
\"\"<\/p>\n
 <\/p>\n
we have hosted a website using\u00a0 s3 ,now to make it accessible using your domain name use “Route53” and make a link between your website end point(s3 endpoint) and domain name.<\/p>\n
 <\/p>\n
Associate s3 endpoint with your domain name<\/strong><\/p>\n
Route53<\/strong> is a Domain Name Server provided by amazon web services, it is integrated with many amazon web services like S3,ec2,cloudfront, this can be used to route a custom domain to any aws service like\u00a0 S3 endpoint, elastic load balancer, you can also register your domain with route53.<\/p>\n
Follow process mentioned below to associate s3 endpoint with your domain name.<\/p>\n