Criando um Projeto Astro do Zero

1. Hook (A Trava Mental)

• Aprendiz: "Mestre, a fábrica (Node.js) está pronta. Mas... e a planta da casa? Devo criar cada pasta e arquivo do zero? Parece muito trabalho manual antes mesmo de escrever a primeira linha de conteúdo."

2. Deep Dive (A Solução)

• Mestre: "Jamais. Um mestre arquiteto não desenha a mesma planta básica repetidamente. Ele usa um gabarito. No mundo do desenvolvimento, usamos um assistente de linha de comando (CLI). O comando npm create astro@latest não é apenas um comando; é um robô de configuração que fará perguntas para construir o projeto exatamente como queremos."

Pense nisso como um dos seus fluxos de automação no N8N. Você dispara um gatilho (npm create astro@latest), e ele executa uma série de ações pré-definidas: cria a estrutura de pastas, baixa os arquivos iniciais e prepara tudo para você. Sua única tarefa é responder a algumas perguntas simples durante o processo.

Hoje, vamos usar esse assistente para criar um projeto "vazio" (Empty), a tela em branco perfeita para construirmos nosso site.

3. O Fazer (Criação e Execução do Projeto)

Vamos executar dois comandos principais: um para criar o projeto e outro para vê-lo funcionando.

Passo 1: Criar o Projeto Astro

Abra seu terminal no diretório onde deseja criar seus projetos (por exemplo, na sua Área de Trabalho ou em uma pasta Documentos/Projetos).

Agora, digite o seguinte comando e pressione Enter:

npm create astro@latest

O assistente começará e fará algumas perguntas. A imagem abaixo mostra como o processo se inicia.

Responda às perguntas da seguinte forma:

1. "Where would you like to create your new project?" (Onde você quer criar seu projeto?): Digite um nome para a pasta do seu projeto (ex: meu-primeiro-site-astro) e pressione Enter.
2. "How would you like to start your new project?" (Como você quer começar?): Use as setas do teclado para selecionar a opção "Empty" e pressione Enter.
3. "Would you like to install dependencies?" (Gostaria de instalar as dependências?): Digite y (sim).
4. "Would you like to use TypeScript?" (Gostaria de usar TypeScript?): Digite n (não).
5. "Would you like to initialize a new git repository?" (Gostaria de inicializar um repositório git?): Digite y (sim).

A documentação oficial do Astro detalha exatamente este processo. É uma excelente referência para você ter à mão.

Passo 2: Executar o Servidor de Desenvolvimento

Após o término da instalação, o terminal mostrará uma mensagem de sucesso. Agora, precisamos "ligar" o site para que possamos vê-lo no navegador.

1. Primeiro, entre na pasta que você acabou de criar com o comando cd (change directory):

   cd meu-primeiro-site-astro 
   

   (Substitua meu-primeiro-site-astro pelo nome que você deu ao seu projeto).

2. Agora, inicie o servidor de desenvolvimento do Astro:

   npm run dev
   

O terminal exibirá uma mensagem confirmando que o servidor está rodando e fornecerá um endereço local, geralmente http://localhost:4321.

Clique nesse link (ou copie e cole no seu navegador). Você deverá ver a página de boas-vindas do Astro!

Para uma demonstração visual completa de todo o processo, desde a criação até a execução, o vídeo a seguir é um ótimo recurso.

4. Checkpoint (Dica de IA)

• Mestre: "Excelente! Você não apenas construiu a fundação, mas também aprendeu o 'feitiço' de invocação. Este conhecimento é ouro para sua habilidade de Context Engineering."

Agora, você pode ser extremamente específico com a IA. Em vez de um pedido vago, você pode ditar as regras do jogo.

• Prompt com Contexto Avançado: "Atue como um especialista em Astro. Gere para mim a sequência exata de comandos de terminal para criar um novo projeto Astro chamado 'landing-page-ia'. O projeto deve usar o template 'Empty', não deve incluir TypeScript, mas deve instalar as dependências e inicializar um repositório Git. Por fim, forneça os comandos para navegar até o diretório do projeto e iniciar o servidor de desenvolvimento."

Este prompt força a IA a seguir o processo que você já conhece e validou. Você não está mais pedindo para ela fazer algo que você não entende; você está usando-a como uma ferramenta de automação para executar uma tarefa que você domina conceitualmente.

Conclusão

Você acaba de passar por um dos rituais mais importantes do desenvolvimento moderno: a criação de um projeto a partir de uma ferramenta CLI.

• O que fizemos: Usamos npm create astro@latest para gerar um projeto Astro completo e npm run dev para visualizá-lo.
• Comandos chave: npm create astro@latest (para criar) e npm run dev (para visualizar).
• Próximo passo: Agora que a "casa" está de pé, na próxima lição vamos abrir a porta da frente e explorar os cômodos. Investigaremos a estrutura de pastas (src, public) para entender onde o conteúdo vive e onde a estrutura é definida.