Let's deploy a simple static website to Amazon S3 automatically whenever you push your changes.
Create your base project
For this tutorial, I'll use this pre-built template at Startbootstrap. You can also use your own project if you have.
Once downloaded, extract the archive. Then, create a folder named public
and move the project files to it.
Let's leave it for now, we'll touch this later on.
Create S3 bucket and configure it for static hosting
Visit the official documentation on how to create and setup a bucket. https://docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html
You can skip Step 5: Configure an index document onwards.
Create your Github repository
We need to create our github repository and configure our AWS access key and secret keys. If you don't have your it, go to IAM and create your access key.
Go to https://github.com and create your repository.
On your github repository, go to Settings then Secrets
Click New Secret.
Enter
AWS_ACCESS_KEY_ID
on Name field.Enter your AWS access key on the Value field.
Click Add secret
Repeat 4 - 6 for the
AWS_SECRET_ACCESS_KEY
Create github actions workflow
Go to your project root directory and we'll create folder named .github
and inside it, a folder named workflows
. Yes, there's .
(dot) on the .github
folder name.
mkdir -p .github/workflows
Create a file named main.yml
inside .github/workflows
folder.
touch .github/workflows/main.yml
Open main.yml
and enter the following code block.
name: Upload Website
on:
push:
branches:
- master
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v1
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ap-southeast-1
- name: Deploy static site to S3 bucket
run: aws s3 sync ./public/ s3://BUCKET_NAME --delete
Change BUCKET_NAME
with the name of your bucket created earlier. Same with the aws-region
.
The above workflow triggers an action whenever you push on the master
branch. The action first checkouts the branch, then configures AWS credentials so that it can use the AWS CLI. ${{ secrets.AWS_ACCESS_KEY_ID }}
and ${{ secrets.AWS_SECRET_ACCESS_KEY }}
fetches its values from the secrets we've created earlier. It then syncs your public
folder to your S3 bucket.
Commit and push your changes.
git add .
git commit -m "Commit message"
git push -u origin master
Go to your github repository and click on the Actions
tab. From there, you can see all your triggered workflows and its status.
Test your website
Sign in to the AWS Management Console and open the Amazon S3 console
In Buckets list, choose the name of the bucket that you want to use to host a static website.
Choose Properties.
Choose Static website hosting.
Next to Endpoint, choose your website endpoint.
There you have it! You have successfully automated the deployment of your static website to Amazon S3!
Top comments (4)
Thanks for sharing. I did add "--exclude ".*" --size-only" to the s3 sync command however, as otherwise it syncs all the files all the time (due to the timestamps always being new with the actions/checkout action. I know, there's a small risk it will now not sync a file if the size would be exactly the same, but I deem that chance to be small in my scenario). I also excluded the directories or files starting with a dot (otherwise the .github folder got synced). I prefer this solution in comparison to the one with AWS CodePipeline, as this solution would also delete the files in your bucket if they got deleted in your Github repo.
I also created a user specific for this action and assigned it a custom policy with these rights:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "EnableListingFilesInBucket",
"Effect": "Allow",
"Action": [
"s3:ListBucket"
],
"Resource": "arn:aws:s3:::"
},
{
"Sid": "EnablingChangingFiles",
"Effect": "Allow",
"Action": [
"s3:PutObject",
"s3:DeleteObject"
],
"Resource": "arn:aws:s3:::/*"
}
]
}
Awesome work John, thank u so much.
edit 1- Window users please use "New-Item" instead of "touch" if its showing errors.
edit 2- In case of "fatal: 'origin' does not appear to be a git repository
fatal: Could not read from remote repository." error, please use "git remote add origin github.com/username/repo.git".
edit 3- Save your project files (say .html, .css) in one different folder (say web) inside the main folder such as , main folder = web folder + git generated folders
Thanks a lot!!!! Really simple and cool!
Thanks for the content! It was exactly what I was looking for.