Deploy Eleventy site with Github Actions on AWS S3

by Christian Fei @ 2019-08-29

275 words, 2 minutes reading time

#post #javascript #nodejs #tutorial #featured 

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

FEEDBACK @christian_fei

Featured blog posts

Twitter oauth by example in node.js So long, and thanks for all the veggies Simplest vanilla javascript static site blog search for jekyll, hugo, 11.ty Minimal environments with dotenv and node.js Connect to mongodb with monk in node.js Lazy loading images in 2020 Recover from failed `lerna` publish The cleanest way to maintain connect / express middlewares in node.js Better web scraping with node.js My blogging stack in 2020