Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 11

Criando Novas Páginas com Arquivos `.astro`

Recommended resources

Olá! Bem-vindo de volta.

Na nossa última conversa, desvendamos a teoria por trás do file-based routing do Astro: a ideia de que a estrutura de arquivos e pastas dentro de src/pages define as URLs do seu site. Você entendeu que um arquivo sobre.astro deveria criar a página /sobre.

Nesta lição, vamos transformar essa teoria em realidade. Nosso objetivo é que você crie uma nova página no seu site simplesmente adicionando um arquivo .astro na pasta src/pages. Esta é a sua primeira ação de "construção" real no projeto, um passo fundamental para validar o trabalho de qualquer IA que você venha a usar.

1. Hook (A Trava Mental)

  • Aprendiz: "Mestre, entendi o mapa. O arquivo contato.astro na pasta src/pages cria a rota /contato. Mas até agora só falamos. Quero ver isso acontecer. Como eu crio esse arquivo e faço a mágica funcionar?"

2. Deep Dive (A Solução)

  • Mestre: "Perfeito. A melhor forma de internalizar um conceito é pela ação. Vamos construir. O Astro torna isso tão simples que parece quase trivial, mas este passo é a base de tudo."

A maneira mais direta de aprender é seguindo o guia oficial de "primeiros passos". Ele foi projetado para ser rápido e prático, exatamente o que precisamos.

Crie sua primeira página Astro | Docs

A documentação oficial do Astro tem um tutorial prático que nos guiará passo a passo. Vamos seguir as instruções para criar sua primeira página, a página 'Sobre'.

Abra o seu projeto Astro no VS Code. Siga as instruções do tutorial começando em 'Crie um novo arquivo .astro'. Crie o arquivo about.astro na pasta src/pages/, copie o conteúdo do index.astro para ele, e depois modifique o HTML conforme sugerido na seção 'Edite sua página'. O mais importante é verificar no seu navegador que a URL http://localhost:4321/about agora funciona.

3. O Fazer (Microlearning Prático)

Parabéns! Se você seguiu o tutorial, você acabou de executar a ação mais fundamental no desenvolvimento com Astro. Você criou uma rota e uma página com uma única operação: File > New File.

Para reforçar visualmente o que você acabou de fazer, assista a este pequeno trecho de um tutorial em vídeo. Ele demonstra exatamente o mesmo processo.

Astro 5.0 Crash Course

O canal Coding in Public mostra de forma clara e rápida como o file-based routing funciona na prática. Observe como o apresentador cria um arquivo about.astro e a página correspondente passa a existir instantaneamente.

Assista do timestamp 01:51 a 02:27. O foco é ver outra pessoa fazendo o mesmo que você fez: criar um arquivo na pasta src/pages e acessar a nova rota no navegador. Isso solidifica o conceito.

O processo é sempre este:

  1. Identifique a URL desejada: /quem-sou
  2. Crie o arquivo correspondente: src/pages/quem-sou.astro
  3. Adicione o conteúdo HTML: Cole a estrutura básica e edite os títulos e parágrafos.
  4. Verifique no navegador: Acesse http://localhost:4321/quem-sou.

4. Checkpoint (Dica de IA)

  • Mestre: "Agora você não apenas entende a teoria, você sentiu na prática. Este conhecimento é a sua ferramenta de validação mais poderosa."

Quando você instruir uma IA a criar uma nova seção ou página, seu processo de verificação será simples e rápido:

  • Seu Prompt:

    "Crie uma página de Contato para o meu site Astro. Ela deve ser acessível na URL /contato."

  • Sua Verificação (agora você sabe o que procurar):
    1. Abra o VS Code e olhe a pasta src/pages.
    2. A IA criou um arquivo chamado contato.astro ali dentro? Sim/Não.
    3. Se sim, abra o navegador e acesse http://localhost:4321/contato. A página carrega? Sim/Não.

Você passou de um usuário que pede coisas a um engenheiro que verifica a execução de um plano.

Conclusão

Nesta lição, você deu o passo crucial da teoria para a prática. Você não apenas aprendeu, mas executou a criação de uma nova página em um site Astro.

  • Key Takeaways:

    • Criar uma página nova é literalmente tão simples quanto criar um novo arquivo .astro na pasta src/pages.
    • O nome do arquivo (sobre.astro) é diretamente traduzido para a rota da URL (/sobre).
    • Este processo prático é a base para validar se uma IA construiu corretamente a estrutura de páginas solicitada.

  • Próximo Passo: Agora você tem duas páginas: index.astro e about.astro. Elas existem, mas estão isoladas. Um usuário não tem como navegar de uma para a outra. Na próxima lição, vamos resolver isso: você aprenderá a adicionar um link de navegação entre duas páginas utilizando a tag <a>.