Pular para o conteúdo

Instale Astro com a Interface de Linha de Comando Automática

Pronto para instalar Astro? Siga esse guia em como utilizar a interface de linha de comando create astro para começar.

Pré-requisitos

Seção intitulada Pré-requisitos
  • Node.js - v18.14.1 ou superior.
  • Editor de Texto - Recomendamos o VS Code com a nossa extensão oficial Astro.
  • Terminal - Astro é acessado através da sua Interface de Linha de Comando.

Instalação

Seção intitulada Instalação

create astro é a forma mais rápida de iniciar um novo projeto Astro do zero. Ele irá te guiar por cada etapa da configuração do seu novo projeto Astro. Ele te permite escolher entre alguns templates iniciais diferentes ou então você pode usar qualquer projeto existente no GitHub com o argumento --template.

1. Execute o Assistente de Instalação

Seção intitulada 1. Execute o Assistente de Instalação

Execute o seguinte comando no seu terminal para iniciar nosso conveniente assistente de instalação:

Terminal window
# crie um novo projeto com npm
npm create astro@latest

Você pode executar create astro em qualquer lugar da sua máquina, então não há a necessidade de criar um diretório vazio para seu projeto antes de começar. Se você ainda não tiver um diretório vazio para o seu projeto, o assistente irá te ajudar a criar um para você automaticamente.

Se tudo der certo, você verá a mensagem “Liftoff confirmed. Explore your project!” (“Decolagem confirmada. Explore seu projeto!”, em português) seguida de alguns próximos passos recomendados. Navegue no diretório do seu novo projeto com o comando cd para começar a utilizar Astro.

Se você pulou a etapa npm install durante o assistente de linha de comando, certifique-se de instalar suas dependências antes de continuar.

2. Inicie Astro ✨

Seção intitulada 2. Inicie Astro ✨

Astro vem com um servidor de desenvolvimento integrado que tem tudo o que você precisa para o desenvolvimento do projeto. O comando astro dev irá iniciar o servidor de desenvolvimento local para que você então possa ver o seu novo website em ação pela primeira vez.

Todos os templates iniciais vem com um script pré-configurado que irá executar astro dev para você. Use o seu gerenciador de pacotes favorito para executar esse comando e inicie o servidor de desenvolvimento do Astro.

Terminal window
npm run dev

Se tudo ocorrer bem, Astro deve estar servindo o seu projeto em http://localhost:4321!

Astro irá observar as mudanças em arquivos no seu diretório src/, logo você não precisa reiniciar o servidor enquanto faz mudanças durante o desenvolvimento.

Se você não conseguir abrir o seu projeto no navegador, volte ao terminal onde você executou o comando dev e veja se algum erro ocorreu, ou se seu projeto está sendo servido em uma URL diferente da que foi indicada acima.

Templates Iniciais

Seção intitulada Templates Iniciais

Você também pode iniciar um novo projeto Astro com base em um exemplo oficial ou da branch main de qualquer repositório do GitHub passando o argumento --template ao comando create astro.

Terminal window
# cria um novo projeto com um exemplo oficial
npm create astro@latest -- --template <nome-exemplo>


# cria um novo projeto com base na branch main de um repositório do GitHub
npm create astro@latest -- --template <nome-github>/<repositório-github>

Por padrão, este comando irá utilizar a branch main do repositório do template. Para usar um nome de branch diferente, passe-o como parte do argumento --template : <nome-github>/<repositório-github>#<branch>.

Explore nosso mostruário de temas e templates iniciais no qual você pode navegar temas para blogs, portfólios, documentação, páginas iniciais e mais! Ou então, pesquise no GitHub para mais projetos iniciais.

Próximos Passos

Seção intitulada Próximos Passos

Sucesso! Agora você está pronto para começar a construir com Astro! 🥳

Aqui estão alguns tópicos que recomendados explorar a seguir. Você pode os ler em qualquer ordem. Você pode até sair da nossa documentação por um tempinho e ir brincar com a base de código do seu novo projeto Astro, voltando aqui quando você encontrar algum problema ou ter uma dúvida.

📚 Adicione um framework: Aprenda como estender o Astro com dando suporte para React, Svelte, Tailwind e mais utilizando npx astro add em nosso guia de Integrações.

📚 Faça deploy do seu site: Aprenda como fazer build e deploy de um projeto Astro para a web em nosso guia de Deploy.

📚 Entenda sua base de código: Aprenda mais sobre a estrutura de projetos do Astro em nosso guia de Estrutura de Projetos.