Deploy Automatico Eleventy con GitHub Actions

Questa è una guida rapida su come configurare GitHub Actions per deployare un sito Eleventy dopo un push. Questo metodo può essere utilizzato in generale per qualsiasi framework frontend che necessita solo di una cartella statica.

In Eleventy puoi configurare una cartella statica che conterrà l'output della build del tuo progetto. Ad esempio, controllando nel file eleventy.js puoi trovare:

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

quindi la tua build sarà in _site/

Ora puoi configurare GitHub Actions per copiare tutti i file dal repository alla directory di build sul server.

Iniziamo creando il file di workflow GitHub

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

Ora che abbiamo creato il file di workflow possiamo analizzare la sua struttura:

Nome dell'action GitHub

name: push_production.yml

La sezione On contiene la configurazione su QUANDO la pipeline deve essere eseguita:

on: [push, fork, merge, workflow_dispatch]



Nel nostro esempio possiamo deployare durante il push su main e con esecuzione manuale:
on:
  push:
    branches: [ "main" ]
  workflow_dispatch:
    inputs: # Qui possiamo inserire diversi input in base a cosa l'utente vuole fare nell'action manuale



Ora consideriamo la sezione job, quindi COSA verrà fatto nel nostro workflow:



Utilizzeremo diverse action in questo ordine specifico:

actions/checkout@v4: checkout del codice del repository nel workspace
actions/setup-node@v4: setup delle dipendenze node per buildare il nostro codice


Poi builderemo e pusheremo sul nostro server. In questa versione semplice stiamo deployando via ssh usando i comandi git

    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/ "$@$:$/"