I wanted to automatically deploy this Hugo blog to an S3 bucket for easy maintenance, and to learn more about GitHub actions. Static website hosting in S3 is one of the easiest and most cost effective ways of hosting a simple site like this one.

Step 1: Setting Up GitHub Actions Workflow

Begin by creating a ‘.github/workflows’ directory in your Hugo project repository. Inside this directory, create a YAML file, such as deploy.yml. Define the workflow to trigger on pushes to the main branch, and specify the jobs required for deployment.

Here is the action I’ve written for this task:

name: Deploy to S3

    branches: [ main ]

    runs-on: ubuntu-latest

    - name: Checkout
      uses: actions/checkout@v4
    - name: Update theme
      run: git submodule update --init --recursive

    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v2
        hugo-version: 'latest'

    - name: Build
      run: hugo --minify

    - name: Configure AWS Credentials
      uses: aws-actions/configure-aws-credentials@v1
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: eu-central-1

    - name: Deploy static site to S3 bucket
      run: aws s3 sync ./public s3://sanderveldhuizen-site --delete

Step 2: Configure AWS S3 Bucket

Create an S3 bucket to host your static site. Ensure that the bucket is configured for static website hosting, and note the bucket name for later use.

Step 3: Configure GitHub Secrets

In your GitHub repository, go to Settings > Secrets and add the following secrets:

  • AWS_S3_BUCKET: Your S3 bucket name
  • AWS_ACCESS_KEY_ID: AWS access key with S3 permissions
  • AWS_SECRET_ACCESS_KEY: AWS secret key corresponding to the access key

Step 4: Push Changes and Watch the Magic Happen

Commit the changes to your repository and push them to the main branch. GitHub Actions will automatically trigger the workflow, build the Hugo site, and deploy it to the specified S3 bucket.