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.gitCreate and name main branch
git branch -M mainPush 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.
Top comments (0)