Bien démarrer avec Astro-Theme-Aither

Ce guide vous accompagne depuis une installation vierge jusqu’à un blog multilingue déployé. Lisez-le du début à la fin ou allez directement à la section utile.

Prérequis

• Node.js 22 LTS ou plus récent
• pnpm 10 ou plus récent
• Un compte GitHub
• Un compte Cloudflare pour le déploiement

Installation

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

Ouvrez ensuite http://localhost:4321.

Structure du projet

src/
├── components/        # Composants Astro et React
├── config/site.ts     # Nom du site, navigation, footer, réseaux
├── content/posts/     # Articles organisés par locale
├── i18n/              # Traductions de l’interface
├── layouts/           # Layouts
├── lib/               # Utilitaires
├── pages/             # Pages et routes
└── styles/global.css  # Tokens Tailwind v4

Configuration

Site Config

src/config/site.ts est la source unique de vérité pour le site :

1
export const siteConfig = {
2
  name: 'Le nom de votre blog',
3
  title: 'Votre signature',
4
  description: 'Votre description SEO',
5
  author: {
6
    name: 'Votre nom',
7
    avatar: '',
8
  },
9
};

Variables d’environnement

cp .env.example .env

Les variables vides désactivent simplement l’intégration correspondante.

URL du site

Définissez l’URL finale dans 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
});

Rédiger des articles

Créez un fichier .mdx dans src/content/posts/en/ :

1
---
2
title: Mon premier article
3
date: "2026-03-14T16:00:00+08:00"
4
category: General
5
description: Résumé court pour le SEO et les aperçus sociaux.
6
tags: [Topic, Another]
7
pinned: false
8
---
9

10
Votre contenu commence ici.

Référence du frontmatter

Composants MDX

Vous pouvez importer des composants interactifs dans vos contenus :

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

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

Internationalisation

Le thème prend en charge 11 langues. Pour traduire un article, créez le même nom de fichier dans un autre dossier de locale :

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

Les textes d’interface se trouvent dans src/i18n/messages/.

Sections de contenu personnalisées

Vous pouvez ajouter des collections comme des traductions, des notes ou des tutoriels via src/content.config.ts et src/config/site.ts. Les pages de liste et de détail seront générées automatiquement.

Theming

Le système repose sur deux couches :

• mode de couleur : light, dark, system
• style visuel : default ou un style intégré comme evolution

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

Les couleurs proviennent de src/styles/global.css. La police par défaut est une pile sans-serif système, avec une police monospace pour le code.

SEO et AI

Chaque page expose déjà les sorties utiles suivantes :

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

Déploiement

Cloudflare Pages

Bonne pratique : créez d’abord le projet Pages. Le flux utilise par défaut le nom du dépôt, ou CLOUDFLARE_PAGES_PROJECT_NAME si vous devez le remplacer.

Configurez ces secrets GitHub :

• CLOUDFLARE_API_TOKEN
• CLOUDFLARE_ACCOUNT_ID

Ensuite, exécutez pnpm validate puis poussez sur main.

Commandes utiles

Schéma de version

Les tags de release publics suivent un nommage CalVer, par exemple v2026.04.08.