Skip to content

italia/design-italia-gatsby-starterkit

Repository files navigation

Gatsby Gatsby

Gatsby's Bootstrap Italia starter

Inizia il tuo progetto con questo progetto di base. Questo progetto starter contiene la configurazione Gatsby essenziale per iniziare a costruire il sito usando questo generatore per React.

🚀 Quick start

  1. Crea un sito Gatsby.

    Usa la Gatsby CLI per creare un nuovo sito, specificando questo starter.

    # crea un nuovo sito Gatsby usando questo starter
    gatsby new my-new-website https://github.com/italia/design-italia-gatsby-starterkit
  2. Inizia a sviluppare.

    Naviga nella cartella del tuo nuovo sito e avvialo.

    cd my-new-website/
    gatsby develop
  3. Inizia ad adattare il source code!

    Il tuo nuovo sito è ora disponibile presso http://localhost:8000!

    Note: Hai anche un URL secondario: http://localhost:8000/___graphql. Questo è uno strumento che puoi usare per sperimentare per fare query ai tuoi dati. Se vuoi saperne di più su questo sturmento nella pagina Gatsby tutorial.

    Apri la cartella my-new-website nel tuo editor e inizia a modificare il file src/pages/index.js. Salva le tue modifiche ed il browser si aggiornerà in automatico!

🧐 Cosa c'è dentro?

Una rapida panoramica dei file e cartelle presenti in un progetto Gatsby.

.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md
└── README.en.md
  1. /node_modules: Questa cartella contiene tutti i moduli npm automaticamente installati per far funzionare questo progetto.

  2. /src: In questa cartella sono presenti tutti i file con il codice per la parte front-end del tuo sito.

  3. .gitignore: Questo file istruisce git di cosa ignorare, quindi non tenerne traccia.

  4. .prettierrc: Questo è un file di configurazione per Prettier. Prettier è uno strumento per aiutare a mantenere la formattazione del codice consistente.

  5. gatsby-browser.js: In questo file Gatsby si aspetta di trovare ogni utilizzo della Gatsby browser APIs (se necessario). Con le configurazioni qui presenti si può personalizzare e/o estendere le impostazioni di Gatsby che riguardano il browser.

  6. gatsby-config.js: Questo è file di configurazione principale per il sito. Qui vengono dichiarate le informazioni per il tuo sito (metadata) come il titolo e/o descrizione del sito, quali plugin usare e molto di più. (Dai un'occhiata alla documentazione per questo file per maggiori dettagli).

  7. gatsby-node.js: Questo file è dove Gatsby si aspetta di trovare ogni utilizzo della Gatsby Node APIs (se necessario). Con le configurazioni qui presenti si può personalizzare e/o estendere le impostazioni di Gatsby che riguardano il processo di build.

  8. gatsby-ssr.js: Questo file è dove Gatsby si aspetta di trovare ogni utilizzo della Gatsby server-side rendering APIs (se necessario). Con le configurazioni qui presenti si può personalizzare e/o estendere le impostazioni di Gatsby che riguardano il processo di server side rendering.

  9. LICENSE: Gatsby ha una licenza MIT.

  10. package-lock.json (Vedi package.json sotto, prima). Questo file viene automaticamente generato con le esatte versioni delle dipendenze npm installate con questo progetto. (Non cambierai questo file direttamente).

  11. package.json: Il file di configurazione principale per i progetti Node.js, che include cose come i metdati (nome del progetto, autore, etc...). Questo file è come npm sa quali moduli/pacchetti installare nel progetto.

  12. README.md: Un file di testo contenente informazioni riguardo il progetto (questo file).

  13. README.en.md: Un file di testo contenente informazioni riguardo il progetto (in inglese).

🎓 Imparare Gatsby

Cerchi più informazioni su Gatsby? La documentazione di Gatsby è disponibile sul sito. Questi sono alcune risorse per iniziare:

🎓 Imparare Bootstrap Italia

Cerchi più informazioni su Bootstrap Italia e sul kit React? La documentazione per il "Design React Kit" è disponibile sul sito. Il Design kit offre un catalogo Storybook con un'ampia documentazione a questo indirizzo.

Le pagine già implementate in questo starter sono basate sui template disponibili su questa pagina.

💫 Deploy

Vuoi una rapida anteprima di questo progetto? Cliccando sul pulsante qui sotto verrà fatto un deployment sulla piattaforma Netlify.

Deploy to Netlify