Pular para o conteúdo

Instale Astro manualmente

Este guia irá te orientar através das etapas necessárias para instalar e configurar um novo projeto Astro manualmente se você não prefere utilizar a ferramenta de CLI automática.

Prefere uma forma mais rápida de começar?

Seção intitulada Prefere uma forma mais rápida de começar?
Tente o assistente de CLI create astro →

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

Se você não deseja usar a nossa interface de linha de comando create astro, você pode configurar o seu projeto manualmente seguindo o guia abaixo.

1. Crie o seu diretório

Seção intitulada 1. Crie o seu diretório

Crie um diretório vazio com o mesmo nome do seu projeto e navegue até ele:

Terminal window
mkdir meu-projeto-astro
cd meu-projeto-astro

Uma vez que estiver em seu novo diretório, crie o arquivo package.json do seu projeto. É através dele que você irá gerenciar as dependências do seu projeto, incluindo Astro. Se você não está familiarizado com este formato de arquivo, execute o seguinte comando para criá-lo:

Terminal window
npm init --yes

2. Instale Astro

Seção intitulada 2. Instale Astro

Primeiramente, instale as dependências do Astro em seu projeto:

Terminal window
npm install astro

Com a instalação concluída, substitua o script padrão em seu package.json com os seguintes comandos:

"scripts": \{
   "test": "echo \"Error: no test specified\" && exit 1"
   "dev": "astro dev",
   "start": "astro dev",
   "build": "astro build",
   "preview": "astro preview"
},

Você irá usar estes scripts mais a frente no guia para iniciar Astro e executar seus diferentes comandos.

3. Crie sua primeira página

Seção intitulada 3. Crie sua primeira página

Em seu editor de texto, crie um novo arquivo em seu diretório src/pages/index.astro. Essa será a sua primeira página Astro do projeto.

Para este guia, copie e cole o seguinte trecho de código (incluindo os traços ---) em seu novo arquivo:

---
// Bem vindo ao Astro! Tudo entre estes traços triplos é o
// "frontmatter" do componente. Este código nunca executa no navegador.
console.log('Este código executa em seu terminal, não em seu navegador!');
---
<!-- Abaixo está o "template" do seu componente. É apenas HTML, mas
     com certa mágica para te ajudar a construir ótimos templates. -->
<html>
  <body>
    <h1>Olá, Mundo!</h1>
  </body>
</html>
<style>
  h1 {
    color: orange;
  }
</style>

4. Crie seu primeiro asset estático

Seção intitulada 4. Crie seu primeiro asset estático

Você também irá precisar criar um diretório public/ para guardar seus assets estáticos. Astro irá sempre incluir estes assets na construção final do seu projeto, você pode referenciá-los com segurança dentro de seus componentes.

Em seu editor de texto, crie um novo arquivo em seu diretório public/robots.txt. robots.txt é um arquivo simples que é incluído na maiorias dos sites para dizer aos robôs de busca, como o Google, como tratar o seu site.

Para este guia, copie e cole o seguinte trecho de código em seu novo arquivo:

# Exemplo: Permite que todos os robôs possam escanear e indexar seu site.
# Sintaxe completa: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /

5. Crie o arquivo astro.config.mjs

Seção intitulada 5. Crie o arquivo astro.config.mjs

Astro é configurado usando o arquivo astro.config.mjs. Este arquivo é opcional se você não precisa configurar Astro, mas você pode querer criá-lo agora.

Crie o arquivo astro.config.mjs na raiz do seu projeto e então copie e cole o seguinte trecho de código nele:

import { defineConfig } from 'astro/config';


// https://astro.build/config
export default defineConfig({});

Se você deseja incluir componentes de frameworks de UI como React, Svelte e etc. ou usar ferramentas como Tailwind ou Partytown em seu projeto, aqui é onde você irá importar e configurar manualmente as integrações.

📚 Leia a referência de configuração da API Astro para mais informações.

6. Adicione suporte a TypeScript

Seção intitulada 6. Adicione suporte a TypeScript

TypeScript é configurado utilizando tsconfig.json. Mesmo que você não escreva código TypeScript, este arquivo é importante para que ferramentas como o Astro e o VS Code saibam como entender seu projeto. Algumas funcionalidades (como importação de pacotes do npm) não são completamente suportadas no editor sem um arquivo tsconfig.json.

Se você pretende escrever código TypeScript, usar o template strict ou strictest do Astro é recomendado. Você pode ver e comparar as três configurações de template em astro/tsconfigs/.

Crie tsconfig.json na raiz do seu projeto e copie o código abaixo nele. (Você pode utilizar base, strict ou strictest como seu template de TypeScript):

tsconfig.json
{
  "extends": "astro/tsconfigs/base"
}

Finalmente, crie src/env.d.ts para fazer o TypeScript entender sobre tipos de ambiente disponíveis em um projeto Astro:

src/env.d.ts
/// <reference types="astro/client" />

📚 Leia o guia de configuração de TypeScript do Astro para mais informação.

7. Próximos Passos

Seção intitulada 7. Próximos Passos

Se você seguir os passos acima, o diretório do seu projeto deve se parecer com a seguinte estrutura:

  • Diretórionode_modules/
    • …
  • Diretóriopublic/
    • robots.txt
  • Diretóriosrc/
    • Diretóriopages/
      • index.astro
    • env.d.ts
  • astro.config.mjs
  • package-lock.json ou yarn.lock, pnpm-lock.yaml, etc.
  • package.json
  • tsconfig.json

Parabéns! Você está pronto para usar Astro!

Se você seguiu este guia por completo, você pode pular diretamente para o Passo 2: Inicie Astro para continuar e aprender como executar Astro pela primeira vez.