Hosting a static website on AWS S3 Bucket.
Caleb Onyejeme
Posted on October 31, 2024
Introduction
In today's digital landscape, having a web presence is essential for individuals and businesses alike. Whether you're showcasing a portfolio, sharing a blog, or launching a small business, a static website can be the perfect solution. But how do you get started? Enter Amazon Web Services (AWS) Simple Storage Service (S3), a powerful and cost-effective platform that makes hosting static websites a breeze.
In this blog post, we'll walk you through the process of setting up your static website on an S3 bucket. With step-by-step instructions and helpful tips, you'll learn how to take advantage of S3’s scalability, durability, and ease of use. By the end, you'll have a fully functional website live on the internet, ready to share your content with the world. Let’s dive in and explore how easy it is to get started with AWS S3!
Prerequisite
1-AWS account
2-Website Files
Now that you have the required tools. Let's Dive in!!
STEP 1
log in to your AWS account
-Go to your web browser and enter https://aws.amazon.com/
create an account if you don't already have or sign in by hitting the the console button
You will need to provide a billing information, but there's a free tier available for new users
Select to sign in as a Root user if you own the account, otherwise, if given access by an organization or a third party, the select IAM user
Provide your account email and click the Next button.
STEP 2
Create an S3 bucket.
- Access the S3 Console: Go to the AWS Management Console, search for S3, and select it.
Go ahead and click the 'create bucket' button
Enter a unique name for your bucket (this must be globally unique).
Choose a region close to your target audience.
Click "Create bucket" (you can leave most settings as default for now).
-Scroll down on same page.
-Leave the default ACL disabled option.
-Uncheck the Block all public access option.
You will be prompted with a warning message, but there's nothing to panic about here. It's just a message that reminds you the implications of making the bucket public. You'd have to acknowledge the message and remember to leave all the settings in default, scroll down to the end of the page and hit that Create Bucket button
STEP 3: Uploading the web files to the static website.
Click on your created bucket nonnycaleb
On the bucket page, click the upload button, it will open another panel that will help you navigate to your resources in your local environment.
Use the add files or add folder button depending on how your web files are saved.
We will upload our web resources from our local desktop.
The uploaded files
The index.html and the error.html or in this instance 404.html. They are the primary pages that display on the website.
Scroll to the bottom of the page and click the Upload button.
STEP 4: Set Bucket Permissions
- Go back to the nonnycaleb S3 bucket and click on the permission button.
- Scroll down and click on the edit button then Bucket Policy
Add the policy below in the editor with your bucket name replacing the place holder. (We got the policy from AWS documentation on S3 static website hosting)
Scroll down and click on the save changes button, once you have clicked the save button you will be notified that the policy change was successful.
Then Click on property on the same nonnycaleb bucket page.
Scroll down to the "Static website hosting, click edit
Select Enable option for Static website
This will extend the pane, exposing boxes for you to input your index.html and error.html configurations.
Leave other configurations as default and click Save Changes button at the base of the page.
You will get this notification of success.
Now at the bottom of the page there will be static website bucket endpoint which we can use to access it over a browser.
- Go ahead and copy the endpoint and view the static website.
Conclusion
That’s it! You’ve successfully hosted a static website on AWS. You can update your website by uploading new files to your S3 bucket whenever needed.
Posted on October 31, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024