How to Host a Static Website on Amazon S3 Bucket: A Step-by-Step Guide
In the current digital landscape, having a simple fast, and cost-effective website is essential for showcasing your content, be it running a personal blog, small business, or portfolio. Amazon S3 provides an excellent platform for hosting static websites with its simple storage services.
In this blog, we will guide you through the essential steps to deploy your static website in Amazon S3.
Deploying a static website in s3 is a straightforward and powerful way to leverage cloud infrastructure for your online presence and this article will equip you with everything you need to launch your website effortlessly in amazon s3.
What is Amazon S3?
Amazon S3 is a highly scalable object storage service that offers data availability, security, and performance. It’s suitable for businesses of all sizes and can be used for various use cases such as data lakes, websites, mobile apps, backup and restore archives, and big data analytics.
Let’s dive into the hands-on where we will break down this into a step-by-step guide.
Step 1: Creating an S3 Bucket
Log in to the management console and type S3 on the Search bar then Select S3 under services.
In the s3 console, Click Create Bucket.
Enter the bucket name and choose the region where you want the bucket to be located.
Scroll down and uncheck the Block all public access checkbox to disable Amazon S3’s default setting to block public access to an S3 bucket. A warning will appear beneath this section; click on the checkbox to acknowledge current settings to enable public access to the bucket.
This configuration allows users to access static website pages stored in the S3 bucket.
Leave the rest of the options at their default settings, and click on the Create bucket button.
Step 2: Enable Static Website Hosting
On the resulting page from the successful creation of the bucket, click on the bucket name. Select the Properties tab, scroll down to the Static website hosting section, and click Edit.
Once you choose Enable, more configuration options will be made available on the console to enable you to provide the necessary settings and documents for hosting your website.
Leave the Hosting type as the default (Host a static website), and enter the exact name of the Index document that should serve as the file for your static webpage. Do the same for the Error document if you want to have a custom web page for 4XX class errors. This section is case-sensitive, therefore ensure the names you provide are the exact match.
Navigate to the end of the page and click on Save Changes.
When you scroll down the resulting page, you will notice that a bucket endpoint was successfully created.
Step 3: Add a Bucket Policy that Makes an S3 Bucket Content Publicly Available
Here we will add a policy to grant public read-only access to our S3 bucket.
To edit the permissions of your bucket, follow these steps:
On the current page of the console, navigate to the Permissions tab.
To edit the permissions of your bucket, follow these steps:
On the current page of the console, navigate to the Permissions tab.
Scroll down to the Bucket policy section and click on Edit.
Paste the code into the text editor provided in the console.
In the Resource section of the code, replace the unique bucket name with your own. This will ensure that you have the correct permissions for your bucket.
At the bottom of the page, click on Save Changes.
Step 4: Configure an Index Document
The index document is the root file of our static website. Make sure you have your web files ready.
choose the Object tab, and on the resulting page, drag and drop the file (or folders) you want to upload here, or choose Add files (or Add folder). Scroll down and click the Upload button.
After a successful upload, you can view your static website by visiting the Endpoint of your S3 bucket on your web browser.
To get your bucket endpoint, choose the Properties tab and scroll down to the Static website hosting section at the end of the page. Click on it to open your static website on a new tab.
This brings us to the end of this article, pull everything down.
Conclusion
Hosting a static website on Amazon S3 is an efficient and cost-effective solution for delivering web content to a global audience. By leveraging S3’s robust infrastructure, you can ensure high availability, durability, and scalability for your static website.
Thanks for reading and stay tuned for more.
If you have any questions concerning this article or have an AWS project that requires our assistance, please reach out to us by leaving a comment below or email us at [email protected].
Thank you!