S3-crets of Creating a Stunning Static Website
Introduction
Welcome everyone! Today, we’re going to explore the exciting world of creating a static website using Amazon S3. Whether you’re a seasoned developer or just starting out, this is an essential skill to have in your toolkit. With Amazon S3, you can easily host your website and make it accessible to the world.
In today’s digital age, having a website is more important than ever. It’s a great way to showcase your work, connect with others, and even start a business. And with Amazon S3, it’s never been easier to create a website that looks professional and polished. So, let’s dive in and learn how to create our own static website using Amazon S3!
What is Amazon S3?
Amazon S3, or Simple Storage Service, is a cloud-based storage solution provided by Amazon Web Services. It allows users to store and retrieve data from anywhere on the web and is commonly used for website hosting.
In website creation, Amazon S3 can be used to store static website files such as HTML, CSS, JavaScript, and images. These files can then be accessed by anyone with an internet connection, making it a convenient and cost-effective option for website hosting.
Creating an S3 Bucket
To create an S3 bucket, first navigate to the S3 console in your AWS account. Click the ‘Create Bucket’ button and follow the prompts to name your bucket and choose a region. Choosing the region closest to your target audience is important for optimal website performance.
Next, you’ll need to configure the settings for your bucket. This includes setting permissions, enabling versioning, and configuring logging. You can also set up lifecycle rules to automatically delete old files or move them to cheaper storage options. Make sure to review these settings carefully to ensure your website functions as intended.
Uploading Website Files
To upload website files to your S3 bucket, you can use the AWS Management Console or a third-party tool like Cyberduck. For this demonstration, we will be using the AWS Management Console.
First, navigate to your S3 bucket in the AWS Management Console. Then, click on the “Upload” button to open the upload dialog. You can either drag and drop your files into the dialog or click on the “Add files” button to select them from your computer. Once you have selected your files, click on the “Upload” button to start the upload process.
Setting Permissions
When it comes to setting permissions for your S3 bucket, there are a few things you need to keep in mind. First and foremost, it’s important to understand that permissions can be set at both the bucket level and the object level. This means that you can control who has access to your entire bucket, as well as who has access to specific files within that bucket.
To set permissions at the bucket level, you’ll need to navigate to the bucket properties and select the Permissions tab. From here, you can add new users or groups and assign them specific permissions, such as read-only or full access. It’s important to carefully consider who you grant access to, as giving too many people access to your bucket can compromise your security.
At the object level, you can set permissions by selecting the file or folder you want to modify and choosing the Permissions option from the context menu. From here, you can add new users or groups and assign them specific permissions, just like you would at the bucket level. Additionally, you can choose to make objects public, which allows anyone with the object’s URL to access it.
Remember, setting permissions correctly is crucial for maintaining the security of your S3 bucket and its contents. Take the time to carefully consider who you grant access to and what level of access they should have.
Let’s get started
First, you need to create your index.html and error.html files. Here’s a guide on how to do it:
- Open a text editor or an integrated development environment (IDE) on your computer. You can use programs like Notepad++ (Windows), TextEdit (Mac), Sublime Text, Visual Studio Code, or any other editor of your choice.
2. Create a new file and save it with the name “index.html”. This file will serve as the main page of your website. Make sure to keep the file with the “.html” extension.
3. In the “index.html” file, you can write the HTML code that defines the structure and content of your web page. For example, you can start with a basic HTML structure:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website!</h1>
<p>This is the home page.</p>
</body>
</html>
In my case, use this HTML structure:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Creating a Static Website Using Amazon S3</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">My Static Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Creating a Static Website Using Amazon S3</h1>
<p class="lead">In this live AWS hands-on lab, we will create and configure a simple static website. We will go
through configuring that static website with a custom error page. This will demonstrate how to create very
cost-efficient website hosting for sites that consist of files like HTML, CSS, JavaScript, fonts, and images.
</p>
</div>
<div class="starter-template alert alert-light" role="alert">
Navigation and search functions are intentionally not implemented.
</div>
</main><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
</body>
</html>Save the “index.html” file once you have finished writing the HTML code.
Repeat steps 2–3 to create the “error.html” file. This file will be used as the custom error page that will be displayed when there is an error or a page is not found. Customize the content of the error page based on your preferences.
For example, you can create a basic error page with the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Error Page</title>
</head>
<body>
<h1>Oops! Page Not Found</h1>
<p>We're sorry, but the page you requested could not be found.</p>
</body>
</html>
Here is my HTML structure for this project:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Creating a Static Website Using Amazon S3</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body {
padding-top: 5rem;
}
.starter-template {
padding: 3rem 1.5rem;
text-align: center;
}
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">My Static Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<main role="main" class="container">
<div class="starter-template">
<h1>Error</h1>
<p class="lead">Did you mean to go to <a href="index.html">index.html</a>?</p>
</p>
</div>
<div class="starter-template alert alert-light" role="alert">
Navigation and search functions are intentionally not implemented.
</div>
</main><!-- /.container -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Once you have created both the “index.html” and “error.html” files, you can use them in your website project. Place them in the appropriate directory and make sure to link to them correctly from other HTML files or your website’s navigation.
Remember to customize the content and design of your HTML files according to your specific requirements and preferences.
Now let’s start by opening the AWS console
In the AWS Management Console, navigate to S3.
Click Create bucket.
Set the following values:
Bucket name: my-bucket- with the AWS account ID or another series of numbers at the end to make it globally unique
Region: US East (N. Virginia) us-east-1
In the Block Public Access settings for this bucket section, un-check Block all public access.
Ensure all four permissions restrictions beneath it are also un-checked.
Check the box to acknowledge that turning off all public access might result in the bucket and its objects becoming public.
Leave the rest of the settings as their defaults.
Click Create bucket.
Click the radio button next to the bucket name to select it.
Copy ARN and paste it into a plaintext file, as you’ll need it later.
Click the bucket name.
Click Upload.
Add files, and upload the error.html and index.html files you previously saved.
Leave the rest of the settings as their defaults.
Click Upload.
Click Close in the upper right.
Enable Static Website Hosting
Click the Properties tab.
Scroll to the bottom of the screen to find the Static website hosting section.
On the right, in the Static website hosting section, click Edit.
On the Edit static website hosting page, set the following values:
- Static website hosting: Enable
- Hosting type: Host a static website
- Index document: index.html
- Error document: error.html
Click Save Changes.
In the Static website hosting section, open the listed endpoint URL in a new browser tab.
You’ll see a 403 Forbidden error message.
Apply Bucket Policy
Back in S3, click the Permissions tab.
In the Bucket policy section, click Edit.
In the Policy box, enter the following JSON statement (replacing <BUCKET_ARN> with the one you copied earlier):
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "<BUCKET_ARN>/*"
}
]
}Note: Ensure the trailing
/*is present so the policy applies to all objects within the bucket.
Click Save Changes.
Refresh the browser tab with the static website (the endpoint URL you opened earlier). This time, the site should load correctly.
Add a / at the end of the URL and some random letters (anything that's knowingly an error). This will display your error.html page.
So, if all of that worked for you, great job.
Congratulations, and I’ll see you in the next one.
