AWS Classroomnotes 29/Aug/2023

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
Published
Categorized as Uncategorized Tagged

By continuous learner

devops & cloud enthusiastic learner

Leave a ReplyCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Please turn AdBlock off
Animated Social Media Icons by Acurax Responsive Web Designing Company

Discover more from Direct DevOps from Quality Thought

Subscribe now to keep reading and get access to the full archive.

Continue reading

Exit mobile version
%%footer%%