Deploy Eleventy site with Github Actions on AWS S3

by Christian Fei @ 2019-08-29

273 words, 2 minutes reading time

#post #js #tutorial #featured 

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

Leave a comment

Better web scraping with node.js My blogging stack in 2020 Run cypress integration tests with github actions workflow Simple telegram message with github actions Deploy eleventy site with github actions on aws s3 Simple ad and trackers blocking with dns Build for a slow connection Upgrade mongodb 3 to 4 on ubuntu Publishing org scoped npm packages with travis A story about npm publish / unpublish