Deploy static website to S3 using Github actions

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.

1. Go to https://github.com and create your repository.

2. On your github repository, go to Settings then Secrets

3. Click New Secret.

4. Enter AWS_ACCESS_KEY_ID on Name field.

5. Enter your AWS access key on the Value field.

6. Click Add secret

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

1. Sign in to the AWS Management Console and open the Amazon S3 console

2. In Buckets list, choose the name of the bucket that you want to use to host a static website.

3. Choose Properties.

4. Choose Static website hosting.

5. Next to Endpoint, choose your website endpoint.

There you have it! You have successfully automated the deployment of your static website to Amazon S3!

---

Comments

[Frederik]

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:::/*"
}
]
}

[Sai Swaroop Bedamatta]

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

[George Bentes]

Thanks a lot!!!! Really simple and cool!

[Walmyr]

Thanks for the content! It was exactly what I was looking for.