🚀 Démarrer un projet Astro¶

Ce guide vous accompagne pas à pas dans la création, la configuration et le déploiement d'un nouveau projet Astro chez AXIOM CORE.

📋 Vue d'ensemble¶

Le workflow complet se déroule en 4 étapes :

Créer le repository sur GitHub
Configurer l'environnement de développement
Initialiser le projet avec du code
Déployer sur Cloudflare Pages

Étape 1 : Créer le repository GitHub¶

1.1 Accéder à l'organisation¶

Rendez-vous sur notre organisation GitHub :

👉 github.com/axiom-core-labs

1.2 Créer un nouveau repository¶

Cliquez sur New repository et configurez-le avec notre convention de nommage :

acl-{type}-{domaine-client}

Élément	Description	Exemples
`acl`	Préfixe AXIOM CORE Labs	Toujours présent
`{type}`	Type de projet	`website`, `webapp`, `api`, `docs`
`{domaine-client}`	Identifiant client ou projet	`verteden`, `nourishwell`, `internal`

Exemples de noms valides :

acl-website-verteden — Site vitrine pour Verteden
acl-webapp-nourishwell — Application web pour NourishWell
acl-website-lla — Site pour LLA

1.3 Paramètres du repository¶

✅ Visibility : Private (sauf exception)
❌ Ne pas initialiser avec un README (on le fera manuellement)
❌ Pas de .gitignore ni de licence pour l'instant

Cliquez sur Create repository.

Étape 2 : Configurer l'environnement de développement¶

2.1 Ouvrir le Dev Container¶

Dans VS Code, ouvrez le projet acl-devcontainer qui contient notre environnement de développement partagé.

2.2 Ajouter le repository au script d'initialisation¶

Naviguez vers le fichier :

.devcontainer/remote-container-init.sh

Localisez le tableau repos et ajoutez votre nouveau repository :

repos=(
    "acl-website"
    "acl-tpl-astrowind"
    "acl-lla"
    "acl-llao"
    "acl-docs"
    "acl-website-votreprojet"  # ← Ajoutez votre repo ici
)

2.3 Rebuild du Dev Container¶

Dans VS Code, ouvrez la palette de commandes (Ctrl+Shift+P ou Cmd+Shift+P) et exécutez :

Dev Containers: Rebuild Container

💡 Que fait le Rebuild ?

Cette commande reconstruit l'environnement Docker et exécute le script remote-container-init.sh qui :

Clone tous les repositories listés

Configure Git avec vos identifiants

Met à jour le fichier .code-workspace

Prépare les hooks Git

Une fois terminé, votre nouveau dossier de projet apparaît dans l'explorateur.

Étape 3 : Initialiser le projet¶

3.1 Initialiser Git dans le nouveau repository¶

Ouvrez un terminal dans le dossier de votre projet et exécutez :

cd acl-website-votreprojet

echo "# acl-website-votreprojet" >> README.md
git init
git add README.md
git commit -m "🎉 Initial commit"
git branch -M main
git remote add origin git@axiom-core-labs:axiom-core-labs/acl-website-"votreprojet".git
git push -u origin main

⚠️ Important : Remplacez acl-website-votreprojet par le nom réel de votre repository.

3.2 Choisir votre point de départ¶

Vous avez deux options pour initialiser le code :

Option A : Partir d'un template AXIOM CORE¶

Utilisez notre template Astro optimisé acl-tpl-astrowind :

