Claude Code genera
il sito, tu lo pubblichi
Claude Code è l'agente di coding di Anthropic che lavora direttamente nella tua directory locale — legge file, scrive codice, esegue comandi. Combinato con Git e GitHub Pages diventa una pipeline completa: descrivi il sito che vuoi, Claude Code lo costruisce, tu lo metti online con un push.
Con l'upload manuale ogni modifica richiede di riscaricare, modificare e ricaricare i file. Con Claude Code + Git le modifiche avvengono localmente in pochi secondi e un git push aggiorna il sito in automatico — il flusso professionale standard.
Cosa impari in questa guida
- 1Setup di Claude Code in localeInstallazione, autenticazione, prima sessione nel terminale.
- 2Generare un sito completo con promptClaude Code scrive HTML, CSS e JS in base alle tue istruzioni.
- 3Collegare la directory a GitHubGit init, remote, primo commit e push.
- 4Abilitare GitHub Pages e aggiornareIl ciclo edit-commit-push che aggiorna il sito live.
Installare e
configurare Claude Code
Claude Code richiede Node.js 18+ e un account Anthropic (Claude Pro o Max). L'installazione richiede circa 5 minuti.
# Verifica Node.js (deve essere 18+) node --version # Installa Claude Code npm install -g @anthropic-ai/claude-code # Primo avvio — autenticazione via browser claude
# Configura identità Git git config --global user.name "Marco Consiglio" git config --global user.email "marco@esempio.it" git config --global init.defaultBranch main
Per autenticarti con GitHub da terminale: GitHub → Settings → Developer settings → Personal access tokens → Tokens classic → scope "repo". Usa il token come password al primo push.
Generare il sito
con Claude Code
Con Claude Code attivo nella tua directory, descrivi in linguaggio naturale il sito che vuoi — Claude genera tutti i file necessari direttamente in locale.
Crea un sito portfolio professionale con: - index.html come file principale - Hero con nome e ruolo - Sezione "Chi sono" con bio breve - 3 card servizi (Formazione, Consulenza, Workshop) - Sezione contatti con form HTML statico - CSS incluso nel file, design responsive - Palette bianco panna e blu scuro
Caricare su GitHub
con git push
Con i file generati, colleghi la cartella a GitHub e carichi tutto con tre comandi.
# Crea prima il repo su github.com (pubblico, senza README) # Poi esegui questi comandi nella cartella del progetto: git init git remote add origin https://github.com/TUOUSERNAME/NOMEREPO.git git add . git commit -m "Sito iniziale generato con Claude Code" git push -u origin main
Se Claude Code ha generato cartelle con underscore, aggiungi subito un file vuoto: touch .nojekyll poi includilo nel commit. Questo evita conflitti con Jekyll, il processore di default di GitHub Pages.
Attivare Pages
dopo il push
Dominio personalizzato
via file CNAME
# Crea il file CNAME con il dominio desiderato echo "www.miodominio.it" > CNAME git add CNAME git commit -m "Aggiungi dominio personalizzato" git push # Nel pannello DNS del registrar aggiungi: # A records (x4): 185.199.108-111.153 → @ # CNAME: tuousername.github.io → www
Il file CNAME nel repository garantisce che il dominio personalizzato non vada perso anche se disabiliti e riabiliti Pages — è tracciato nella cronologia Git come qualsiasi altro file.
Il ciclo
edit → commit → push
Ogni aggiornamento al sito segue lo stesso ciclo — e puoi usare Claude Code per le modifiche.
# Apri Claude Code nella cartella del progetto claude # → "Aggiungi una sezione con 3 articoli recenti" # Verifica in locale aprendo index.html nel browser # Pubblica la modifica git add . git commit -m "Aggiunta sezione articoli" git push # Sito aggiornato entro 1-3 minuti
Deploy automatico
con GitHub Actions
name: Deploy su GitHub Pages
on:
push:
branches: [main]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/configure-pages@v4
- uses: actions/upload-pages-artifact@v3
with:
path: '.'
- id: deployment
uses: actions/deploy-pages@v4In Settings → Pages → Source seleziona "GitHub Actions" PRIMA di fare il push del file workflow — altrimenti il workflow non si attiva.
Dal prompt
al sito live
- Crea la cartella mio-portfolio, entra dentro e lancia claude.
- Prompt: "Crea un sito portfolio per un formatore AI. Hero, about, 3 servizi, contatti. Un solo index.html con CSS incluso."
- Approva le azioni, visualizza index.html nel browser.
- Chiedi una modifica: "Aggiungi un badge Novità alla prima card."
- git init + remote + add + commit + push al repo GitHub.
- Abilita Pages in Settings e verifica il sito live.
- Modifica 1 con Claude Code: "Aggiungi sezione testimonianze con 2 citazioni." → commit + push.
- Modifica 2: "Cambia colore pulsante CTA in verde." → commit + push.
- Modifica 3: "Aggiungi footer con copyright 2026." → commit + push.
- Vai nel tab Actions su GitHub — verifica che ogni push abbia generato un deploy verde.
- Controlla il sito live: tutte e 3 le modifiche sono presenti?