Blog Editor con OAuth 2.0 per Jekyll

📁 sviluppo web, strumenti ⏱ 4 min di lettura

# Nuovo Editor Web per il Blog

Oggi lancio un nuovo strumento per la gestione di questo blog: un editor web professionale integrato direttamente nel sito, con autenticazione GitHub OAuth 2.0.

## Perché un Editor Web?

Fino ad oggi, per pubblicare un post dovevo:

  1. Aprire l’editor di testo locale
  2. Creare un file .md nella cartella _posts/
  3. Scrivere il front matter YAML manualmente
  4. Fare commit e push su GitHub
  5. Aspettare il deploy automatico

Con il nuovo editor, il processo è molto più semplice:

  1. Login con GitHub (OAuth 2.0)
  2. Click su “+ Nuovo”
  3. Scrivo il post in Markdown con editor WYSIWYG
  4. Click su “🚀 Pubblica”
  5. Fatto! Il commit viene fatto automaticamente

## Architettura Tecnica

L’editor è costruito con un approccio privacy-first e GDPR-compliant:

### Frontend

  • HTML/CSS/JS vanilla (zero framework, massima velocità)
  • SimpleMDE per editing Markdown con preview live
  • Octokit.js per interazione con GitHub API
  • Hosted su GitHub Pages (stesso dominio del blog)

### Backend

  • Vercel Serverless Function per OAuth callback
  • Environment variables sicure per Client Secret
  • CORS limitato a www.novelli.me
  • CSRF protection con state parameter

### Sicurezza

  • ✅ OAuth 2.0 con scope public_repo (solo repository pubblici)
  • ✅ sessionStorage temporaneo (si cancella chiudendo il browser)
  • ✅ Nessun localStorage o cookie persistente
  • ✅ Token scade automaticamente con la sessione
  • ✅ Escluso da robots.txt (non indicizzato dai motori di ricerca)
  • ✅ Hash fragment per passare dati OAuth (non visibili al server)

### Privacy Il sito pubblico resta 100% GDPR-free:

  • Zero tracking dei visitatori
  • Zero cookie per gli utenti pubblici
  • Zero analytics di terze parti
  • L’editor è un’area admin separata, non influisce sulla privacy dei lettori

## Funzionalità

### Gestione Post

  • Lista post esistenti con ricerca in tempo reale
  • Creazione nuovo post con front matter automatico
  • Modifica post esistenti (carica da GitHub)
  • Pubblicazione con commit automatico
  • Front matter parsing (titolo, data, categorie, tags)

### Editor Markdown

  • SimpleMDE con toolbar completa
  • Preview live HTML renderizzato
  • Side-by-side mode (Markdown + Preview affiancati)
  • Fullscreen mode per concentrazione
  • Auto-save bozze ogni 10 secondi
  • Shortcuts tastiera (Cmd+B bold, Cmd+I italic, etc.)

### Workflow Automatico

  1. Scrivo il post nell’editor
  2. Click “Pubblica”
  3. Commit automatico su GitHub
  4. GitHub Actions build Jekyll
  5. Deploy automatico su GitHub Pages
  6. Post online in 1-2 minuti

## Tecnologie Utilizzate

  • Frontend: HTML5, CSS3, Vanilla JavaScript
  • Editor: SimpleMDE
  • GitHub API: Octokit.js
  • OAuth: GitHub OAuth 2.0
  • Serverless: Vercel Functions
  • Hosting: GitHub Pages
  • Blog Engine: Jekyll

## URL Permanente

L’editor è accessibile (solo dopo login) all’indirizzo:

www.novelli.me/blog/editor

## Open Source

L’implementazione è completamente open source e visibile nel repository del sito:

github.com/gnovelli/gnovelli.github.io

Il codice dell’editor si trova in:

  • /blog/editor/ - Frontend (HTML, CSS, JS)
  • /api/auth/callback.js - Serverless function OAuth

### Moduli Principali

github-api.js (310 righe):

  • CRUD completo per post Jekyll
  • Parsing automatico front matter YAML
  • Generazione filename nel formato YYYY-MM-DD-slug.md
  • Gestione commit automatici via GitHub API

editor.js (174 righe):

  • Configurazione SimpleMDE con autosave
  • Preview live con syntax highlighting
  • Shortcuts tastiera personalizzati
  • Side-by-side e fullscreen mode

app.js (360 righe):

  • Gestione OAuth flow completo
  • Caricamento dinamico lista post
  • Validazione form e conferme utente
  • Ricerca post in tempo reale

## Conclusioni

Questo editor rappresenta un equilibrio perfetto tra:

  • Semplicità d’uso (interfaccia web user-friendly)
  • Sicurezza (OAuth 2.0, no credenziali in chiaro)
  • Privacy (area admin separata, sito pubblico GDPR-free)
  • Efficienza (commit automatici, deploy CI/CD)

È uno strumento pensato per me, ma l’architettura può essere facilmente adattata per qualsiasi blog Jekyll hosted su GitHub Pages.

Questo post è stato scritto e pubblicato proprio usando l’editor! 🚀

Copyright © 2025 Giovanni Novelli, Ph.D.