christian fei's blog

agile developer

clean code connoisseur && testing aficionado

read more about me

read some posts that i wrote

building pomodoro.cc

follow me on twitter

connect with me on linkedin

distilling customer feedback at wonderflow

Edit this page on GitHub

Deploy Eleventy site with Github Actions on AWS S3

by Christian Fei

written on Thu Aug 29 2019 00:00:00 GMT+0000 (Coordinated Universal Time)

gh-actions-working.png

I finally managed to get the deployment of an eleventy - 11ty site (namely this one) and sync with AWS S3, where this blog is hosted.

Additionally you can put in a small script that purges cloudflare's cache too.

Setting up the Github Actions workflow

create a file in your repository under .github/workflows/main.yml, with the following contents:

name: name this build as you like
on: [push]
jobs:
  build_deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/[email protected]
      - name: up
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          npx @11ty/eleventy
          aws s3 cp \
            --recursive \
            --acl public-read \
            --region eu-central-1 \ # change it
            ./_site/ [s3://bucket_name] # change it

secrets

additionally set two Secrets in the repository settings on GitHub:

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY

gh-actions-github-secrets.png

Now you should be all set, and your eleventy blog gets deployed to AWS with GitHub Actions on every push.

update

this blog post was deployed with this exact workflow, so meta

gh-actions-deploy-blog-post.png


A few highlights of the workflow:

gh-actions-build-deploy.png

gh-actions-cloudflare-purge-cache.png