christian at agile venture bolzano 2019 christian fei's blog

agile developer, clean code connoisseur && testing aficionado

read more about me or what i am doing now

scroll through posts that i wrote

Deploy Eleventy site with Github Actions on AWS S3

written on 2019-08-29 by Christian Fei

#post #js #tut 

this

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

this