Skip to content

Instantly share code, notes, and snippets.

@isaacarnault
Last active May 12, 2024 08:49
Show Gist options
  • Save isaacarnault/d3ebcfa3e961ff8b20b0df821d2397a7 to your computer and use it in GitHub Desktop.
Save isaacarnault/d3ebcfa3e961ff8b20b0df821d2397a7 to your computer and use it in GitHub Desktop.
Creating a static website in 5 minutes using S3 on AWS
________ ________ ___ __ ___
|\_____ \|\ __ \|\ \|\ \ |\ \
\|___/ /\ \ \|\ \ \ \/ /|\ \ \
/ / /\ \ __ \ \ ___ \ \ \
/ /_/__\ \ \ \ \ \ \\ \ \ \ \
|\________\ \__\ \__\ \__\\ \__\ \__\
\|_______|\|__|\|__|\|__| \|__|\|__|
## log into your AWS Management Console
Log into your AWS management console using https://console.aws.amazon.com.
I'm using MFA to secure my root account access coupled with Google Authenticator on my Android smartphone.
You can bypass this step if you already have a root account on AWS.

Creating a static website in 5 minutes using S3 on AWS

• Cloud platform: AWS • Tools used: Atom (Text editor), S3 (AWS) • Languages: Html

Project Status: Concept – Minimal or no implementation has been done yet, or the repository is only intended to be a limited example, demo, or proof-of-concept.

The following gist is part of my AWS Solution Architect - Associate exam preparation.
It can help you as a web entrepreneur, web bloggers, to deploy a static website very quickly using AWS.


Steps
1. Create a bucket on S3 named mywebsitebucket054485
2. Change the number since you must have a unique bucket name on S3)
3. Create three files, index.html, error.html, about.html
4. Upload the files in the S3 bucket

Solution architecture

isaac-arnault-aws-solution-architect.png

Bucket creation

🔵 See in AWS

mywebsitebucket.png

Files upload on S3 bucket

🔵 See in AWS

file-upload.png

  1. Go to S3 > select your bucket > Edit Public Acess Settings > unselect "Block all public access" > Save > Confirm

  2. Click on your bucket > select your 3 files > click on Actions > Make public

  3. Click on Properties > Static Website Properties > select "Use this bucket to host a website" > Index document: type index.html > Error document: type error404.html

🔵 See in AWS

isaac-arnault-aws-5.png

Click on Static Website Hosting to get the endpoint url.

There you go! Your website is online, you can visit it using the provided endpoint url.

website.png


Visit my S3 static website

Author

  • Isaac Arnault - AWS Cloud series - Related tags: #S3 #Bucket #StaticWebsite

Use a text editor to create this file. I'm using Atom.

<html>
<h1>About</h1>
<h2><a href="/index.html" target="_blank">Back to home</a></h2>
<p>
A static website hosted on AWS. <br>
You can deploy a similar website for free in about 5 minutes.<br>
<a href="https://github.com/isaacarnault/aws-s3-static-website" target="_blank">Instructions</a>. <br>
<b>Good luck!</b>
</html>
🔴 See in Atom

2.png

Use a text editor to create this file. I'm using Atom.

<html>
<h1>404</h1>
<h2>Page not found</h2>
<p>
The page you are trying to access does not exist.
</p>
</html>
🔴 See in Atom

isaac-arnault-aws-3.png

Use a text editor to create this file. I'm using Atom editor.

<html>
<h1>My S3 static website</h1>
<img src="https://bit.ly/33ovy7X" alt="Beerus Sama">
</html>
🔴 See in Atom

isaac-arnault-aws-1.png

MIT License
Copyright (c) 2019 Isaac Arnault
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment