How to create a static website in AWS

Adam Bertram Sat, Apr 13 2019 AWS, cloud computing, web server 0

Creating a static website in AWS lets you create a simple website with no application code or complicated logic. Static websites are great for instances where it's just not necessary to have a database backend or any complicated logic. Using just a Simple Storage Service (S3) bucket, you can create a static website in AWS. Let's see how!

Author
Recent Posts

Adam Bertram

Adam Bertram is a 20-year IT veteran, Microsoft MVP, blogger, and trainer.

Setting up the S3 bucket ^

First, you'll need to have an S3 bucket. You can either use one yourself or create a new one. While logged into your AWS Management Console, navigate to the S3 service and click on Create Bucket.

Creating an S3 Bucket

We don't need to configure anything other than the defaults here, so click through the short wizard to create your S3 bucket.

Enabling static website hosting ^

Once you've created your bucket, click on it and then select Properties. This will bring you to a screen where you should see a Static website hosting option.

Static website hosting option

Select Static website hosting and then select Use this bucket to host a website, ensuring you've set your main index document and error document you'll have in your S3 bucket. Also, make sure you copy the endpoint. This will be the URL to your site after configuration.

Enabling the S3 bucket for hosting

Enabling public read access ^

Next, you'll need to give everyone access to your website. To do this, you'll first need to relax the public access settings. Click on Public Access Settings under the Permissions tab, click Edit, and then uncheck Block new public bucket policies.

Unblocking public policies

After unblocking this, head over to Bucket Policy, paste in the below bucket policy, and click on Save.

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

Uploading an index document ^

After you've created the S3 bucket, enabled static website hosting, and given the public read access to the bucket, the website should now be live!

However, navigating to the endpoint URL now will yield a forbidden message. This is because even though the website is active, the service hosting the site can't find any pages to serve up. Let's fix that.

Create a simple index.html page that looks something like this:

<html><body>Hello, world!</body></html>

Go to your S3 bucket settings again, and in the Overview tab, click on Upload to upload the index.html document to the root of the bucket.

Testing out the static website ^

Once you've uploaded the test index.html file, navigate to your endpoint URL in a web browser. If you do this immediately, you may still receive an Access Denied error. I ran into this when building the website for this article. However, if you wait a few minutes, the website will come up and tell you Hello, world! by rendering the index.html file we created above.

Subscribe to 4sysops newsletter!

Summary ^

After configuring the site, you now have the option to upload as many web assets as you'd like. The web service in S3 will render any HTML, CSS, or other web assets you place in this S3 bucket just as if it were running on an "actual" web server. And, if you'll notice, the speed will be lightning fast because there's no database backend to worry about.