Primeiros passos com Astro-Theme-Aither

Este guia leva você do zero até um blog multilíngue publicado. Leia tudo com calma ou pule direto para a seção que precisa agora.

Pré-requisitos

• Node.js 22 LTS ou superior
• pnpm 10 ou superior
• Uma conta no GitHub
• Uma conta na Cloudflare para deploy

Instalação

git clone https://github.com/YOUR_USERNAME/YOUR_REPO.git
cd YOUR_REPO
corepack enable
pnpm install
pnpm validate
pnpm dev

Depois, abra http://localhost:4321.

Estrutura do projeto

src/
├── components/        # Componentes Astro e React
├── config/site.ts     # Nome do site, navegação, rodapé e links sociais
├── content/posts/     # Posts organizados por locale
├── i18n/              # Traduções da interface
├── layouts/           # Layouts
├── lib/               # Utilitários
├── pages/             # Páginas e rotas
└── styles/global.css  # Tokens de tema do Tailwind v4

Configuração

Site Config

src/config/site.ts é a fonte única de configuração do site:

1
export const siteConfig = {
2
  name: 'Nome do seu blog',
3
  title: 'Seu slogan',
4
  description: 'Sua descrição para SEO',
5
  author: {
6
    name: 'Seu nome',
7
    avatar: '',
8
  },
9
};

Variáveis de ambiente

cp .env.example .env

Se alguma variável ficar vazia, a integração correspondente será desativada automaticamente.

URL do site

Defina a URL de produção em astro.config.mjs:

1
import { defineConfig } from 'astro/config';
2
import aither from '@aither/astro';
3

4
export default defineConfig({
5
  site: 'https://your-domain.pages.dev',
6
  integrations: [aither()],
7
});

Escrevendo posts

Crie um arquivo .mdx em src/content/posts/en/:

1
---
2
title: Meu primeiro post
3
date: "2026-03-14T16:00:00+08:00"
4
category: General
5
description: Um resumo curto para SEO e previews sociais.
6
tags: [Topic, Another]
7
pinned: false
8
---
9

10
Seu conteúdo começa aqui.

Referência de frontmatter

Componentes MDX

Você pode importar componentes diretamente dentro do conteúdo:

1
import MyChart from '@/components/MyChart'
2

3
<MyChart data={[10, 20, 30]} />

Internacionalização

O tema suporta 11 idiomas por padrão. Para adicionar uma tradução, crie o mesmo nome de arquivo na pasta da locale desejada:

src/content/posts/en/my-post.mdx
src/content/posts/pt-br/my-post.mdx
src/content/posts/zh-hans/my-post.mdx

Os textos de interface ficam em src/i18n/messages/.

Seções de conteúdo personalizadas

Você pode registrar coleções como traduções, notas ou tutoriais em src/content.config.ts e src/config/site.ts. As páginas de lista e detalhe serão geradas automaticamente.

Temas

O sistema funciona em duas camadas:

• modo de cor: light, dark, system
• estilo visual: default ou estilos integrados como evolution

1
ui: {
2
  defaultMode: 'system',
3
  defaultStyle: 'default',
4
  showMoreThemesMenu: true,
5
},

As cores ficam em src/styles/global.css. A fonte padrão é uma pilha sans-serif do sistema, com monospace para blocos de código.

SEO e AI

Cada página já expõe estas saídas:

• /sitemap-index.xml
• /rss.xml
• /robots.txt
• /llms.txt
• /llms-full.txt
• /posts/slug.md
• JSON-LD e Open Graph

Deploy

Cloudflare Pages

Boa prática: crie primeiro o projeto do Pages. O fluxo usa o nome do repositório por padrão, ou CLOUDFLARE_PAGES_PROJECT_NAME se você precisar sobrescrever.

Configure estes secrets no GitHub:

• CLOUDFLARE_API_TOKEN
• CLOUDFLARE_ACCOUNT_ID

Depois rode pnpm validate e faça push para main.

Comandos úteis

Esquema de versão

As tags públicas de release seguem nomes no estilo CalVer, como v2026.04.08.