🚀 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 :

1. Créer le repository sur GitHub
2. Configurer l'environnement de développement
3. Initialiser le projet avec du code
4. 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}

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 :

# Copier la structure de base depuis un projet existant
cp -r ../acl-website/src .
cp -r ../acl-website/public .
cp ../acl-website/package.json .
cp ../acl-website/astro.config.mjs .
cp ../acl-website/tailwind.config.cjs .
cp ../acl-website/tsconfig.json .
cp ../acl-website/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.

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¶

1. Rendez-vous sur notre organisation GitHub : 👉 github.com/axiom-core-labs

2. Naviguez vers : Settings → Integrations → GitHub Apps → Cloudflare Pages → Configure

3. Dans la section "Repository access", ajoutez votre nouveau repository à la liste.

4. Cliquez sur Save.

4.2 Créer le projet Cloudflare Pages¶

1. Connectez-vous à Cloudflare Dashboard

2. Dans le menu latéral, allez dans : Compute (AI) → Workers & Pages

3. Cliquez sur Create

4. En bas de la page, cliquez sur : "Looking to deploy Pages? Get started"

5. Sélectionnez Import an existing Git repository

6. Choisissez votre repository dans la liste

4.3 Configurer le build¶

Remplissez les paramètres de build :

4.4 Variables d'environnement (optionnel)¶

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

4.5 Déployer¶

Cliquez sur Save and Deploy.

Cloudflare va :

1. Cloner votre repository
2. Exécuter npm install
3. Exécuter npm run build
4. 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