Deploying a static website on AWS S3

In this quick tutorial, I am going to show you how you can quickly deploy a static website onto AWS S3. This is similar to the functionality that Github Pages provides where it allows you to host static websites.

Pre-requisite:

You need to sign up for AWS : https://aws.amazon.com/ and create an account. You get a bunch of stuff for free for the first year so if you have a new account, you can host your website for free for 1 year.
Post which you will be charged a small fee. So make sure to delete your object and bucket once you are done with it.

Step 1) Create a new Bucket

Search for the S3 service in the AWS Search bar and click on 'Create bucket'
Enter the bucket name and scroll down and hit 'Create Bucket' button.
Let all the default values be set. We will come back later and change some of these.

You should now see this new bucket on your s3 Buckets home page.
Click on your bucket name to open the bucket.

Step 2) Upload your HTML Files

Next up is to upload your Objects(files) into your bucket.
I have 3 files I want to upload. It is a simple HTML, CSS, JS Static web site.
You can either click Upload button or drag and drop your files as well.

Go ahead and click Upload now. This will upload your files to your bucket.

Step 3) Make your Bucket public

Go back to your bucket view and click on the Permissions tab. By default AWS makes sure your buckets are all private and not accessible from the outside to protect your data. Since we want this website to be accessible, we need to make the bucket 'public'.
Under permissions> 'Block public access(bucket settings)' click on Edit.
Un-check 'Block all public access' and click on 'Save changes'.
You will get a popup asking you to confirm. Confirm this.

Step 4) Add a policy with Policy Generator.

Under the permissions tab, scroll down to Bucket Policy and click 'Edit'.
This will allow you to access the Policy Generator
Bucket policies are written in JSON. Now, AWS provides a Policy Generator GUI to help you create the required JSON format.
Also note that For me my ARN is arn:aws:s3:::markbdsouza-blog-post. This will be required in the next step.
Click on Policy Generator and put in the below values
Under Actions - Search for and select 'Get Object'
Under Amazon Resource Name (ARN) : the files that we want to apply this policy to, make sure you append a /* at the end of your bucket url. This will include all files in your bucket. For me it would be- arn:aws:s3:::markbdsouza-blog-post/*
Hit 'Add Statement' and 'Generate Policy'
This generates the JSON you need to add to your bucket.

{
  "Id": "Policy1618322272060",
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Stmt1618322267578",
      "Action": [
        "s3:GetObject"
      ],
      "Effect": "Allow",
      "Resource": "arn:aws:s3:::markbdsouza-blog-post/*",
      "Principal": "*"
    }
  ]
}

Please note the Resource in the policy would be different for you.
Paste the created JSON policy in the Edit bucket policy section Now scroll down and save changes.

Step 5) Set up the static website

Go to the Properties tab of your bucket and scroll down to the end to 'Static website hosting section' We see it is disabled. Click on 'Edit'.
Enable static website hosting in the options provided and enter index.html as your index document. It also allows you to provide an Error document as an optional entry Scroll down and hit save changes.
Scroll back down to the bottom of Properties. It should now show you the url for your static website

Step 6) Testing

Click on the url, it will open a new tab with your website.
My url is : http://markbdsouza-blog-post.s3-website.ap-south-1.amazonaws.com/ Not the friendliest of links but it gets the job done.
Note: you can read your objects(files) in your bucket by adding /filepath. For example to see my script.js file I could read it through- http://markbdsouza-blog-post.s3-website.ap-south-1.amazonaws.com/script.js
If you have followed these steps till now, please make sure you delete your buckets to avoid any unnecessary charges after your free trial is over.

And that's it! A few one time steps to set up. If you need any changes to your website you can just reupload your files to your bucket and it will reflect in your website.
You can also enable versioning in your bucket to make it easy to track changes and revert them if necessary. You could also use Route 53 to buy your domain instead of a long s3 specific url.