Host static website with AWS S3 pushing codes from Git
Published: 2023-08-01 21:59:57

*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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o9chjdkxs36tcy8alt19.png)
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 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwoleoic59tcu45hezsk.png)
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 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2av0hkyp4rlavgwte6y.png)
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`


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cqryk85pep0zgil0bjg.png)

Your pipeline will run and it will push the codes in your github to S3 bucket 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl9ilo5l87pib9qszsez.png)

Navigate to S3 from the search bar
click on the bucket created, you will see the files in your bucket


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxwd9huxo40t0nwe3t6v.png)

Next, click on properties, get the website Url and check it on your browser, your website is up and running.