Pular para o conteúdo
Astro Astro

Crie seu primeiro projeto Astro

Se prepare para...

  • Executar o assistente de instalação create astro para criar um novo projeto
  • Iniciar o servidor do Astro em modo de desenvolvimento (dev)
  • Ver uma pré-visualização ao vivo do seu website no seu navegador

Inicie o assistente de instalação do Astro

A forma recomendada de criar um novo site Astro é através do nosso assistente de instalação create astro.

  1. Na linha de comando do seu terminal, execute o seguinte comando utilizando seu gerenciador de pacotes preferido:

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

  2. Confirme y para instalar create-astro

  3. Quando o prompt perguntar “Where would you like to create your new project?”, digite o nome de uma pasta para criar um novo diretório para seu projeto, e.x. ./tutorial

  4. Você verá uma pequena lista de templates iniciais para escolher. Utilize as setas (cima e baixo) para navegador até o template “Empty”, e então pressione return (enter) para enviar sua escolha.

  5. Quando o prompt perguntar “Would you like to install dependencies?”, digite y.

  6. Quando o prompt perguntar se você planejar escrever TypeScript, digite n.

  7. Quando o prompt perguntar “Would you like to initialize a new git repository?”, digite y.

Quando o assistente de instalação completar, você não precisa mais desse terminal. Você agora pode abrir o VS Code para continuar.

Abra seu projeto no VS Code

  1. Abra o VS Code. Você será solicitado a abrir uma pasta. Escolha a pasta que você criou durante o assistente de instalação.

  2. Se essa é sua primeira vez abrindo um projeto Astro, você deve ver uma notificação perguntando se você gostaria de instalar as extensões recomendadas. Clique para ver as extensões recomendadas e escolha a extensão de suporte a linguagem do Astro. Ela irá fornecer highlighting e preenchimento automático para o seu código Astro.

  3. Certifique-se de que o terminal está visível e que você pode ver o prompt de comando, como:

    Terminal window
    user@machine:~/tutorial$

Agora você pode utilizar o terminal direto dessa janela, ao invés do aplicativo Terminal do seu computador pelo resto deste tutorial.

Execute Astro no modo de desenvolvimento

Para que se pré-visualize os arquivos do seu projeto como um website enquanto você trabalha, você irá precisar que o Astro esteja sendo executado no modo de desenvolvimento (dev).

Inicie o servidor de desenvolvimento

  1. Execute o comando para começar o servidor de desenvolvimento do Astro digitando no terminal do VS Code:

    Terminal window
    npm run dev

    Agora você deve ver uma confirmação no seu terminal de que o Astro está sendo executado no modo de desenvolvimento. 🚀

Veja uma pré-visualização do seu website

Seus arquivos do projeto contém todo o código necessário para mostrar um website Astro, mas o navegador é o responsável por mostrar o seu código como páginas web.

  1. Clique no link localhost em sua janela do terminal para ver uma pré-visualização ao vivo do seu novo website Astro!

    (Astro utiliza http://localhost:4321 por padrão se a porta 4321 estiver disponível.)

    É assim que o template inicial “Empty Project” do Astro deve se parecer no seu navegador:

    Uma página em branco com a palavra Astro no topo.

Checklist

Recursos