How to deploy a static website with S3

In this article you will learn how to deploy a static website in a serverless way using S3 website hosting feature. This is an easy and cheap way to deploy a website with AWS, and you don't have to worry about scaling, in fact S3 is able to handle up to 5,500 requests per second per prefix

Have a look at the following steps

1. Create S3 Bucket

• Go to S3
• Create a new bucket
• If you have a domain that you want to point to the website, this has to match the bucket name. For example, if your domain is test-static-site.com, this must be set as bucket name too

Upload website

Upload your website html, css and js files in your bucket. If you don't have a website to upload at the moment, you can download a demo website from here just for testing

2. Enable S3 Website Hosting

• Go to the Properties tab of your bucket
• Scroll down to the section Static website hosting and click on Edit
• Enable Static website hosting from here
• Configure index and error document. If you're using my demo website files, these documents are index.html and 404.html After saving you can find in the properties tab the S3 generated url. This url is built as http://<bucket-name>.s3-website-<region>.amazon.aws.com or http://<bucket-name>.s3-website.<region>.amazon.aws.com.

3. Edit bucket permissions

If you try to access the website by your S3 endpoint, you will probably get a 403 Forbidden error. To fix this you need to modify permissions to allow everyone to have read access to your bucket:

• Go to the Permissions tab of your bucket.
• In Block public access section, click Edit and clear Block all public access and all the other toggles
• In Bucket policy click Edit and add the following policy (fill your bucket name)

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}

Now you will be able to access your website by the S3 endpoint

4. Use a custom domain

• Go to Route53
• Open the hosted zone that matches your domain name
• Select record type A - Routes traffic to an IPv4 and toggle Alias
• Point the record to S3 website endpoint. Note: if you don't find the S3 endpoint, it's because the domain doesn't match the bucket name
• If your bucket name is a subdomain an A Alias record won't work. In this case you will need to create a CNAME record and point it to the S3 endpoint

After saving the new records, you will have to wait around 60 seconds, to propagate the change to the DNS servers. After that you will be able to access your website from your custom domain.

If you want to access your website using the www subdomain too, you will need to configure one more bucket and one more Route53 record. Have a look at this article to find out how to do it.

Conclusion

In this article we learned how to deploy a static website without having to manage any server, and having the possibility to scale up to 5,500 requests per second per prefix. Have a look at this to deploy a CloudFront, which will allow you to reduce latency and attach a SSL certificate to your website