"🛠️ Lo stack a costo zero: Next.js, Vercel e GitHub"

#🛠️ Lo stack a costo zero: Next.js, Vercel e GitHub

Questa tripletta è una potente combinazione per costruire e implementare una presenza web professionale a costi minimi o nulli. Sfrutta una tecnologia di livello mondiale per garantire che il tuo sito sia veloce, sicuro e facile da mantenere.

| Componente | Ruolo | Costo | Perché è la scelta migliore | | :--- | :--- | :--- | :--- | | Next.js | Il Quadro (Il codice) | Gratuito (Open Source) | Prestazioni elevate, SEO eccellente e facile ottimizzazione delle immagini. Mantenuto da Vercel. | | Vercel | L'Host (Il server) | Gratis (Piano Hobby) | Distribuzione a configurazione zero per Next.js, CDN globale per velocità e SSL automatico. | | GitHub | La Fonte (Lo stoccaggio) | Gratuito (Repo pubblici/privati) | Memorizza in modo sicuro il tuo codice e attiva automaticamente le distribuzioni su Vercel a ogni modifica. |

#🚀 Passaggio 1: imposta il tuo progetto su GitHub (gratuito)

Il codice del tuo sito web ha bisogno di una casa, e quella è GitHub. Questa piattaforma archivia in modo sicuro il tuo codice e gestisce la cronologia delle versioni del tuo progetto.

• Crea un account GitHub: Se non ne hai uno, registrati.
• Inizia il tuo progetto: Hai due opzioni principali:
  • Opzione A (consigliata per gli artisti): utilizza un modello. Cerca "modello portfolio Next.js GitHub" (o "modello Vercel"). Molti sviluppatori di talento offrono basi di codice bellissime e gratuite. Basta "Fork" o "Utilizza questo modello" per creare una copia nel tuo repository. Ciò ti fa risparmiare settimane di codifica.
  • Opzione B (per sviluppatori): inizia da zero. Esegui npx create-next-app@latest localmente e segui le istruzioni. Quindi, esegui il push del codice locale in un nuovo repository GitHub vuoto.
• Clona localmente: utilizza il tuo metodo preferito (VS Code, Git CLI) per scaricare il repository sul tuo computer.

Passaggio successivo: il tuo codice è ora archiviato in modo sicuro e controllato dalla versione.

#💻 Passaggio 2: crea e personalizza con Next.js (gratuito)

Qui è dove dai vita al tuo portafoglio. Next.js è un framework React che semplifica la creazione di siti Web veloci e moderni.

#Personalizza il contenuto:

Apri il progetto nel tuo editor di codice. Modificherai principalmente i file per:

• Aggiungi il tuo testo nella pagina Informazioni (/pages/about.js o /app/about/page.js).
• Sostituisci le immagini segnaposto con la tua opera d'arte (spesso nella cartella /public).
• Regola i collegamenti di navigazione.

#Aggiungi la tua opera d'arte (la chiave):

1. Organizza i tuoi pezzi migliori in cartelle.
2. Utilizza il componente Next.js <Image>. Questo è fondamentale! Ottimizza automaticamente i tuoi file artistici di grandi dimensioni, ridimensionandoli e offrendoli in formati moderni (come WebP) in modo che il tuo sito si carichi velocemente su qualsiasi dispositivo.

#Controllo della versione:

• Conferma le tue modifiche: Una volta apportate le tue personalizzazioni, conferma le modifiche con un messaggio significativo (ad esempio, git commit -m "Aggiunto i miei primi cinque pezzi d'arte").
• Push to GitHub: carica nuovamente le modifiche nel repository GitHub (git push origin main).

Passaggio successivo: il codice finale è pronto per la distribuzione.

#☁️ Passaggio 3: distribuzione con Vercel (hosting gratuito)

Vercel è il creatore di Next.js, quindi il loro hosting è perfettamente ottimizzato. Il loro Piano Hobby è gratuito per sempre e include tutto ciò di cui un portafoglio ha bisogno.

1. Iscriviti a Vercel: vai su Vercel e registrati utilizzando il tuo account GitHub. Questa è la chiave per la connessione gratuita e automatizzata.
2. Importa il tuo progetto:
   • Nel dashboard Vercel, fai clic su "Aggiungi nuovo" > "Progetto."
   • Seleziona il tuo repository GitHub dall'elenco.
   • Vercel rileverà automaticamente che si tratta di un progetto Next.js. In genere è sufficiente fare clic su "Distribuisci".
3. Il tuo URL gratuito è attivo! Vercel distribuisce immediatamente il tuo sito a un URL gratuito (ad esempio, "sito-artista.vercel.app").
4. Aggiornamenti automatici: D'ora in poi, ogni volta che invii un nuovo codice al tuo ramo principale su GitHub, Vercel ricostruirà e distribuirà automaticamente il tuo sito in pochi minuti. Questa è la magia della distribuzione continua (CI/CD).

Passaggio successivo: Il tuo portafoglio è ora disponibile su Internet, gratuito al 100%.

---## 🌐 Passaggio 4: acquista e collega il tuo dominio personalizzato (l'unico costo)

Il passaggio finale è connettere il tuo nome di dominio professionale, come "https://www.tuonome.com". Questa è l'unica parte che costa denaro (in genere $ 10– $ 20 all'anno).

1. Acquista il tuo dominio: acquista il tuo nome di dominio da qualsiasi registrar (Namecheap, GoDaddy, Google Domains o anche direttamente tramite Vercel).
2. Connettiti a Vercel:
   • Nelle impostazioni del tuo progetto Vercel, vai a "Domini".
   • Inserisci il nome del dominio acquistato.
   • Vercel ti fornirà una semplice serie di istruzioni (solitamente un record A o CNAME) da aggiungere alle impostazioni DNS del registrar del tuo dominio.
3. Attendi e conferma: dopo aver aggiornato le impostazioni DNS, Vercel verificherà la connessione del dominio, spesso in meno di un'ora.

#🎉 Congratulazioni!

Il tuo portfolio di artisti professionisti è ora attivo sul tuo dominio personalizzato, in esecuzione su un'infrastruttura di livello mondiale a un costo minimo. Hai il pieno controllo sul codice, sugli aggiornamenti automatici e su un sito velocissimo per mostrare il tuo lavoro, il tutto al solo prezzo del tuo dominio.