Introdução

Starlight é um tema de documentação cheio de funcionalidades construído em cima do framework Astro. Esse guia o ajudará a iniciar um novo projeto. Consulte as instruções de instalação manual para adicionar Starlight a um projeto Astro existente.

Início Rápido

Crie um novo projeto

Crie um novo projeto Astro + Starlight executando o seguinte comando em seu terminal:

npm

npm create astro@latest -- --template starlight

pnpm

pnpm create astro --template starlight

Yarn

yarn create astro --template starlight

Isso irá criar um novo diretório de projeto com todos os arquivos e configurações necessárias para o seu site.

Veja-o em ação

Experimente Starlight no seu navegador: abrir o template no StackBlitz.

Inicie o servidor de desenvolvimento

Quando estiver trabalhando localmente, o servidor de desenvolvimento do Astro permite visualizar seu trabalho e atualizar automaticamente seu navegador ao fazer alterações.

Dentro do diretório do seu projeto, execute o seguinte comando para iniciar o servidor de desenvolvimento:

npm

npm run dev

pnpm

pnpm dev

Yarn

yarn dev

Será exibida uma mensagem em seu terminal com a URL para visualização local. Abra esta URL para começar a navegar no seu site.

Crie conteúdo

Starlight está pronto para você adicionar novo conteúdo, ou trazer seus arquivos existentes!

Formatos de arquivo

O Starlight suporta a escrita de conteúdo em Markdown e MDX sem nenhuma configuração extra. Você pode adicionar suporte para Markdoc instalando a integração experimental Astro Markdoc.

Adicione páginas

Adicione novas páginas ao seu site criando arquivos .md ou .mdx em src/content/docs/. Utilize subdiretórios para organizar seus arquivos, e para criar múltiplos segmentos de caminho.

Por exemplo, a seguinte estrutura de arquivos vai gerar páginas example.com/ola-mundo e example.com/guides/faq:

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • Directoryguides/

        • faq.md
      • ola-mundo.md

Frontmatter com segurança de tipos

Todas as páginas do Starlight compartilham um conjunto comum de propriedades frontmatter para controlar como a página aparece:

---
title: Olá, Mundo!
description: Essa é uma página no meu site com Starlight
---

Se você esquecer de algo importante, Starlight vai te informar.

Próximos passos

• Configurar: Descubra opções comuns em “Customizando Starlight”.
• Navegar: Configure a barra lateral com o guia “Barra lateral de navegação”.
• Componentes: Conheça os cartões, abas e outros componentes integrados no guia “Componentes”.
• Deploy: Publique seu projeto com o guia “Deploy do seu site Astro” na documentação do Astro.

Atualizando Starlight

Dica

Como o Starlight é um software em beta, haverá frequentes atualizações e melhorias. Certifique-se de atualizar Starlight constantemente!

Starlight é uma integração Astro, e é atualizado como qualquer outra integração @astrojs/*:

npm

npm install @astrojs/starlight@latest

pnpm

pnpm upgrade @astrojs/starlight --latest

Yarn

yarn upgrade @astrojs/starlight --latest

Consulte o histórico de mudanças do Starlight para ver a lista completa das alterações feitas em cada versão.

Solucionando Problemas no Starlight

Use as páginas de referência configuração do projeto e configuração do frontmatter para cada página para garantir que seu site Starlight esteja configurado e funcionando corretamente. Confira os guias na barra lateral para ajudá-lo a adicionar conteúdo e personalizar seu site Starlight.

Se a sua resposta não pôde ser encontrada nessa documentação, por favor visite a documentação do Astro para uma documentação mais completa sobre o Astro. Sua pergunta pode ser respondida ao entender como o Astro funciona no geral, por debaixo do tema Starlight.

Você também pode checar por quaisquer problemas conhecidos do Starlight no GitHub, e conseguir ajuda no Discord do Astro da nossa ativa e amigável comunidade! Envie perguntas em nosso fórum #support com a tag “starlight”, ou visite nosso canal dedicado #starlight para discutir o desenvolvimento atual e mais!