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
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Update theme
run: git submodule update --init --recursive
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
- name: Build
run: hugo --minify
- 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: 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 nameAWS_ACCESS_KEY_ID
: AWS access key with S3 permissionsAWS_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.