S3 Static Website Hosting
Learn how to host a static website using an S3 bucket.
Static websites are web applications that consist of fixed, unchanging content; unlike dynamic websites, where the content is generated on the server dynamically in response to user requests, static websites present pre-built, unaltered HTML, CSS, and JavaScript files directly to the user's web browser.
Static website hosting in S3
S3 buckets allow us to upload static HTML web pages and serve them on region-specific website endpoints. The general format of an S3 endpoint is of two types, depending upon the region.
s3-website dash (-) Region:
http://bucket-name.s3-website-Region
.amazonaws.com
s3-website dot (.) Region:
http://bucket-name.s3-website.Region
.amazonaws.com
S3 website hosting supports custom domain configurations, allowing us to associate branded URLs with their hosted content. If we have registered domains, we can use our custom domain names by recording DNS CNAME. Another method is to use custom domain names with Route 53 and serve the website content.
Enabling static website hosting
Static website hosting feature requires an index documnet and IAM permissions to access bucket content publically. We can enable static website hosting using the Amazon Management Console, REST API, AWS SDKs, AWS CLI, and AWS CloudFormation.
The index document is an HTML file rendered by the S3 website endpoint. S3 requires the name of the index document. If we have other web pages in the directories, the name of the index document must be consistent across them.
For example, if we want to name our index document as my_index.html
and host multiple pages in different directories, each folder should have a my_index.html
. Suppose we have a bucket in us-east-1
the region named my-bucket
with a folder, /events
. Then, it should contain an index document that will be returned when we access the website endpoint.
We can also design custom error pages and configure S3 buckets to return them when an error occurs while accessing the website endpoint.
Note: Names of index documents and error documents are case sensitive.
Bucket permissions
To host a static website using S3 buckets, we must permit public access to the bucket. Disabling Block Public Access and adding a bucket policy to restrict actions is the most commonly used method to manage public access. If we don't want to disable Block Public Access settings for the bucket but still want our website to be public, we can create an Amazon CloudFront distribution to serve our static website. Another way could be to use ACLs, but only if necessary. Especially if the owner of the bucket does not necessarily own the objects in the bucket, then one can use ACL to give full access to the owner.
Use case: Out-of-service on the website front page
Static website hosting is commonly used for personal portfolios, temporary promotional websites, data offloading, and more at far less cost than typical website hosting.
Let’s consider one use case to understand its usability further. Suppose there is an e-services website that has undergone some server maintenance and will not be able to provide its services for some time. As a good practice we want to display an out-of-service message on the website front page. However, since the main server is down, we could not render the customized page. Renting out another server, say EC2 instance, to display a customized out-of-service page will be considerably expensive.
Fortunately, we can leverage the static website hosting feature of S3 buckets in such scenarios. Simply upload the customized out-of-service HTML page to the bucket and configure it as the index document. Then, redirect the traffic to the website’s endpoint to the S3 bucket website endpoint.
Get hands-on with 1300+ tech skills courses.