DEV Community

loading...
Cover image for Deploy static website to S3 using Github actions

Deploy static website to S3 using Github actions

johnkevinlosito profile image John Kevin Losito Updated on ・3 min read

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.

project-directory-structure

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

github-add-secrets

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
Enter fullscreen mode Exit fullscreen mode

Create a file named main.yml inside .github/workflows folder.

touch .github/workflows/main.yml
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Go to your github repository and click on the Actions tab. From there, you can see all your triggered workflows and its status.

gh-actions-build

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!


Discussion (1)

pic
Editor guide
Collapse
heyysaiii profile image
SAI SWAROOP BEDAMATTA • Edited

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