Tutorial: Setting up S3 as a web host
December 27, 2024
This is the first part of my Building a Bulletproof Website series. For quick review, there are a few things we are going to need to do:
- Set up the S3 bucket (that's this tutorial)
- Set up Cloudfront
- Configure DNS
- Configure an HTTPS certificate
- Install and use the offline Content Management Tool
Here is the video version of this tutorial -- the code needed for the project is embedded here.
1) Set up your S3 Bucket
Go to the Create Bucket option in S3. Pretty much all you need to do here is create a bucket with the full domain you want to set up, so in my case I'm using www.mjldev.com -- keep in mind you will need that hostname (www) unless you're using Amazons route 53 for DNS. The reason you need a fully qualified domain and host is because you can't point a base domain (mjldev.com) to a CNAME, only to an IP address. So, when we get to DNS config, we'll want to do some redirect magic in GoDaddy (where I have this domain registered, and who handles my DNS).
2) Set it to be a public web host
Now go to the Properties tab on your bucket
Wayyy down on the bottom of the page you will see a block for Static website hosting. There is an option for Amplify, but just ignore that for this exercise, you just need to click the Edit button to enable static hosting. Click the enable radio button and then the only other thing you have to configure on this page is to tell it what HTML page you want to use for the index (that is when someone goes to yourdomain.com/ without specifying a page) and for the error page.
Note that I used article.html for the error page – we'll get into more detail on that when we get to the HTML5/frontend code for this bulletproof website, but what we'll do is rewrite any 404 page with legit content later. Otherwise it's just a pretty “file not found” page.
3) Enable Public Access Security Rules
Although it’s set to be a webhost, we still need to enable public access so people can see the content on your S3 hosted site. Go to Permissions, Edit the Block Public Access and uncheck all the boxes
You also need to include a Bucket Policy that allows anonymous accesss to the bucket. Click Edit on the bucket policy and add the following policy – where it says YOURBUCKET change it to www.yourdomain.com that we're setting up.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOURBUCKETHERE/*"
}
]
}
4) Upload your index.html and articles.html pages
Finally you can upload some content to your bucket. Navigate to the Objects tab, click on upload and upload the index.html and articles.html pages. Here are a couple placeholder pages you can use:
For your index page you can use this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MJL Dev</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #CCCCCC;
font-family:arial
}
h1 {
border-radius: 25px;
border-color: #ffffff;
background: #999999;
padding: 20px;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
border: 2px solid #666666
}
</style>
</head>
<body>
<div>
<h1>mjldev Placeholder Page</h1>
<p>please visit <a href="https://mjlprojects.com">mjlprojects.com</a></p>
</div>
</body>
</html>
And for the articles.html you can use this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MJL Dev</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #CCCCCC;
font-family:arial
}
h1 {
border-radius: 25px;
border-color: #ffffff;
background: #999999;
padding: 20px;
justify-content: center;
align-items: center;
text-align: center;
color: #fff;
border: 2px solid #666666
}
</style>
</head>
<body>
<div>
<h1>mjldev Error Page</h1>
<p>please visit <a href="https://mjlprojects.com">mjlprojects.com</a></p>
</div>
</body>
</html>
5) View your static website
Your site is configured now! Go to the Properties tag and wayyyy down at the bottom again (where we configured the Static website hosting) you'll see the URL to the S3 endpoint:
Click on it and you'll see the static page. Now all we have to do is…
- Configure DNS
- Set up Cloudfront
- Rewrite 404s to 200s
- Get a certificate
- Set up the offline CMS
See you in the next tutorial!
Your resume is your most valuable tool in your job search. But how do you know your resume is in top shape?
Our recruiters will review your resume line by line and give you detailed feedback on how you can improve it.
Visit mjlprojects.com to learn more!