How to create a static website locally, push it to github, then to AWS S3 using AWS codepipeline and publish it automatically.
Tags: staticwebapps, awss3, github, awscodepipeline
Published: 2023-04-13 21:59:59

This post shows how you can create a local static website, push to github, then to AWS S3 using AWS code pipeline automatically for every commit to the remote github repository and publish it as a website automatically.
## Step-1 Create your local project
Create your local files for the website using your favorite IDE (like VS code). In my case I created the files in the following location C:\Users\MugunthanSelvaraj\Desktop\MyNewWebSite

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ie1ijfn86x2c77jx5caj.png)
Sample html, css and javascript files are given here:
index.html

```
<html>
    <head>
        <title>My Website using S3</title>
        <link rel="stylesheet" href="index.css"/>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"/>
        <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
        <script src="index.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    </head>
    <body>
        <main role="main" class="container">
            <h1 class="mt-5">Welcome Demo page</h1>
            <p class="lead">This is my demo page for S3 web hosting.</p>
        </main>
        <div id="animation">hover over me</div>
    </body>
</html>
```
index.js

```
$(document).ready(function(){
    $("#animation").hover(function(){
        $(this).animate({height: "200px"});
    });

    $("#animation").mouseout(function(){
        $(this).animate({height: "100px"});
    });
})

```
index.css

```
html, body{
    height: 100%;
}
#animation{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation-name: box;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }

  
@keyframes box {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
  }

```
## Step-2 Setup Git repository and push it to remote
To do first time git setup check out [this](https://git-scm.com/book/en/v2/Getting-Started-First-Time-Git-Setup)
Use the following git commands to create the repository locally.

- Initialize git repository in the project folder. In my case `C:\Users\MugunthanSelvaraj\Desktop\MyNewWebSite`

`git init`

- Add all files to the repository
`git add .`

- Commit the files to the local repository
`git commit -m “my website using AWS S3”`

Before proceeding further, you need to have your remote git repository
- Create and/or login to your github account
- Create a new repository using the ‘new’ button

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

- Give suitable name and description
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/woxgb5csnz8kjed94tcj.png)

- You can add readme.md file if you need. Click ‘create repository’
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qozmq0w3gwc3p1anu45.png)

Once repository is created in your github account, it will suggest you how to push your local code to remote git repository.

- Add remote origin
`git remote add origin git@github.com:your_github_account/mynewwebsite.git`

- Create and name main branch
`git branch -M main`

- Push the code to github
`git push -u origin main`

After the above commands are successful, you should be able to see your local files successfully pushed to remote git repository

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gel83kgm4c8zrpiarhti.png)
## Step-3 Create AWS S3 bucket for code push
In your AWS S3, create a new S3 bucket where you want to push the code from github to and then you will publish it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tbrgoo2t6ss0g1s1nli.png)
Note that the bucket name should be unique across all AWS S3. So have some other name other than shown here.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yt3ogucmtoixymtc8pa.png)
Uncheck ‘block all public access’

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/22ma5r6cbbzdgbi4ijnf.png)
Acknowledge and create the bucket.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kamkuebucngmhdadfa53.png)
## Step-4 Create AWS code pipeline to push the code automatically to your S3 bucket
Goto AWS code pipeline
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9o57lwbizp8emaojh3ey.png)

Create new pipeline by giving a name as shown below and press next
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2fqbalhpsxt44b5qsiy.png)

Under source stage, select github 1 or 2 depending on which you are using
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypp2bg2y5m45azuwzv8v.png)

Click connect to Github. This would prompt github login and show you dialog
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzjjzprexcxxkemq2ucu.png)

Give the connection name as same as your remote github repository name and select connect.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ieqpqwqndbxw0o32idgk.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bnz39xv3xmfsch7ldhzs.png)

Provide the repository name and branch name of your github repository
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c24g1zt8jt48tijv6l5h.png)

Skip the build stage as we are deploying a static website
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b43mln6w6g1de82tmtnk.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26g8ae7cnomsta4r6255.png)

Under deploy stage, select the deploy provider as ‘Amazon S3’, bucket with the same bucket name which you created

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9hp844c7ekyhjvl884h.png)
Make sure you check the ‘Extract file before deploy’

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj83j6e6ptomk0ktbtnp.png)
Review and create the pipeline.
Your pipeline should be successfully created and deployed after few minutes

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w8j7eyku5af6ffrf5txf.png)
Sometimes the above action would fail with error ‘insufficient permission’. Ignore and retry, it should succeed after some time.
Now your S3 bucket would have all the files which you have in your github repository.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krot5ros0i8f4rz0hn5q.png)
## Step-5 Making your S3 bucket as a publicly available static website
Goto your S3 bucket and properties tab:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzc36zwbw3kv4m938jtg.png)
Go below to ‘Static website hosting’ section and click ‘Edit’ button
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eaoyalcpgtumuiqcbqh5.png)
Enable static website hosting and specify the ‘index document’ with our ‘index.html’ value.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gu5kabm7vu0gqxfs74ec.png)
Save the changes.
Now goto the ‘permission’ section of the bucket

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idg0v5zhmcx7fe09bttd.png)
Edit ‘block public access’ and uncheck ‘block all public access’
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0367h2mltmdhu4f72vz2.png)
Save and confirm the changes.
Edit the Bucket policy

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z48m57nm12asbcli8iq6.png)
Use the policy generator
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsjz308zutt3s1n95hcu.png)
Copy the bucket ARN above and specify the following values as shown below:
Type of policy: S3 bucket policy
Effect: Allow
Principal: * (Allow for all)
Under Actions: select GetObject
For ARN paste the one copied from the above which the Amazon Resource Name for the bucket. Make sure it ends with `/*` (Else this would give error for the policy)
Add statement and generate the policy.

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4krbvr3ekbxsh2br9cct.png)
A pop up would be shown with a generated JSON policy
Copy it and paste it in the bucket policy section for the bucket

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7u9kmsfc6aoe98had00j.png)
Save the changes.
Now got the ‘properties’ section of the bucket. Under Static website hosting, copy the bucket website endpoint.
Paste it in a browser and test it.

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

Your website should be publicly available now.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vji8zr109w33oalms06w.png)
## Step-6 Checking the codepipeline
Now we have our S3 bucket in sync with our Git repository. Let us check this from our local.
Open your local file. Add some changes and modify index.html.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pizdcv74c8a0knmx9mo.png)
Add the changes to your local repository
`git add .`

Commit this change
`git commit -m “Adding new changes”`

Push it to the remote repository
`git push`

Observe your AWS CodePipeline. It should have started now to pick up your changes from git remote repository and sync it to S3 bucket
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3sp05zdfafai6g0dj49.png)

Once this is success, refresh your page browser. You will observe that the local changes are automatically pushed to your static website.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c9ic6eqjzujxajd9o6d2.png)