🧱 Come ho creato un blog tecnico con React e MDX: leggero, veloce e automatizzato con Jenkins

Quando ho deciso di creare il mio sito personale, avevo due esigenze principali: scrivere contenuti in modo semplice e avere un sistema leggero, senza la complessità e i consumi di un CMS come WordPress.

Dopo diverse valutazioni, ho scelto di costruirlo con React e di usare file MDX come sorgente per i post. In questo articolo ti racconto come ho strutturato il progetto, le tecnologie scelte e come ho automatizzato il deploy con Jenkins.

⚡ Perché non WordPress?

WordPress è uno standard per tanti, ma ha diversi limiti che volevo evitare:

• ⚠️ Richiede PHP, MySQL, un webserver completo.
• 🐌 Più pesante in termini di risorse (RAM, CPU, storage).
• 🔧 Aggiornamenti, plugin e sicurezza richiedono manutenzione costante.

Con la mia soluzione:

✅ Nessun database, nessun runtime PHP, solo file statici serviti via Nginx o CDN.

Il risultato? Consumo minimo, nessun tempo di attesa per generare le pagine, e massimo controllo sul codice.

🛠️ Tech stack: React + MDX + Tailwind

La combinazione di questi strumenti mi permette di scrivere in Markdown (con componenti React integrabili) e mantenere uno stile coerente grazie a Tailwind.

Struttura base del progetto:

src/
├── components/
│   └── BlogLayout.tsx
├── content/
│   └── posts/
│       ├── primo-post.mdx
│       └── secondo-post.mdx
├── pages/
│   └── [slug].tsx
└── lib/
    └── mdx.ts

🤖 Automazione con Jenkins

Per evitare deploy manuali e rendere tutto più fluido, ho configurato una pipeline Jenkins che si occupa automaticamente di:

1. Clonare il repository dal mio server Git (self-hosted con Gitea).
2. Installare le dipendenze (npm ci).
3. Eseguire il build del sito (npm run build).
4. Copiare i file dist/ sul server di produzione con rsync.
5. Inviare una notifica di completamento via email o Telegram (opzionale).

Esempio di Jenkinsfile:

pipeline {
  agent any

  stages {
    stage('Checkout') {
      steps {
        git branch: 'main', url: '[email protected]:alessandro/blog.git'
      }
    }

    stage('Install & Build') {
      steps {
        sh 'npm ci'
        sh 'npm run build'
      }
    }

    stage('Deploy') {
      steps {
        sh '''
          rsync -avz dist/ user@myserver:/var/www/blog
        '''
      }
    }
  }

  post {
    success {
      echo 'Deploy completato con successo 🎉'
    }
    failure {
      echo 'Errore durante il deploy ❌'
    }
  }
}

La pipeline può essere eseguita:

• manualmente da Jenkins
• automaticamente via webhook Git a ogni push su main

Automatizzare il deploy mi fa risparmiare tempo e riduce il rischio di errori manuali. Inoltre, ogni aggiornamento è tracciato nel sistema di CI.

✍️ Scrivere in MDX

MDX mi consente di scrivere articoli in modo semplice ma anche dinamico. Posso usare Markdown per i contenuti, e inserire blocchi React dove serve — ad esempio per:

• Embed interattivi
• Alert personalizzati
• Snippet di codice con live preview

Uso anche plugin come:

• remark-gfm per supportare tabelle e checkbox
• rehype-slug per ID automatici ai titoli
• rehype-autolink-headings per ancore navigabili