Pular para o conteúdo
Astro Astro

Crie sua primeira página Astro

Agora que você sabe que arquivos .astro são responsáveis pelas páginas no seu website, é hora de criar uma!

Se prepare para...

  • Criar duas novas páginas no seu website: Sobre e Blog
  • Adicionar links de navegação em suas páginas
  • Fazer deploy de uma versão atualizada do seu website para a web

Crie um novo arquivo .astro

  1. No painel de arquivos do seu editor de código, navegue até a pasta src/pages/ onde você verá o arquivo index.astro existente

  2. Na mesma pasta, crie um novo arquivo chamado sobre.astro.

  3. Copie, ou digite novamente os conteúdos de index.astro no seu novo arquivo sobre.astro.

  4. Adicione /sobre ao final da URL de pré-visualização do seu website na barra de endereço e verifique que você consegue ver uma página carregando lá. (e.x. http://localhost:4321/sobre)

Agora, sua página “Sobre” deve se parecer exatamente com a primeira página, mas nós iremos mudar isso!

Edite sua página

Edite o conteúdo HTML para fazer a página ser sobre você.

Para modificar ou adicionar mais conteúdo em sua página Sobre, adicione mais tags de elementos HTML contendo conteúdo. Você pode copiar e colar o código HTML abaixo entre as tags <body></body> existentes, ou criar seu próprio.

src/pages/sobre.astro
<body>
  <h1>Meu Site Astro</h1>
  <h1>Sobre Mim</h1>
  <h2>... e meu novo site Astro!</h2>


  <p>Estou resolvendo o tutorial introdutório do Astro. Esta é a segunda página no meu website, e é a primeira que eu mesmo construí!</p>


  <p>Este site será atualizado enquanto eu completo mais desse tutorial, então continue verificando e veja como minha jornada está indo!</p>
</body>

Agora, visite sua página /sobre na aba do seu navegador novamente, e você deve ver seu conteúdo atualizado.

Para ser mais fácil de pré-visualizar todas as suas páginas, adicione links de navegação de página HTML antes do seu <h1> no topo de ambas as suas páginas (index.astro e sobre.astro):

src/pages/sobre.astro
<a href="/">Início</a>
<a href="/sobre/">Sobre</a>


<h1>Sobre Mim</h1>
<h2>... e meu novo site Astro!</h2>

Verifique que você pode clicar nesses links para ir e voltar entre as páginas no seu site.

Tente você mesmo - Adicione uma página Blog

Adicione uma terceira página blog.astro ao seu site, seguindo as mesmas etapas como acima.

(Não esqueça de adicionar um terceiro link de navegação para cada página.)

Me mostre as etapas.
  1. Crie um novo arquivo em src/pages/blog.astro.
  2. Copie os conteúdos de index.astro e os cole em blog.astro.
  3. Adicione um terceiro link de navegação ao topo de cada página:
src/pages/index.astro
<body>
  <a href="/">Início</a>
  <a href="/sobre/">Sobre</a>
  <a href="/blog/">Blog</a>


  <h1>Meu Site Astro</h1>
</body>

Você agora deve ter um website com três páginas que tem links de uma para a outra. Hora de adicionar algum conteúdo na página Blog.

Atualize o conteúdo da página em blog.astro com:

src/pages/blog.astro
<body>
  <a href="/">Início</a>
  <a href="/sobre/">Sobre</a>
  <a href="/blog/">Blog</a>


  <h1>Meu Site Astro</h1>
  <h1>Meu Blog de Aprendizado sobre Astro</h1>
  <p>Aqui é onde postarei sobre minha jornada aprendendo Astro.</p>
</body>

Pré-visualize seu site inteiro visitando todas as três páginas na pré-visualização do seu navegador e verifique que:

  • Toda página faz links corretos para todas as três páginas
  • Suas duas novas páginas tem seu próprio cabeçalho descritivo
  • Suas duas novas páginas tem seu próprio texto de parágrafo

Publique suas mudanças para a web

Se você seguiu nossa configuração na Unidade 1, você pode publicar suas mudanças para o seu website ao vivo através da Netlify.

Quando estiver feliz em como sua pré-visualização aparece, faça commit de suas mudanças para seu repositório online no GitHub.

  1. No VS Code, pré-visualize os arquivos que foram mudados desde o seu último commit ao GitHub.

    • Vá para a aba Controle de Código-Fonte no menu à esquerda. Ela deve ter um pequeno “3” amostra.

    • Você deve ver index.astro, sobre.astro e blog.astro listados como arquivos que foram modificados.

  2. Insira uma mensagem de commit (e.x. “Adicionei duas novas páginas - sobre e blog”) na caixa de texto, e pressione Ctrl + Enter (macOS: Cmd ⌘ + Enter) para fazer commit da mudança para sua área de trabalho atual.

  3. Clique no botão para Sincronizar Mudanças ao GitHub.

  4. Após esperar alguns minutos, visite sua URL da Netlify para verificar que suas mudanças foram publicadas ao vivo.

Checklist

Recursos