Storage contd
Static Website Hosting using S3
- This is website with
- HTML
- CSS
- JavaScript
- Create an s3 bucket with like dns name
- And upload an index.html
<html>
<head>
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i&display=swap");
body {
padding: 2em;
font-family: Raleway, sans-serif;
font-size: 1.2em;
}
h1 {
font-size: 3.6em;
margin-bottom: 0.5em;
}
h2 {
font-size: 2.4em;
margin-bottom: 0.5em;
}
p {
margin: 1em 0;
line-height: 1.25;
}
</style>
</head>
<body>
<h1>Video Sample Page</h1>
<p>This is the video we will work with. It uses a movie from the Blender Foundation (thanks :) )</p>
<div id="container">
<video id='video' controls="controls" width="600">
<source id='mp4' src="one.mp4" type='video/mp4' />
</video>
</div> <!-- End Container -->
<br/>
<div id="container">
<video id='video' controls="controls" width="600">
<source id='mp4' src="two.mp4" type='video/mp4' />
</video>
</div>
<br/>
<div id="container">
<video id='video' controls="controls" width="600">
<source id='mp4' src="three.mp4" type='video/mp4' />
</video>
</div>
<br/>
<div id="container">
<video id='video' controls="controls" width="600">
<source id='mp4' src="four.mp4" type='video/mp4' />
</video>
</div>
</body>
</html>
- error.html
<html>
<head>
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i&display=swap");
body {
padding: 2em;
font-family: Raleway, sans-serif;
font-size: 1.2em;
}
h1 {
font-size: 3.6em;
margin-bottom: 0.5em;
}
h2 {
font-size: 2.4em;
margin-bottom: 0.5em;
}
p {
margin: 1em 0;
line-height: 1.25;
}
</style>
</head>
<body>
<h1>Some Error Occurred</h1>
</body>
</html>
- Now select bucket and navigate to properties => Static Website Hosting
- Now access the url
- This website can be added as a dns entry in hosted zones
