3  Páginas e Rotas

Nos capítulos anteriores, preparamos nossa estação de desenvolvimento nas nuvens com o GitHub Codespaces e inicializamos o motor do Astro. Agora que o servidor está pronto para responder aos nossos comandos, chegou a hora de dar forma real ao site da TED System.

Um site institucional moderno dificilmente se resume a uma única página estática. Seus clientes esperam encontrar informações detalhadas sobre a empresa, conhecer os profissionais que desenvolvem as soluções e acessar canais diretos de comunicação.

Neste capítulo, você aprenderá como o Astro resolve a criação de páginas e URLs por meio do roteamento baseado em arquivos. Você construirá a página inicial da TED System e adicionará três novas páginas completas: Sobre, Equipe e Contato.

3.1 O Conceito de Roteamento Baseado em Arquivos

Em muitas tecnologias e frameworks web tradicionais, para criar uma nova página você precisa configurar rotas em arquivos de configuração complexos ou escrever dezenas de linhas de lógica para associar uma URL a uma função.

No Astro, essa complexidade simplesmente desaparece graças ao conceito de roteamento baseado em arquivos (file-based routing).

A regra de ouro do Astro é direta: a estrutura de arquivos dentro da pasta src/pages/ determina diretamente as URLs do seu site.

Observe a tabela de correspondência:

Arquivo em src/pages/	Caminho da URL no Navegador	Descrição
src/pages/index.astro	/	Página principal (Home)
src/pages/sobre.astro	/sobre	Página sobre a empresa
src/pages/equipe.astro	/equipe	Página de apresentação da equipe
src/pages/contato.astro	/contato	Página de endereço e contato

Se você criar um arquivo chamado produtos.astro dentro de src/pages/, o Astro criará automaticamente a rota /produtos. Sem configurações extras, sem instalar pacotes adicionais.

DicaO poder da extensão .astro

Arquivos com a extensão .astro são componentes de modelo (templates) exclusivos do Astro. Eles permitem misturar HTML comum com a lógica do framework.

Você pode escrever o HTML que já conhece e usar recursos avançados que serão vistos no capítulo 4.

3.2 Atualizando a Página Inicial

Vamos transformar o arquivo src/pages/index.astro na página inicial da TED System, destacando as boas-vindas, a missão institucional da empresa e um menu de navegação que conectará todas as páginas do site.

Como estas páginas não precisam do bloco de frontmatter visto no capítulo 2, nós o removeremos por enquanto. Ele volta no capítulo 4, quando passar a ter conteúdo.

Abra o arquivo src/pages/index.astro no editor do Codespaces, apague o conteúdo anterior e crie o código abaixo:

src/pages/index.astro

<html lang="pt-BR">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Início | TED System</title>
	</head>
	<body>
		<header>
			<strong>TED System</strong>
			<nav>
				<ul>
					<li><a href="/">Início</a></li>
					<li><a href="/sobre">Sobre</a></li>
					<li><a href="/equipe">Equipe</a></li>
					<li><a href="/contato">Contato</a></li>
				</ul>
			</nav>
		</header>

		<main>
			<section>
				<h1>Tecnologia que evolui com o seu negócio.</h1>
				<p>Desenvolver soluções de software personalizadas, seguras e escaláveis que simplifiquem processos, aumentem a produtividade e impulsionem o crescimento dos nossos clientes.</p>
				<a href="/contato">Fale Conosco</a>
			</section>

			<section>
				<h2>Quem Atendemos</h2>
				<p>Pequenas e médias empresas (PMEs), startups e profissionais autônomos de diversos segmentos, como comércio, saúde, educação e serviços, que precisam de sistemas web, aplicativos e soluções de gestão personalizadas, além de organizações que buscam modernizar sistemas legados ou melhorar a gestão e a segurança de seus dados.</p>
			</section>
		</main>

		<footer>
			<p>&copy; 2026 TED System. Todos os direitos reservados.</p>
		</footer>
	</body>
