Pular para o conteúdo

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

Seção intitulada 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 se você planejar escrever TypeScript, digite n.

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

  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

Seção intitulada 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

Seção intitulada 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

Seção intitulada 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

Seção intitulada 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

Seção intitulada Checklist

Recursos

Seção intitulada Recursos