Pular para o conteúdo

Escreva sua primeira postagem Markdown no blog

Agora que você construiu páginas utilizando arquivos .astro, é hora de fazer algumas postagens no blog utilizando arquivos .md!

Get ready to…

  • Fazer uma nova pasta e criar uma nova postagem
  • Escrever algum conteúdo Markdown
  • Fazer links para suas postagens no blog em sua página Blog

Crie seu primeiro arquivo .md

Seção intitulada Crie seu primeiro arquivo .md

  1. Crie um novo diretório em src/pages/posts/.

  2. Adicione um novo arquivo post-1.md (vazio) dentro da sua nova pasta /posts/.

  3. Procure por essa página na prévia do seu navegador adicionando /posts/post-1 ao fim da sua URL de prévia existente. (como http://localhost:4321/posts/post-1)

  4. Modifique a URL de pré-visualização do navegador para ver /posts/post-2 ao invés disso. (Essa é uma página que você ainda não criou.)

    Note o resultado diferente em pré-visualizar uma página “vazia”, e uma que não existe. Isso te ajudará a solucionar problemas no futuro.

Escreva conteúdo Markdown

Seção intitulada Escreva conteúdo Markdown

  1. Copie ou digite o seguinte código em post-1.md

    src/pages/posts/post-1.md
    ---
    title: 'Minha Primeira Postagem no Blog'
    pubDate: 2022-07-01
    description: 'Esta é a primeira postagem do meu novo blog Astro.'
    author: 'Aluno de Astro'
    image:
        url: 'https://docs.astro.build/assets/rose.webp'
        alt: 'Logo Astro em fundo escuro com brilho rosa.'
    tags: ["astro", "blogueirando", "aprendendo em público"]
    ---
    # Minha Primeira Postagem no Blog
    

    Publicado em: 2022-07-01
    

    Bem-vindo ao meu _novo blog_ sobre aprendendo Astro! Aqui, eu irei compartilhar minha jornada de aprendizado enquanto eu construo um novo website.
    

    ## O que eu realizei
    

    1. **Instalando Astro**: Primeiro, eu criei um novo projeto Astro e configurei minhas contas online.
    

    2. **Fazendo Páginas**: E então eu aprendi como fazer páginas criando novos arquivos `.astro` e os colocando na pasta `src/pages/`.
    

    3. **Fazendo Postagens no Blog**: Esta é minha primeira postagem no blog! Eu agora tenho páginas Astro e postagens em Markdown!
    

    ## O que vem a seguir
    

    Eu irei completar o tutorial do Astro, e então continuarei adicionando mais postagens. Olhe por aqui para o que vem a frente.

  2. Verifique a pré-visualização do seu navegador novamente em http://localhost:4321/posts/post-1. Você deve agora ver conteúdo nessa página. O conteúdo pode não estar propriamente formatado, mas não se preocupe, você vai atualizar isso depois durante o tutorial!

  3. Use as Ferramentas do Desenvolvedor do seu navegador para inspecionar nessa página. Perceba que apesar de você não ter digitado quaisquer elementos HTML, seu Markdown foi convertido para HTML. Você pode ver elementos assim como cabeçalhos, parágrafos e itens de listas.

Seção intitulada Faça links para suas postagens

  1. Faça um link para sua primeira postagem com uma tag de âncora em src/pages/blog.astro:

    src/pages/blog.astro
    ---
    ---
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Início</a>
        <a href="/about/">Sobre</a>
        <a href="/blog/">Blog</a>
    

        <h1>Meu Blog de Aprendizado sobre Astro</h1>
        <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Postagem 1</a></li>
        </ul>
      </body>
    </html>

  2. Agora, adicione mais dois arquivos em src/pages/posts/: post-2.md e post-3.md. Aqui está um código de exemplo que você pode copiar e colar em seus arquivos, ou, você pode criar o seu próprio!

    src/pages/posts/post-2.md
    ---
    title: Minha Segunda Postagem no Blog
    author: Aluno de Astro
    description: "Após aprender um pouco sobre Astro, eu não consegui parar!"
    image:
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Logo Astro em fundo escuro com arco degradê roxo."
    pubDate: 2022-07-08
    tags: ["astro", "blogueirando", "aprendendo em público", "sucessos"]
    ---
    Após uma primeira semana de sucesso aprendendo Astro, eu decidi tentar um pouco mais. Eu escrevi e importei um pequeno componente da memória!
    src/pages/posts/post-3.md
    ---
    title: Minha Terceira Postagem no Blog
    author: Aluno de Astro
    description: "Eu tive alguns desafios, mas perguntar na comunidade realmente me ajudou!"
    image:
        url: "https://docs.astro.build/assets/rays.webp"
        alt: "Logo Astro em fundo escuro com raios arco-íris."
    pubDate: 2022-07-15
    tags: ["astro", "aprendendo em público", "contratempos", "comunidade"]
    ---
    Nem tudo está sendo fácil, mas estou gostando de construir com Astro. E a [comunidade no Discord](https://astro.build/chat) é realmente amigável e cooperativa!

  3. Adicione links para essas novas postagens:

    src/pages/blog.astro
    ---
    ---
    <html lang="pt-BR">
      <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width" />
        <title>Astro</title>
      </head>
      <body>
        <a href="/">Início</a>
        <a href="/sobre/">Sobre</a>
        <a href="/blog/">Blog</a>
    

        <h1>Meu Blog de Aprendizado sobre Astro</h1>
        <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
        <ul>
          <li><a href="/posts/post-1/">Postagem 1</a></li>
          <li><a href="/posts/post-2/">Postagem 2</a></li>
          <li><a href="/posts/post-3/">Postagem 3</a></li>
        </ul>
      </body>
    </html>

  4. Verifique a pré-visualização no seu navegador e certifique-se de que:

    • Todos os seus links para a Postagem 1, Postagem 2 e Postagem 3 levam a uma página funcional no seu site. (Se você encontrou um erro, verifique seus links em blog.astro ou no nome de seus arquivos Markdown.)

Teste seu conhecimento

Seção intitulada Teste seu conhecimento
  1. Conteúdo em um arquivo Markdown (.md) é convertido para:

Checklist

Seção intitulada Checklist

Recursos

Seção intitulada Recursos
Contribute

What’s on your mind?

Create GitHub Issue

Quickest way to alert our team of a problem.

Community