</html>

Salve o arquivo pressionando Ctrl + S (ou Cmd + S no Mac). Observe que já inserimos links nos elementos <a href="..."> apontando para as próximas páginas que vamos criar.

O Astro permite o uso livre do HTML semântico, que melhora a acessibilidade e a otimização para motores de busca (SEO) do site. Usamos as tags <header>, <nav>, <main>, <section> e <footer> para estruturar o conteúdo com significado claro.

3.3 Criando a Página “Sobre a Empresa”

A página institucional apresentará a história, a visão de futuro e os valores que norteiam os projetos da TED System.

3.3.1 Criando o arquivo no Codespaces

1. No Explorador de Arquivos à esquerda, passe o mouse sobre a pasta src/pages/.
2. Clique no ícone de Novo Arquivo (New File).
3. Escreva o nome: sobre.astro e pressione Enter.

Agora, adicione a estrutura da página sobre.astro:

src/pages/sobre.astro

<html lang="pt-BR">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Sobre Nós | TED System</title>
	</head>
	<body>
		<header>
			<strong>TED System</strong>
			<nav>
				<ul>
					<li><a href="/">Início</a></li>
					<li><a href="/sobre">Sobre</a></li>
					<li><a href="/equipe">Equipe</a></li>
					<li><a href="/contato">Contato</a></li>
				</ul>
			</nav>
		</header>

		<main>
			<section>
				<h1>Sobre a TED System</h1>
				<p>Fundada em 2018 na cidade de Piripiri, no Piauí, a TED System nasceu do sonho do engenheiro de software Wanderson de Vasconcelos de aproximar a tecnologia de qualidade das pequenas e médias empresas do interior do Nordeste. O que começou como um projeto de freelancer, desenvolvendo sistemas de gestão para comércios locais, cresceu com a chegada de Sheldon Cooper, especialista em desenvolvimento Full Stack, e de Amy Farrah Fowler, responsável por estruturar e proteger os bancos de dados dos clientes. Hoje, a TED System é uma software house reconhecida pela entrega de soluções sob medida, com foco em qualidade de código, segurança da informação e atendimento próximo aos clientes.</p>
			</section>

			<section>
				<h2>Missão</h2>
				<p>Desenvolver soluções de software personalizadas, seguras e escaláveis que simplifiquem processos, aumentem a produtividade e impulsionem o crescimento dos nossos clientes.</p>
			</section>

			<section>
				<h2>Visão</h2>
				<p>Ser referência nacional em desenvolvimento de software sob medida até 2030, reconhecida pela excelência técnica, pela inovação constante e pelo impacto positivo gerado nos negócios que atendemos.</p>
			</section>

			<section>
				<h2>Nossos Valores</h2>
				<ul>
					<li>
						<h3>Excelência técnica</h3>
						<p>Compromisso com código limpo, boas práticas de engenharia e entregas de alta qualidade.</p>
					</li>
					<li>
						<h3>Transparência e parceria</h3>
						<p>Comunicação clara e honesta, tratando cada cliente como um parceiro de longo prazo.</p>
					</li>
					<li>
						<h3>Inovação responsável</h3>
						<p>Adoção de novas tecnologias com foco em segurança, sustentabilidade e resultados reais.</p>
					</li>
				</ul>
			</section>
		</main>

		<footer>
			<p>&copy; 2026 TED System. Todos os direitos reservados.</p>
		</footer>
	</body>
</html>

Salve o arquivo pressionando Ctrl + S (ou Cmd + S no Mac).

3.4 Criando a Página “Nossa Equipe”

Na página da equipe, destacaremos os profissionais que compõem o corpo técnico da TED System.

Crie o arquivo equipe.astro dentro da pasta src/pages/ e insira o código a seguir:

src/pages/equipe.astro