# Copier tout le contenu du template (sauf .git)
cp -r ../acl-tpl-astrowind/* .
cp ../acl-tpl-astrowind/.* . 2>/dev/null || true

# Supprimer le dossier .git copié accidentellement
rm -rf .git

# Réinitialiser git proprement
git init
git add .
git commit -m "🚀 Initialize from acl-tpl-astrowind template"
git remote add origin git@axiom-core-labs:axiom-core-labs/acl-website-"votreprojet".git
git branch -M main
git push -u origin main --force

Option B : S'inspirer d'un projet existant¶

Copiez les fichiers d'un projet similaire pour gagner du temps :

⚠️ Important : Restez dans le meme terminal ou cd acl-website-"votreprojet"

# Copier la structure de base depuis un projet existant
cp -r ../acl-website-"votreprojet"/src .
cp -r ../acl-website-"votreprojet"/public .
cp ../acl-website-"votreprojet"/package.json .
cp ../acl-website-"votreprojet"/astro.config.mjs .
cp ../acl-website-"votreprojet"/tailwind.config.cjs .
cp ../acl-website-"votreprojet"/tsconfig.json .
cp ../acl-website-"votreprojet"/themes.config.js .

# Copier les fichiers de configuration
cp -r ../acl-website/.github .
cp ../acl-website/.gitignore .

💡 Conseil : Adaptez la liste des fichiers selon vos besoins. Vous pouvez aussi copier des dossiers spécifiques comme src/components ou src/layouts. ⚠️ Important : Remplacez acl-website-votreprojet par le nom réel de votre repository.

3.3 Installer les dépendances et tester¶

npm install
npm run dev

Vérifiez que le site fonctionne localement avant de continuer.

3.4 Commit et push¶

git add .
git commit -m "✨ Add project structure"
git push

Étape 4 : Déployer sur Cloudflare Pages¶

4.1 Autoriser Cloudflare à accéder au repository¶

Rendez-vous sur notre organisation GitHub : 👉 github.com/axiom-core-labs
Naviguez vers : Settings → Integrations → GitHub Apps → Cloudflare Pages → Configure
Dans la section "Repository access", ajoutez votre nouveau repository à la liste.
Cliquez sur Save.

4.2 Créer le projet Cloudflare Pages¶

Connectez-vous à Cloudflare Dashboard
Dans le menu latéral, allez dans : Compute (AI) → Workers & Pages
Cliquez sur Create
En bas de la page, cliquez sur : "Looking to deploy Pages? Get started"
Sélectionnez Import an existing Git repository
Choisissez votre repository dans la liste

4.3 Configurer le build¶

Remplissez les paramètres de build :

Paramètre	Valeur
Framework preset	`Astro`
Build command	`npm run build`
Build output directory	`dist`

4.4 Variables d'environnement (optionnel)¶

Si votre projet utilise des variables d'environnement, ajoutez-les dans la section Environment variables :

Variable	Exemple
`PUBLIC_SITE_URL`	`https://votreprojet.pages.dev`
`THEME`	`axiom_web`

4.5 Déployer¶

Cliquez sur Save and Deploy.

Cloudflare va :

Cloner votre repository
Exécuter npm install
Exécuter npm run build
Déployer le contenu de /dist

⏱️ Le premier déploiement prend généralement 2-3 minutes.

Une fois terminé, votre site est accessible à l'URL :

https://acl-website-votreprojet.pages.dev

Étape 5 : Préparer le projet pour le développement¶

Avant de commencer à coder avec GitHub Copilot, prenez le temps de configurer correctement votre projet.

5.1 Configurer les instructions Copilot¶

Éditez le fichier .github/copilot-instructions.md pour donner un contexte précis à Copilot :

# Instructions Copilot pour [Nom du Projet]

## Contexte
- Client : [Nom du client]
- Type : Site vitrine / Application web / etc.
- Objectif : [Description courte]

## Stack technique
- Astro + Tailwind CSS
- TypeScript
- Déployé sur Cloudflare Pages

## Conventions
- Langue du contenu : Français
- Nommage des composants : PascalCase
- Nommage des fichiers : kebab-case

## Palette de couleurs
[Copier les couleurs depuis themes.config.js]

## Particularités du projet
[Ajoutez ici les spécificités métier, contraintes, etc.]

5.2 Personnaliser le thème¶

Le fichier themes.config.js définit la palette de couleurs du projet. Choisissez ou créez un thème adapté au client :

// Thèmes disponibles : axiom, axiom_web, axiom_ai, axiom_or, tech_ocean, etc.
const activeTheme = process.env.THEME || 'axiom_web';

5.3 Adapter Tailwind¶

Vérifiez que tailwind.config.cjs référence correctement votre thème et ajoutez les personnalisations nécessaires.

Dernière mise à jour : janvier 2026