hello everyone welcomes to master2teach step-by-step guide
in this video you will learn how to host a static website in AWS using s3
bucket how to configure DNS server using route 53 to connect your domain name
with your static site I will try my best to explain step by step if you haven't
subscribe to our Channel please click on the subscribe button and subscribe to
our YouTube channel ok let's start first of all you need to have an account in
AWS I have AWS educate account let me login
click in aws educate starter account as you can see I have still
$104 remaining credits one great thing about the aws is that it
gives 150 credits to learn and use the aws services if you create the aws
educate account let's move to aws console in this video we are just
learning simple static website hosting with s3 in aws I hope you'll all know
about s3 s3 is a cloud storage service of Amazon that allows us to
store an unlimited amount of files in the cloud s3 supports only
client-side scripting language like HTML CSS JavaScript etcetera so that it can
be used only for the static website hosting its performance is great and
secure another best thing about aws is you pay for what you use
so at a very low cost you can host your site and we don't need to worry about
the space it's unlimited let's see step by step expand the all
services tab as you can see all the services provided by the AWS
navigate to s3 on the storage category
here are zero buckets for now let's create a new bucket to host a simple
static website go through great bucket here name a bucket note that bucket name
must be unique worldwide similar to the website domain name so try with a unique
name like if I try with bucket name my bucket definitely it already exists we
are creating a bucket to host a static website so that we need to follow the
DNS compliance naming convention so name the bucket name with your domain name
like lokanthali.com next select the region us east n virginia
another option is bucket setting for block public access since we are hosting
static website which must be all accessible through the front-end we have
to make all pages and resources publicly accessible
otherwise it won't open uncheck the checkbox which says block
all public asses it shows a warning acknowledge it
click in create bucket
okay great bucket successfully created let's move further to upload the website
files you need go inside the bucket navigate to the upload button and click
on it in the pop up you will see four steps number one select file number two
state permission number three state properties and last review it first let's
add the file
before uploading click next the file must be publicly accessible so grand public
read access to this object
it shows again warning that everyone in the world will have read access to this
object yes we want all the world to visit our website regarding permission
after a few minute we will learn how to grant the permission for all files and
folder at once next next is storage class we especially place the frequently
accessed data in the standard you can also store your data in archives like
old data or currently unused data which can be useful in the future and which we
can't delete it as well so in this case we use glacier for low-cost stories for
now click the standard option next
review it and click upload
now if you open the file it will show the file content cause we are directly
accessing the file from the bucket it's not accessing like the web for web we
need to host it for which navigate to properties menu where you can see the
static website hosting option click on it
as you can see the endpoint which represents the website URL check the use
this bucket to host the website option now you need to define the home page
file name error page file name like index.HTML in our page whereas
error.html is our error page save it
let's test in the browser whether it's functioning or not copy the endpoint and
paste in the browser
good job it's working fine now let's test for the error page as well
okay it's also working fine great let's upload all the files and folder and
grant the permission to them at once upload all the files and folder
navigate to the permission tab where you can see the bucket policy button click
on it if you know you can write the code here for permission but we have a policy
generator option as well let's use it it's quite easy for us here follow step
by step number one select the s3 bucket policy second effect allow okay
principle we are allowing all files and folder to the public access so type
* here Amazon s3 okay action we don't allow all the action to the
public like delete here only allowed get object actions so that the public
can view but can't edit and delete the files another option is ARN which is
Amazon resource name it is for identifying for which bucket this
policies is for we can copy the ARN from the previous page just paste it
note that here is missing the key name so add / *
which means for all files click Add the statement now you can generate policies
copy the JSON code and paste on the previous page and save it
now let's check it
great the site is working now for the domain name mapping to this hosting we
need further one more step that is configuring route 53 let's go to the
console homepage search route 53 and open it
in DNS management click on create hosted zone type the domain name the same
bucket name in our case it's lokanthali.com click on the create button now
you need to map in between these route 53 dns and s3 bucket which we have
uploaded our files for that click on create record set in name you can leave
it empty now check yes for the alias where you will get alias target in the
drop-down find s2 website end points where your hosting is listed over
there select it note that if you do not follow the dns compliance naming
convention mean if you choose a bucket name other than your domain name it will
not appear in the drop down you can see the DNS name server which you need to
place in the domain name copy the dns name servers and configure them in the
domain name
it may take a little time to change the name server properly
now your site is ready which can be view from world wide ya one more thing what if
someone typed www dot in front of your domain name oops it's not working it's
very simple to solve this issue navigate to s3 again and create a new
bucket with including www dot in front of your bucket name as www.lokanthali.com
choose the reason and make it bucket public as we did before
okay new bucket is created successfully here are two buckets one without www
whereas another is with www in front of the domin name now what we are going to do
is redirecting www. doman name to without www so that if the user hit www dot
including or excluding our site will always open from without www
name bucket again navigate to properties and click on the static web
hosting this time click on redirect request place the target domain to
the previous bucket name which is without www in domain
name in protocol simply type HTTP for now save it now another one more step to
do which is configuring the DNS server in route 53 navigate to route 53 again
and click on the same domain name which we had added before
we have to add another record set this time in name insert www and check Alias
yes as before in Alias target drop-down list select s3 website endpoint
with www domain name and click create
now let's try in the browser
great it's working fine now with www without www as well in this way you can
create s3 bucket and configure DNS using route 53 and connect to your
domain name with your s3 bucket and host a static site in aws I hope you
learn from this video tutorial if you have any questions or comments please
make sure to leave a comment in the comment section below also please be
sure to like this video and subscribe to my channel if you haven't already thank
you so much for watching check us out for more in IT tutorial and
guide on website master2teach.com and we will see you again soon bye