Summary
It is easy to forget how overwhelming software developing can be. Let's say you are a frontend developer who is passionate about creating a website and getting it out in front of users. The journey of learning how to code a frontend and all that goes with it is already a long journey.
However, it does not stop there, you realize that your wonderful website does no good to anybody unless you deploy it. The reality is that frontend developers can benefit from having at least some knowledge of deploying and maintaining a backend.
In this post, I will detail how to set up and deploy a static website using an AWS S3 bucket.
Contents
- Create Bucket
- Update Bucket Permissions
- Enable Static Website Hosting
- Upload the Website Files
- Summary
Create Bucket
Fist navigate to the service S3 and click on the Create bucket button to provision your bucket.
I will enter a bucket name and then go with the default/recommended configuration options for now.
Note: Bucket names need to be unique across all accounts for all AWS regions within a particular partition.
AWS documentation - Buckets overview
When finished selecting the desired configurations, click the Create bucket button and wait for the bucket to be provisioned.
Update Bucket Permissions
Next, navigate to the Permissions tab and update the public access settings.
Uncheck the Block all public access checkbox. This should uncheck all of the checkboxes beneath. Save changes and continue.
You will be warned and asked to confirm.
Next update the Bucket policy. This will provide access to the files that are uploaded to the bucket.
Here is the JSON object I used for the bucket policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::devto-example-bucket/*"
}
]
}
Enable Static Website Hosting
Next navigate to the Properties tab where the Static website hosting can be enabled.
Select Enable Static website hosting and other options will appear. I will stick with the default settings except for the Index document. The index document is where you can specify the default page for the website. I will choose index.html and leave the Error document field empty.
Once the changes are saved there will now be a Bucket website endpoint.
This endpoint is the url used to access the website.
Upload the Website Files
Next, we can upload the files into the bucket that are needed for the website. In this example, I will only upload the index.html file.
Click on the Objects tab and then click on the Upload button.
I will select my index.html file that I made for this website.
Here is the contents of my simple index.html:
<html>
<head>
<title>My example Webpage</title>
</head>
<body>
<h1>Hello There!</h1>
</body>
</html>
That is it! Now use the endpoint that was created earlier in the Enable Static Website Hosting step to navigate to the website. The Bucket website endpoint can be found under the Properties tab.
Summary
In this post I summarized how to create a S3 bucket and then configure it as a static website. Although this example is extremely simple, using S3 in this way can be powerful. Imagine hosting a dynamic application built with React or Vue. Also adding a code pipeline for ease of build and deployment with a CDN distribution in front of the bucket. The sky is the limit to what can be built around this S3 static website bucket.
If you run into any issues (particularly access issues), please refer to the section Update Bucket Permissions. Permission issues are usually the main culprit for issues.
Top comments (1)
You can do exactly above under 5 minutes using service like staticfast.com.