Introduction
In the world of web hosting, cost effectiveness, reliability are the considerations for business and developers. Amazon S3 ( Simple Storage Service) is a powerful and affordable solution for hosting static websites. In this blog we will explore how to host a static website in S3, its benefits and the steps involved.
Step1: Creating a S3 Bucket
- Click on the services at the top and search for S3 Bucket and click on it.
- In the S3 dashboard, click on the Create Bucket button.
- In the General Configuration,
- Select Bucket Type : General purpose
- Bucket name: Enter mybucket01
- Object ownership: Select ACLs disabled (recommended) option.
5. In the option of Block Public Access settings for this bucket, Uncheck the option of Block all public access.
6. Keep everything default and click on the Create Bucket button.
Step2: Enable Static Website Hosting
- To proceed, go to the S3 bucket name that you created and click on it. After that, navigate to the Properties tab which can be found at the top of the screen.
- Scroll down to the Static website hosting section and click on the Edit button.
3. In the Static website hosting dialog box
- Static website hosting: Select Enable
- Hosting type: Choose Host a static website
- Index document: Type index.html
- Error document: Type error.html
- Click on Save Changes.
4. Go to the Properties tab of your S3 bucket, and find the Static website hosting section. Copy the Endpoint provided in this section to your clipboard and save it for future reference.
5. Create an index.html file using Notepad or Visual Studio, which should contain the message “Welcome to DevOps Horizon.” Also, create an error.html file that displays the error message “Error 404: Page Not Found!”
6. Upload the above two files in the devopshorizon25 bucket.
7. Now we have to configure our S3 Bucket, go to the permission tab and click on the edit button under the bucket policy.
8. Paste the below policy by adding the arn of the bucket and click on save changes button.
{
“Id”: “Policy1”,
“Version”: “2012-10-17”,
“Statement”: [
{
“Sid”: “Stmt1”,
“Action”: [
“s3:GetObject”
],
“Effect”: “Allow”,
“Resource”: “replace-this-string-with-your-bucket-arn/*”,
“Principal”: “*”
}
]
}
Step3: Testing the website
- Now you should copy the static website url that has been saved earlier and paste it in the browser, you will be able to see the index.html file.
2. Now in the same url, but this time add random characters to the end of the url to break it, you will be able to see the error.html file.
Best Practices for Hosting Static Websites on S3
Optimize Your Files:
To achieve better functionality, it is advisable to compress images, minify CSS and JavaScript files, and enable a CDN.
Monitor Usage:
Utilize AWS CloudWatch to monitor your usage and spending metrics to avoid incurring unnecessary costs.
Enhance Security:
AWS Identity and Access Management (IAM) Policies can be utilized to restrict access to your bucket, thereby fortifying security.
Enable HTTPS:
Use Certificate Manager (ACM) to obtain an SSL certificate and CloudFront to apply HTTPS to your site.
Backup Data:
Periodically backup your website to protect against data loss.
Conclusion
Hosting static websites is made simple and efficient with Amazon S3. It is an excellent choice for both private users and businesses due to its low cost and strong scalability. Setting up and maintaining the static website is simple if you follow the preceding instructions. Enroll in Amazon S3 now to begin taking advantage of cloud hosting benefits for your static websites. Follow DevOps Horizon for more Cloud and DevOps blogs.
