Salta ai contenuti

Crea la tua prima pagina Astro

Ora che sai che i file .astro sono responsabili delle pagine sul tuo sito web, è il momento di crearne uno!

Preparati a…

  • Crea due nuove pagine sul tuo sito web: Su di me e Blog
  • Aggiungi link di navigazione alle tue pagine
  • Distribuisci una versione aggiornata del tuo sito web sul web

Crea un nuovo file .astro

Sezione intitolata Crea un nuovo file .astro

  1. Nel pannello dei file del tuo editor di codice, naviga fino alla cartella src/pages/ dove vedrai il file esistente index.astro

  2. Nella stessa cartella, crea un nuovo file chiamato about.astro.

  3. Copia o ridigita il contenuto di index.astro nel tuo nuovo file about.astro.

  4. Aggiungi /about alla fine dell’URL di anteprima del tuo sito web nella barra degli indirizzi e verifica di poter vedere una pagina caricarsi lì. (es. http://localhost:4321/about)

In questo momento, la tua pagina “Su di me” dovrebbe apparire esattamente come la prima pagina, ma stiamo per cambiarlo!

Modifica la tua pagina

Sezione intitolata Modifica la tua pagina

Modifica il contenuto HTML per rendere questa pagina su di te.

Per cambiare o aggiungere più contenuto alla tua pagina Su di me, aggiungi più tag di elementi HTML contenenti contenuto. Puoi copiare e incollare il codice HTML qui sotto tra i tag <body></body> esistenti, o creare il tuo.

src/pages/about.astro
<body>
  <h1>Il mio sito Astro</h1>
  <h1>Su di me</h1>
  <h2>... e il mio nuovo sito Astro!</h2>


  <p>Sto seguendo il tutorial introduttivo di Astro. Questa è la seconda pagina sul mio sito web, ed è la prima che ho costruito da solo!</p>


  <p>Questo sito si aggiornerà man mano che completerò altre parti del tutorial, quindi continua a controllare e vedi come sta andando il mio percorso!</p>
</body>

Ora, visita di nuovo la tua pagina /about nella scheda del tuo browser, e dovresti vedere il tuo contenuto aggiornato.

Sezione intitolata Aggiungi link di navigazione

Per rendere più facile visualizzare in anteprima tutte le tue pagine, aggiungi link di navigazione di pagina HTML prima del tuo <h1> nella parte superiore di entrambe le tue pagine (index.astro e about.astro):

src/pages/about.astro
<a href="/">Home</a>
<a href="/about/">Su di me</a>


<h1>Su di me</h1>
<h2>... e il mio nuovo sito Astro!</h2>

Verifica di poter cliccare su questi link per spostarti avanti e indietro tra le pagine sul tuo sito.

Prova tu stesso - Aggiungi una pagina Blog

Sezione intitolata Prova tu stesso - Aggiungi una pagina Blog

Aggiungi una terza pagina blog.astro al tuo sito, seguendo gli stessi passaggi di sopra.

(Non dimenticare di aggiungere un terzo link di navigazione a ogni pagina.)

Mostrami i passaggi.
  1. Crea un nuovo file in src/pages/blog.astro.
  2. Copia l’intero contenuto di index.astro e incollalo in blog.astro.
  3. Aggiungi un terzo link di navigazione alla parte superiore di ogni pagina:
src/pages/index.astro
<body>
  <a href="/">Home</a>
  <a href="/about/">Su di me</a>
  <a href="/blog/">Blog</a>


  <h1>Il mio sito Astro</h1>
</body>

Ora dovresti avere un sito web con tre pagine che si collegano tutte tra loro. È il momento di aggiungere un po’ di contenuto alla pagina Blog.

Aggiorna il contenuto della pagina in blog.astro con:

src/pages/blog.astro
<body>
  <a href="/">Home</a>
  <a href="/about/">Su di me</a>
  <a href="/blog/">Blog</a>


  <h1>Il mio sito Astro</h1>
  <h1>Il mio Blog di apprendimento di Astro</h1>
  <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p>
</body>

Visualizza in anteprima l’intero sito visitando tutte e tre le pagine nell’anteprima del tuo browser e verifica che:

  • Ogni pagina si collega correttamente a tutte e tre le pagine
  • Le tue due nuove pagine hanno ciascuna la propria intestazione descrittiva
  • Le tue due nuove pagine hanno ciascuna il proprio testo di paragrafo

Pubblica le tue modifiche sul web

Sezione intitolata Pubblica le tue modifiche sul web

Se hai seguito la nostra configurazione nell’Unità 1, puoi pubblicare le tue modifiche sul tuo sito web live tramite Netlify.

Quando sei soddisfatto di come appare la tua anteprima, esegui il commit delle tue modifiche al tuo repository online su GitHub.

  1. In VS Code, visualizza in anteprima i file che sono cambiati dall’ultimo commit su GitHub.

    • Vai alla scheda Controllo del codice sorgente nel menu a sinistra. Dovrebbe avere un piccolo “3” visualizzato.

    • Dovresti vedere index.astro, about.astro e blog.astro elencati come file che sono cambiati.

  2. Inserisci un messaggio di commit (es. “Aggiunte due nuove pagine - about e blog”) nella casella di testo e premi Ctrl + Enter (macOS: Cmd ⌘ + Enter) per eseguire il commit della modifica al tuo workspace corrente.

  3. Clicca sul pulsante per Sincronizza modifiche su GitHub.

  4. Dopo aver atteso alcuni minuti, visita il tuo URL Netlify per verificare che le tue modifiche siano pubblicate live.

Checklist

Sezione intitolata Checklist

Risorse

Sezione intitolata Risorse
Contribuisci Comunità Sponsor