type: tutorial

unitTitle: 'Benvenuto, mondo!'

title: Crea il tuo primo Blog Astro

sidebar:

label: 'Tutorial: Crea un blog'

description: >-

i18nReady: true

import Checklist from '~/components/Checklist.astro';

import Box from '~/components/tutorial/Box.astro';

import Lede from '~/components/tutorial/Lede.astro';

<Lede> In questo tutorial, imparerai le funzionalità chiave di Astro costruendo un blog completamente funzionante, da zero al lancio completo! 🚀 </Lede>

Lungo il percorso, farai:

- Configurare il tuo ambiente di sviluppo

- Creare pagine e articoli del blog per il tuo sito web

- Costruire con componenti Astro

- Interrogare e lavorare con file locali

- Aggiungere interattività al tuo sito

- Distribuire il tuo sito sul web

Vuoi un'anteprima di ciò che costruirai? Puoi visualizzare il progetto finale su [GitHub](https://github.com/withastro/blog-tutorial-demo) o aprire una versione funzionante in un ambiente di codifica online come [IDX](https://idx.google.com/import?url=https:%2F%2Fgithub.com%2Fwithastro%2Fblog-tutorial-demo%2F) o [StackBlitz](https://stackblitz.com/github/withastro/blog-tutorial-demo/tree/complete?file=src%2Fpages%2Findex.astro).

:::note

Se preferisci iniziare a esplorare Astro con un sito Astro pre-costruito, puoi visitare https://astro.new e scegliere un modello di partenza da aprire e modificare in un editor online.

:::

<Box icon="check-list">

<Checklist>

- [ ] Sembra fantastico! Sono pronto per iniziare!

</Checklist>

</Box>

type: tutorial

title: Prepara il tuo ambiente di sviluppo

description: |-

i18nReady: true

import Checklist from '~/components/Checklist.astro';

import Box from '~/components/tutorial/Box.astro';

import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';

import Option from '~/components/tutorial/Option.astro';

import PreCheck from '~/components/tutorial/PreCheck.astro';

import { Steps } from '@astrojs/starlight/components';

import Badge from "~/components/Badge.astro"

<PreCheck>

- Installa tutti gli strumenti che utilizzerai per costruire il tuo sito web Astro

</PreCheck>

Utilizzerai una **riga di comando (terminale)** per creare il tuo progetto Astro e per eseguire comandi chiave per costruire, sviluppare e testare il tuo sito.

Puoi accedere alla riga di comando tramite un programma terminale locale per il tuo sistema operativo. Applicazioni comuni includono **Terminale** (MacOS/Linux), **Prompt dei comandi** (Windows) e **Termux** (Android). Uno di questi sarà probabilmente già presente sulla tua macchina.

