Host static website with AWS S3 pushing codes from Git

Introduction
In this article, you will learn how to host your static website on s3 pushing codes from git. We will also use AWS code pipeline to deliver the codes to S3. This is a easy way to automate your website and host it in cloud.

Prerequisite
AWS Account
Git Account
A domain name

Set up AWS S3
Sign in to the AWS Management Console.
Open the S3 service.
Click on "Create bucket."
Enter a unique bucket name, use the name of the website you wish to setup. e.g., "www.prolific.com.ng".
Select the region closest to your target audience.
Uncheck "Block all public access" (acknowledge that the bucket will be public)
Click on "Create bucket."

Configure S3 bucket to for website
Click on the bucket you created
Navigate to permissions
On bucket policy, click on edit.
Use this policy
Get your resource ARN on top left of the page and add it before saving the policy

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

Then save the policy.

Navigate to properties. Scroll to the page bottom.

Edit the Static website hosting
Check the Static website hosting to Enable
On the index document, input this

index.html

You can add error.html for Error document
Then save changes.

Now your bucket is ready

Next Set up your github
Create a GitHub repository for your website, if you haven't already and push your static website files to it.

Setup AWS Code pipeline
Navigate to AWS Code Pipeline
Click on create pipeline
Give your pipline a name

click on next
On the source provider
Choose Github, we are connecting from github.
Click on Connect to Github
Signin and authenticate your Github account
Once connected, you will be able to see your respositories, choose the repo with your website

Write the name of the branch that should trigger the pipeline. This can be main, master or any other branch.

Next, the build stage. You can create a simple buildspec.yaml file or you use code build. You can simple skip it.

Code deploy
When you click on next, you will choose where the code will deploy to, in this case, it will be s3 bucket.
Choose the bucket name you created.
Tick Extract file before deploy

Finally, review and click Create pipeline