DEV Community


Posted on

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

Image description
Sample html, css and javascript files are given here:

        <title>My Website using S3</title>
        <link rel="stylesheet" href="index.css"/>
        <link href="" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"/>
        <script src=""></script>
        <script src="index.js"></script>
        <script src="" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
        <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>
        <div id="animation">hover over me</div>
Enter fullscreen mode Exit fullscreen mode


        $(this).animate({height: "200px"});

        $(this).animate({height: "100px"});

Enter fullscreen mode Exit fullscreen mode


html, body{
    height: 100%;
    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;}

Enter fullscreen mode Exit fullscreen mode

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

Image description

  • Give suitable name and description
    Image description

  • You can add file if you need. Click ‘create repository’
    Image description

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

  • 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

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
Note that the bucket name should be unique across all AWS S3. So have some other name other than shown here.

Image description
Uncheck ‘block all public access’

Image description
Acknowledge and create the bucket.

Image description

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

Goto AWS code pipeline
Image description

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

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

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

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

Provide the repository name and branch name of your github repository
Image description

Skip the build stage as we are deploying a static website
Image description
Image description

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

Image description
Make sure you check the ‘Extract file before deploy’

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

Image description

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

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

Goto your S3 bucket and properties tab:

Image description
Go below to ‘Static website hosting’ section and click ‘Edit’ button
Image description
Enable static website hosting and specify the ‘index document’ with our ‘index.html’ value.
Image description
Save the changes.
Now goto the ‘permission’ section of the bucket

Image description
Edit ‘block public access’ and uncheck ‘block all public access’
Image description
Save and confirm the changes.
Edit the Bucket policy

Image description
Use the policy generator
Image description
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

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

Your website should be publicly available now.
Image description

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

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

Top comments (0)