<html lang="pt-BR">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Nossa Equipe | TED System</title>
	</head>
	<body>
		<header>
			<strong>TED System</strong>
			<nav>
				<ul>
					<li><a href="/">Início</a></li>
					<li><a href="/sobre">Sobre</a></li>
					<li><a href="/equipe">Equipe</a></li>
					<li><a href="/contato">Contato</a></li>
				</ul>
			</nav>
		</header>

		<main>
			<section>
				<h1>Nossa Equipe Técnica</h1>
				<p>Conheça os profissionais que transformam requisitos de negócio em soluções de software seguras e escaláveis</p>
				<ul>
					<li>
						<h2>Wanderson de Vasconcelos</h2>
						<strong>CEO e Engenheiro de Software</strong>
						<p>Fundador da TED System, começou desenvolvendo sistemas de gestão para comércios locais do interior do Nordeste.</p>
					</li>
					<li>
						<h2>Sheldon Cooper</h2>
						<strong>Especialista Full Stack</strong>
						<p>Especialista em desenvolvimento Full Stack, chegou para ampliar a capacidade de entrega da empresa.</p>
					</li>
					<li>
						<h2>Amy Farrah Fowler</h2>
						<strong>Especialista em Bancos de Dados</strong>
						<p>Responsável por estruturar e proteger os bancos de dados dos clientes.</p>
					</li>
				</ul>
			</section>
		</main>

		<footer>
			<p>&copy; 2026 TED System. Todos os direitos reservados.</p>
		</footer>
	</body>
</html>

Salve o arquivo pressionando Ctrl + S (ou Cmd + S no Mac).

3.5 Criando a Página “Contato”

Por fim, vamos disponibilizar aos visitantes as informações de localização e os canais de contato com a nossa sede no Piauí.

Crie o arquivo contato.astro dentro da pasta src/pages/ com o código abaixo:

src/pages/contato.astro

<html lang="pt-BR">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Fale Conosco | TED System</title>
	</head>
	<body>
		<header>
			<strong>TED System</strong>
			<nav>
				<ul>
					<li><a href="/">Início</a></li>
					<li><a href="/sobre">Sobre</a></li>
					<li><a href="/equipe">Equipe</a></li>
					<li><a href="/contato">Contato</a></li>
				</ul>
			</nav>
		</header>

		<main>
			<section>
				<h1>Fale Conosco</h1>
				<p>Deseja construir uma solução de software sob medida para o seu negócio? Entre em contato com a TED System!</p>
			</section>

			<section>
				<h2>Nossa Sede</h2>
				<address>
					Rua Coronel Simplício, 250, Sala 12<br />
					Centro<br />
					Piripiri, PI<br />
					CEP: 64260-000
				</address>
			</section>

			<section>
				<h2>Canais Digitais</h2>
				<p><strong>E-mail:</strong> <a href="mailto:contato@tedsystem.com.br">contato@tedsystem.com.br</a></p>
				<p><strong>Telefone:</strong> (86) 3276-0042</p>
			</section>
		</main>

		<footer>
			<p>&copy; 2026 TED System. Todos os direitos reservados.</p>
		</footer>
	</body>
</html>

Salve o arquivo pressionando Ctrl + S (ou Cmd + S no Mac).

Nesta página, usamos a tag <address> para indicar o endereço físico da empresa. Também adicionamos um link especial: o protocolo mailto: abre o aplicativo de e-mail padrão do usuário.

3.6 Navegando entre as Páginas no GitHub Codespaces

Com as quatro páginas criadas, vamos testar o resultado na prática!

Se o servidor de desenvolvimento não estiver em execução, inicie-o no terminal do Codespaces:

npm run dev

3.6.1 Como testar no navegador

Quando o Astro iniciar o servidor, acesse a aba Portas (Ports), passe o mouse sobre o endereço na coluna Endereço Encaminhado (Forwarded Address) e clique no ícone do globo, Abrir no Navegador (Open in Browser).