Affinché Astro funzioni sul tuo sistema, dovrai anche avere [**Node.js**](https://nodejs.org/en/) installato, versione `v18.17.1` o `v20.3.0` o successive. (`v19` non è supportata.)

Per verificare se hai già installato una versione compatibile, esegui il comando seguente nel tuo terminale:

node -v

// Esempio di output

v18.17.1

Se il comando restituisce un numero di versione superiore a `v18.17.1` o `v20.3.0` (escludendo qualsiasi `v19`), sei a posto!

Se il comando restituisce un messaggio di errore come `Comando 'node' non trovato`, o un numero di versione inferiore a quello richiesto, allora devi [installare una versione compatibile di Node.js](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm).

Inoltre, dovrai scaricare e installare un **editor di codice** per scrivere il tuo codice.

:::tip[Useremo...]

Questo tutorial utilizzerà **VS Code**, ma puoi usare qualsiasi editor per il tuo sistema operativo.

:::

<Steps>

1. [Scarica e installa VS Code](https://code.visualstudio.com/#alt-downloads) o un altro editor di codice di tua scelta.

</Steps>

<Box icon="question-mark">

Quale dei seguenti è...

1. Un editor di codice, per apportare modifiche ai tuoi file e al loro contenuto?

<MultipleChoice>

<Option>

browser web

</Option>

<Option>

Terminale

</Option>

<Option isCorrect>

VS Code

</Option>

</MultipleChoice>

2. Un provider di controllo di versione online per il tuo repository?

<MultipleChoice>

<Option isCorrect>

GitHub

</Option>

<Option>

Terminale

</Option>

<Option>

VS Code

</Option>

</MultipleChoice>

3. Un'applicazione per eseguire comandi?

<MultipleChoice>

<Option>

GitHub

</Option>

<Option isCorrect>

Terminale

</Option>

<Option>

browser web

</Option>

</MultipleChoice>

</Box>

<Box icon="check-list">

<Checklist>

- [ ] Posso accedere alla riga di comando in un terminale.

- [ ] Ho Node.js installato.

- [ ] Ho un editor di codice come VS Code.

</Checklist>

</Box>

- <p>[FreeCodeCamp.org](https://freecodecamp.org) <Badge class="neutral-badge" text="external" /> — un sito educativo gratuito con corsi completi o rapidi ripassi in HTML, CSS, JS e altro.</p>

type: tutorial

title: Crea il tuo primo progetto Astro

description: |-

i18nReady: true

import Checklist from '~/components/Checklist.astro';

import Box from '~/components/tutorial/Box.astro';

import InstallGuideTabGroup from '~/components/TabGroup/InstallGuideTabGroup.astro';

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';

import PreCheck from '~/components/tutorial/PreCheck.astro';

import { Steps } from '@astrojs/starlight/components';

import Badge from "~/components/Badge.astro"

<PreCheck>

- Esegui la procedura guidata `create astro` per creare un nuovo progetto Astro

- Avvia il server Astro in modalità di sviluppo (dev)

- Visualizza un'anteprima live del tuo sito web nel tuo browser

</PreCheck>

Il modo preferito per creare un nuovo sito Astro è attraverso la nostra procedura guidata di installazione `create astro`.

<Steps>

1. Nella riga di comando del tuo terminale, esegui il comando seguente utilizzando il tuo package manager preferito:

<PackageManagerTabs>

<Fragment slot="npm">

```shell

# crea un nuovo progetto con npm

npm create astro@latest

```

</Fragment>

<Fragment slot="pnpm">

```shell

# crea un nuovo progetto con pnpm

pnpm create astro@latest

```

</Fragment>

<Fragment slot="yarn">

```shell

# crea un nuovo progetto con yarn

yarn create astro

```

</Fragment>

</PackageManagerTabs>

2. Digita `y` per installare `create-astro`.

3. Quando il prompt ti chiede dove creare il progetto, digita il nome di una cartella per creare una nuova directory per il tuo progetto, es.

:::note

Un nuovo progetto Astro può essere creato solo in una cartella completamente vuota, quindi scegli un nome per la tua cartella che non esista già!

:::

4. Vedrai un breve elenco di modelli di base tra cui scegliere. Usa i tasti freccia (su e giù) per navigare fino al template minimale (vuoto), quindi premi Invio (Enter) per inviare la tua scelta.

5. Quando il prompt ti chiede se installare o meno le dipendenze, digita `y`.

6. Quando il prompt ti chiede se inizializzare o meno un nuovo repository git, digita `y`.

</Steps>

Quando la procedura guidata di installazione è completa, non hai più bisogno di questo terminale. Ora puoi aprire VS Code per continuare.

<Steps>

7. Apri VS Code. Ti verrà richiesto di aprire una cartella. Scegli la cartella che hai creato durante la procedura guidata di installazione.

8. Se è la prima volta che apri un progetto Astro, dovresti vedere una notifica che ti chiede se desideri installare le estensioni raccomandate. Clicca per vedere le estensioni raccomandate e scegli l'[estensione di supporto linguistico Astro](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode). Questo fornirà evidenziazione della sintassi e completamenti automatici per il tuo codice Astro.

9. Assicurati che il terminale sia visibile e di poter vedere il prompt dei comandi, come ad esempio:

```sh

user@machine:~/tutorial$

```

:::tip[Scorciatoia da tastiera]

Per attivare/disattivare la visibilità del terminale, usa <kbd>Ctrl + J</kbd> (macOS: <kbd>Cmd ⌘ + J</kbd>).

:::

</Steps>

Ora puoi usare il terminale integrato in questa finestra, invece dell'app Terminale del tuo computer, per il resto di questo tutorial.

Per visualizzare in anteprima i file del tuo progetto _come un sito web_ mentre lavori, avrai bisogno che Astro sia in esecuzione in modalità di sviluppo (dev).

<Steps>

10. Esegui il comando per avviare il server dev di Astro digitando nel terminale di VS Code:

<PackageManagerTabs>

<Fragment slot="npm">

```shell

npm run dev

```

</Fragment>

<Fragment slot="pnpm">

```shell

pnpm run dev

```

</Fragment>

<Fragment slot="yarn">

```shell

yarn run dev

```

</Fragment>

</PackageManagerTabs>

Ora dovresti vedere la conferma nel terminale che Astro è in esecuzione in modalità dev. 🚀

</Steps>

I file del tuo progetto contengono tutto il codice necessario per visualizzare un sito web Astro, ma il browser è responsabile della visualizzazione del tuo codice come pagine web.

<Steps>

11. Clicca sul link `localhost` nella finestra del tuo terminale per vedere un'anteprima live del tuo nuovo sito web Astro!

(Astro utilizza `http://localhost:4321` di default se la porta `4321` è disponibile.)

Ecco come dovrebbe apparire il sito web starter "Progetto Vuoto" di Astro nell'anteprima del browser:


</Steps>

:::tip[Utilizzo del server dev di Astro]

Mentre il server Astro è in esecuzione in modalità dev, NON sarai in grado di eseguire comandi nella finestra del terminale. Invece, questo pannello ti darà un feedback mentre visualizzi l'anteprima del tuo sito.

Puoi interrompere il server dev in qualsiasi momento e tornare al prompt dei comandi digitando <kbd>Ctrl + C</kbd> nel terminale.

A volte il server dev si interrompe da solo mentre stai lavorando. Se la tua anteprima live smette di funzionare, torna al terminale e riavvia il server dev digitando `npm run dev`.

:::

<Box icon="check-list">

<Checklist>

- [ ] Posso creare un nuovo progetto Astro.

- [ ] Posso avviare il server dev di Astro.

</Checklist>

</Box>

- <p>[Introduzione a Visual Studio Code](https://code.visualstudio.com/docs/introvideos/basics) <Badge class="neutral-badge" text="external" /> — un video tutorial per installare, configurare e lavorare con VS Code</p>