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.
-
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
-
Inizia a sviluppare.
Naviga nella cartella del tuo nuovo sito e avvialo.
cd my-new-website/ gatsby develop
-
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 filesrc/pages/index.js
. Salva le tue modifiche ed il browser si aggiornerà in automatico!
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
-
/node_modules
: Questa cartella contiene tutti i moduli npm automaticamente installati per far funzionare questo progetto. -
/src
: In questa cartella sono presenti tutti i file con il codice per la parte front-end del tuo sito. -
.gitignore
: Questo file istruiscegit
di cosa ignorare, quindi non tenerne traccia. -
.prettierrc
: Questo è un file di configurazione per Prettier. Prettier è uno strumento per aiutare a mantenere la formattazione del codice consistente. -
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. -
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). -
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. -
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. -
LICENSE
: Gatsby ha una licenza MIT. -
package-lock.json
(Vedipackage.json
sotto, prima). Questo file viene automaticamente generato con le esatte versioni delle dipendenze npm installate con questo progetto. (Non cambierai questo file direttamente). -
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. -
README.md
: Un file di testo contenente informazioni riguardo il progetto (questo file). -
README.en.md
: Un file di testo contenente informazioni riguardo il progetto (in inglese).
Cerchi più informazioni su Gatsby? La documentazione di Gatsby è disponibile sul sito. Questi sono alcune risorse per iniziare:
- Per molti sviluppatori risulta molto utile seguire il tutorial completo su Gatsby.
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.
Vuoi una rapida anteprima di questo progetto? Cliccando sul pulsante qui sotto verrà fatto un deployment sulla piattaforma Netlify.