Salta ai contenuti

Scrivi il tuo primo articolo del blog in Markdown

Ora che hai creato pagine utilizzando file .astro, è il momento di creare alcuni articoli del blog utilizzando file .md!

Preparati a…

  • Crea una nuova cartella e crea un nuovo articolo
  • Scrivi un po’ di contenuto Markdown
  • Collega i tuoi articoli del blog sulla tua pagina Blog

Crea il tuo primo file .md

Sezione intitolata Crea il tuo primo file .md

  1. Crea una nuova directory in src/pages/posts/.

  2. Aggiungi un nuovo file (vuoto) post-1.md all’interno della tua nuova cartella /posts/.

  3. Cerca questa pagina nell’anteprima del tuo browser aggiungendo /posts/post-1 alla fine del tuo URL di anteprima esistente. (es. http://localhost:4321/posts/post-1)

  4. Cambia l’URL di anteprima del browser per visualizzare invece /posts/post-2. (Questa è una pagina che non hai ancora creato.)

    Nota l’output diverso quando visualizzi in anteprima una pagina “vuota” e una che non esiste. Questo ti aiuterà a risolvere i problemi in futuro.

Scrivi contenuto Markdown

Sezione intitolata Scrivi contenuto Markdown

  1. Copia o digita il seguente codice in post-1.md

    src/pages/posts/post-1.md
    ---
    title: 'Il mio primo articolo del blog'
    pubDate: 2022-07-01
    description: 'Questo è il primo articolo del mio nuovo blog Astro.'
    author: 'Studente Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp'
        alt: 'Il logo di Astro su uno sfondo scuro con un bagliore rosa.'
    tags: ["astro", "blogging", "imparare in pubblico"]
    ---
    # Il mio primo articolo del blog
    

    Pubblicato il: 2022-07-01
    

    Benvenuto nel mio _nuovo blog_ sull'apprendimento di Astro! Qui, condividerò il mio percorso di apprendimento mentre costruisco un nuovo sito web.
    

    ## Cosa ho realizzato
    

    1. **Installazione di Astro**: Per prima cosa, ho creato un nuovo progetto Astro e configurato i miei account online.
    

    2. **Creazione di pagine**: Poi ho imparato come creare pagine creando nuovi file `.astro` e posizionandoli nella cartella `src/pages/`.
    

    3. **Creazione di articoli del blog**: Questo è il mio primo articolo del blog! Ora ho pagine Astro e articoli Markdown!
    

    ## Cosa c'è dopo
    

    Finirò il tutorial di Astro, e poi continuerò ad aggiungere altri articoli. Tieni d'occhio questo spazio per saperne di più.

  2. Controlla di nuovo l’anteprima del tuo browser su http://localhost:4321/posts/post-1. Ora dovresti vedere del contenuto su questa pagina. Potrebbe non essere ancora formattato correttamente, ma non preoccuparti, lo aggiornerai più avanti nel tutorial!

  3. Usa gli Strumenti per sviluppatori del tuo browser per ispezionare questa pagina. Nota che anche se non hai digitato alcun elemento HTML, il tuo Markdown è stato convertito in HTML. Puoi vedere elementi come intestazioni, paragrafi e voci di elenco.

Collega i tuoi articoli

Sezione intitolata Collega i tuoi articoli

  1. Collega il tuo primo articolo con un tag di ancoraggio in src/pages/blog.astro:

    src/pages/blog.astro
    ---
    ---
    <html lang="it">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">Su di me</a>
        <a href="/blog/">Blog</a>
    

        <h1>Il mio Blog di apprendimento di Astro</h1>
        <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Articolo 1</a></li>
        </ul>
      </body>
    </html>

  2. Ora, aggiungi altri due file in src/pages/posts/: post-2.md e post-3.md. Ecco del codice di esempio che puoi copiare e incollare nei tuoi file, oppure puoi creare il tuo!

    src/pages/posts/post-2.md
    ---
    title: Il mio secondo articolo del blog
    author: Studente Astro
    description: "Dopo aver imparato un po' di Astro, non riuscivo a smettere!"
    image:
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Il logo di Astro su uno sfondo scuro con un arco sfumato viola."
    pubDate: 2022-07-08
    tags: ["astro", "blogging", "imparare in pubblico", "successi"]
    ---
    Dopo una prima settimana di successo imparando Astro, ho deciso di provarne un po' di più. Ho scritto e importato un piccolo componente a memoria!
    src/pages/posts/post-3.md
    ---
    title: Il mio terzo articolo del blog
    author: Studente Astro
    description: "Ho avuto alcune difficoltà, ma chiedere nella community ha davvero aiutato!"
    image:
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "Il logo di Astro su uno sfondo scuro con raggi arcobaleno."
    pubDate: 2022-07-15
    tags: ["astro", "imparare in pubblico", "battute d'arresto", "community"]
    ---
    Non è stato sempre tutto liscio, ma mi sto divertendo a costruire con Astro. E, la [community Discord](https://astro.build/chat) è davvero amichevole e disponibile!

  3. Aggiungi link a questi nuovi articoli:

    src/pages/blog.astro
    ---
    ---
    <html lang="it">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Home</a>
        <a href="/about/">Su di me</a>
        <a href="/blog/">Blog</a>
    

        <h1>Il mio Blog di apprendimento di Astro</h1>
        <p>Questo è dove pubblicherò sul mio percorso di apprendimento di Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Articolo 1</a></li>
          <li><a href="/posts/post-2/">Articolo 2</a></li>
          <li><a href="/posts/post-3/">Articolo 3</a></li>
        </ul>
      </body>
    </html>

  4. Controlla l’anteprima del tuo browser e assicurati che:

    Tutti i tuoi link per Articolo 1, Articolo 2 e Articolo 3 portano a una pagina funzionante sul tuo sito. (Se trovi un errore, controlla i tuoi link su blog.astro o i nomi dei tuoi file Markdown.)

Metti alla prova le tue conoscenze

Sezione intitolata Metti alla prova le tue conoscenze
  1. Il contenuto in un file Markdown (.md) viene convertito in:

Checklist

Sezione intitolata Checklist

Risorse

Sezione intitolata Risorse
Contribuisci Comunità Sponsor