O GitHub Codespaces atribui uma URL com visibilidade Private (Privada) e segura para a sua aplicação na nuvem, similar a:

https://nome-do-codespace-4321.app.github.dev

Isso significa que apenas você, estando logado na sua conta do GitHub, consegue abrir o endereço no navegador. Nenhuma outra pessoa terá acesso.

Figura 3.1: Página Inicial no navegador sem estilos

Você tem duas maneiras práticas de testar a navegação:

1. Pelo Menu de Navegação: Clique nos links Sobre, Equipe e Contato que inserimos no cabeçalho de cada página. A troca de página acontece rapidamente.
2. Diretamente pela Barra de Endereços: Insira o caminho no final da URL do seu navegador:
   • Adicione /sobre para acessar a página Sobre.

Figura 3.2: Página Sobre no navegador sem estilos

• Adicione /equipe para ver a lista de especialistas.

Figura 3.3: Página Equipe no navegador sem estilos

• Adicione /contato para visualizar o endereço em Piripiri - PI.

Figura 3.4: Página Contato no navegador sem estilos

• Volte para / para retornar à Home.

As páginas ainda aparecem sem cores nem layout, porque os estilos só entram no capítulo 5, e a barra de ferramentas do Astro, vista no capítulo 2, aparece na parte inferior.

Note como o Astro mapeou instantaneamente cada arquivo .astro para a sua respectiva rota, sem que você precisasse reiniciar o servidor ou configurar nada além de criar os arquivos.

3.6.2 Verificando a construção com build

Para garantir que não há erros em nossas páginas, pare o servidor pressionando Ctrl + C no terminal. Em seguida, execute a construção do projeto:

npm run build

O Astro vai gerar a versão otimizada do site. Verifique no fim da saída se o comando informa que as 4 páginas foram construídas. Se não aparecerem erros, o projeto está pronto para ser versionado.

3.7 Registrando as Novas Páginas no Git

Com a estrutura de páginas funcionando, encerramos a etapa versionando nossas alterações.

Abra o terminal do Codespaces (ou abra uma nova aba do terminal com o ícone +) e execute:

3.7.1 Verificando os novos arquivos com git status

git status

O Git indicará que o arquivo src/pages/index.astro foi modificado, e que os arquivos contato.astro, equipe.astro e sobre.astro são novos (Untracked files).

3.7.2 Adicionando as mudanças com git add

git add .

3.7.3 Criando o commit descritivo com git commit

git commit -m "feat: cria as páginas Sobre, Equipe e Contato"

3.7.4 Sincronizando com o repositório remoto com git push

git push

AvisoNão feche o navegador sem dar git push!

Mesmo que o Codespaces mantenha sua máquina virtual ativa por algum tempo, o único lugar onde seu trabalho está protegido contra perdas acidentais é o repositório no GitHub. Crie essa disciplina diária!

3.8 Resumo e Próximos Passos

Você atingiu um marco essencial: a TED System agora possui um site com múltiplas páginas navegáveis e estrutura semântica limpa.

Neste capítulo, você aprendeu:

• Como funciona o roteamento baseado em arquivos do Astro na pasta src/pages/;
• A importância da extensão .astro e do HTML semântico;
• A criar e estruturar páginas institucionais completas (index.astro, sobre.astro, equipe.astro e contato.astro);
• A navegar pelas rotas no ambiente em nuvem do GitHub Codespaces;
• A registrar e proteger todo o progresso no GitHub utilizando o Git.

Se você foi observador, deve ter notado algo incômodo: em todas as páginas, precisamos repetir o cabeçalho (<header>), o menu de navegação (<nav>) e o rodapé (<footer>). Se precisarmos alterar o rodapé amanhã, teremos que editar página por página!

No próximo capítulo, resolveremos esse problema de forma profissional com o uso de Componentes e Layouts. Até lá!