How to Configure a Static Website on Amazon S3 in 10 Easy Steps
Have you ever wondered how to configure a static website on Amazon S3? Has it ever sounded like a task that is too complicated to accomplish?
Well in this tutorial I will guide you through the quick and easy steps of doing just that!
Once you complete this tutorial you will feel like a pro when it comes to configuring static websites on Amazon S3.
But before we start there are two requirements!
Requirements:
- An AWS account.
- An HTML file containing your website.
Once you are set with both of these requirements LET’S GET STARTED!
Step 1
First, we will log into the AWS Management Console. From there we will navigate to the Amazon S3 console page. You can do this by typing S3 in the Services search bar, and selecting the S3 service when it appears.
Once you are on the Amazon S3 Console page you can select the Create Bucket button to enter the Create Bucket Configuration screen.
Step 2
The next step is to name your bucket. You can call it whatever you like, but make sure you use lowercase letters.
For the Region option, AWS suggests that you choose a region that is geographically close to you to minimize latency and costs.
For the remaining options, you can accept the defaults settings.
Scroll down and select Create Bucket.
Success! Our bucket is now created!
Step 3
After our S3 Bucket is created our next step is to enable Static website hosting for our bucket.
To do this we return to the Amazon S3 Console page. Once there click on the bucket’s name to open the bucket’s info page.
Step 4
Once you are on the bucket’s info page click on the Properties tab and scroll down to the Static website hosting section. Choose Edit.
Step 5
Inside of the Static website hosting page choose Enable. For the Index, document enters the name of the HTML file that you will be uploading to your S3 bucket. For this tutorial, my HTML file will be called tutorial.html. To avoid any errors make sure the name you choose matches the name of the file you intend to upload later on in this tutorial.
Two optional fields in this section are the error document field and the redirection rules. For this tutorial, we will leave them as is. But if you would like to configure them for your project here are two links that can help you do that.
Configure a custom error document
Configure redirection rules to use advanced conditional redirects
Scroll to the bottom of the page and click Save changes.
After the changes have been saved, note how the Static website hosting section has changed. It now contains an endpoint. Make sure you take note of this endpoint. When you are finished with the configuration process. You will use this endpoint to test your website.
Step 6
The next steps are to edit the Block Public Access settings. We need to allow public access in order to view our website when we click on the endpoint link.
To do this navigate to the Amazon S3 console page. Once you are there click on the name of your bucket to open the bucket’s info page. When you are on this page click on the Permissions tab.
Under Block, public access (bucket settings) choose Edit, and then Clear the Block all public access box and Save changes.
Next, go back to the Permissions screen and edit the Bucket policy. Copy and paste the following JSON text. Replace the part that says “tutorialawsbucket” with your bucket’s name.
Save the change you have made.
Once you have done this public access has been granted!
Step 7
It is now time to set up our HTML file!
Here is a screenshot of my HTML file. Your file can be unique to your project. Just make sure the file name matches the file name you indicated earlier.
So for example, my file will be called tutorial.html, because that is what I indicated it would be called within the Static website hosting settings.
Step 8
The next step is to upload your HTML file to your S3 bucket.
To do this, return to the Amazon S3 console page and select your bucket.
Once the bucket’s info page is open select the Upload button
Step 9
In the upload screen, select the “Add files” button to upload the HTML file.
Once your file is listed, select the Upload button to complete this process.
Step 10
After your HTML file has been added to your S3 bucket the last and final step is to test your endpoint.
To do this return to the Static website hosting section found in your bucket’s Properties section.
Select the endpoint link, and you should see your website appear on a new tab.
Congrats you have just Configured a Static Website on Amazon S3!!
I hope this article was of benefit to you!
Let me know what you think in the comments below.
Follow me for more content as I dive deeper into the world of DevOps and Software Engineering.
