How to create a static website locally, push it to github, then to AWS S3 using AWS codepipeline and publish it automatically.

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

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

Give suitable name and description
You can add readme.md file if you need. Click ‘create repository’

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

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.

Note that the bucket name should be unique across all AWS S3. So have some other name other than shown here.

Uncheck ‘block all public access’

Acknowledge and create the bucket.

Step-4 Create AWS code pipeline to push the code automatically to your S3 bucket

Goto AWS code pipeline

Create new pipeline by giving a name as shown below and press next

Under source stage, select github 1 or 2 depending on which you are using

Click connect to Github. This would prompt github login and show you dialog

Give the connection name as same as your remote github repository name and select connect.

Provide the repository name and branch name of your github repository

Skip the build stage as we are deploying a static website

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

Make sure you check the ‘Extract file before deploy’

Review and create the pipeline.
Your pipeline should be successfully created and deployed after few minutes

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.

Step-5 Making your S3 bucket as a publicly available static website

Goto your S3 bucket and properties tab:

Go below to ‘Static website hosting’ section and click ‘Edit’ button

Enable static website hosting and specify the ‘index document’ with our ‘index.html’ value.

Save the changes.
Now goto the ‘permission’ section of the bucket

Edit ‘block public access’ and uncheck ‘block all public access’

Save and confirm the changes.
Edit the Bucket policy

Use the policy generator

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.

A pop up would be shown with a generated JSON policy
Copy it and paste it in the bucket policy section for the bucket

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.

Your website should be publicly available now.

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.

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

Once this is success, refresh your page browser. You will observe that the local changes are automatically pushed to your static website.

Blog