Eleventy Autodeploy via Github Actions

This is quick guide on how to setup github actions to deploy an eleventy site after a push but this work can be used in general for any frontend framework that just need a static folder.

In Eleventy you can configure a static folder that will contains the build output of your project. For example checking inside eleventy.js you can find:

   return {
        dir: {
            input: "src",
            output: "_site",

so your build will be in _site/

Now you can configure github action to copy all files from repository to the server build directory.

Let's start creating github workflow file

mkdir .github/workflows
cd .github/workflows
touch build_and_push.yml

Now that we created the workflow file we can check inside the structure:

Github action name

name: push_production.yml

On section will contains our configuration about WHEN the pipeline should run:

on: [push, fork, merge, workflow_dispatch]



In our example we can deployed during push on main and manual run:
on:
  push:
    branches: [ "main" ]
  workflow_dispatch:
    inputs: # Here we can put different inputs based on what user want to do on manual action



Now we can consider job section so WHAT will be done in our workflow:



We will use different action in that specific order:

actions/checkout@v4: checkout repository code into workspace
actions/setup-node@v4: setup node dependency to build up our code


And then we will build and push to our server. In this easy version we are deploying via ssh using git command line

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci
      - name: Build Eleventy
        run: npm run build
        env:
          ELEVENTY_ENV: production

      - name: Prepare SSH key and known_hosts
        env:
          SSH_KEY: $
        shell: bash
        run: |
          mkdir -p ~/.ssh
          echo "$SSH_KEY" > ~/.ssh/id_deploy
          chmod 600 ~/.ssh/id_deploy
          ssh-keyscan -p "$" "$" >> ~/.ssh/known_hosts

      - name: Ensure remote directory
        run: |
          ssh -i ~/.ssh/id_deploy -p "$" \
            "$@$" \
            "mkdir -p '$'"

      - name: Deploy via rsync over SSH
        run: |
          rsync -az --delete \
            -e "ssh -i ~/.ssh/id_deploy -p $" \
            _site/ "$@$:$/"