170 lines
4.6 KiB
Markdown
170 lines
4.6 KiB
Markdown
# 🚀 Astro Starter Kit
|
|
|
|
Un starter kit moderne et élégant, optimisé pour la performance et le SEO. Construit avec **Astro**, **React** et **Tailwind CSS**.
|
|
|
|
## ✨ Fonctionnalités
|
|
|
|
- ⚡ **Ultra rapide** : Génération statique avec Astro
|
|
- ⚛️ **React** : Hydratation partielle intelligente (Islands Architecture)
|
|
- 🎨 **Tailwind CSS** : Styling moderne et responsive
|
|
- 🔍 **SEO optimisé** : Meta tags et structure HTML5
|
|
- 🐳 **Docker ready** : Build multi-stage optimisé
|
|
|
|
## 📦 Structure du projet
|
|
|
|
```
|
|
/
|
|
├── src/
|
|
│ ├── layouts/
|
|
│ │ └── BaseLayout.astro # Layout de base avec SEO
|
|
│ ├── components/
|
|
│ │ └── InteractiveCounter.jsx # Composant React démo
|
|
│ ├── pages/
|
|
│ │ └── index.astro # Page d'accueil
|
|
│ └── styles/
|
|
│ └── global.css # Styles Tailwind
|
|
├── public/
|
|
├── Dockerfile # Build multi-stage
|
|
├── docker-compose.yml
|
|
└── astro.config.mjs
|
|
```
|
|
|
|
## 🚀 Démarrage rapide
|
|
|
|
### Développement local
|
|
|
|
```bash
|
|
# Installer les dépendances
|
|
pnpm install
|
|
|
|
# Lancer le serveur de dev
|
|
pnpm run dev
|
|
```
|
|
|
|
Le site sera accessible sur `http://localhost:4321`
|
|
|
|
### Build de production
|
|
|
|
```bash
|
|
# Générer les fichiers statiques
|
|
pnpm run build
|
|
|
|
# Prévisualiser le build
|
|
pnpm run preview
|
|
```
|
|
|
|
### Docker
|
|
|
|
```bash
|
|
# Build et lancement avec Docker Compose
|
|
docker compose up -d --build
|
|
|
|
# Le site sera accessible sur http://localhost:8080
|
|
```
|
|
|
|
## 🎯 Concepts clés
|
|
|
|
### Hydratation partielle (Islands Architecture)
|
|
|
|
Astro envoie **zéro JavaScript par défaut**. Les composants React ne sont hydratés que si vous utilisez une directive `client:*` :
|
|
|
|
```astro
|
|
<!-- Rendu statique uniquement (pas de JS) -->
|
|
<InteractiveCounter />
|
|
|
|
<!-- Hydraté côté client (interactif) -->
|
|
<InteractiveCounter client:load />
|
|
```
|
|
|
|
### Directives client disponibles
|
|
|
|
- `client:load` : Hydrate immédiatement
|
|
- `client:idle` : Hydrate quand le navigateur est inactif
|
|
- `client:visible` : Hydrate quand visible dans le viewport
|
|
- `client:media` : Hydrate selon une media query
|
|
|
|
## 📝 Personnalisation
|
|
|
|
### Ajouter une nouvelle page
|
|
|
|
Créez un fichier `.astro` dans `src/pages/` :
|
|
|
|
```astro
|
|
---
|
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
|
---
|
|
|
|
<BaseLayout title="Ma nouvelle page">
|
|
<h1>Contenu de ma page</h1>
|
|
</BaseLayout>
|
|
```
|
|
|
|
### Ajouter un composant React
|
|
|
|
Créez un fichier `.jsx` dans `src/components/` et utilisez-le avec une directive `client:*` pour l'interactivité.
|
|
|
|
## 🛠️ Technologies
|
|
|
|
- [Astro](https://astro.build) - Framework web moderne
|
|
- [React](https://react.dev) - Bibliothèque UI
|
|
- [Tailwind CSS](https://tailwindcss.com) - Framework CSS utility-first
|
|
- [Docker](https://www.docker.com) - Containerisation
|
|
|
|
## 🚀 Déploiement sur Coolify (Production)
|
|
|
|
Suivez cette procédure étape par étape pour déployer une nouvelle instance de ce site.
|
|
|
|
### 1. Préparation dans Gitea
|
|
|
|
1. Allez sur le dépôt du template dans Gitea.
|
|
2. Cliquez sur **"Utiliser ce modèle"** (Use this template).
|
|
3. Créez votre nouveau dépôt (ex: `mon-nouveau-site`).
|
|
|
|
### 2. Création du projet dans Coolify
|
|
|
|
1. Dans Coolify, créez un **New Project**.
|
|
2. Choisissez **Private Repository** (avec déploiement via clé privée).
|
|
3. Sélectionnez la clé privée : `Gitea`.
|
|
4. Sélectionnez le serveur : `avqn-worker`.
|
|
|
|
### 3. Configuration du Git
|
|
|
|
Remplissez les informations suivantes :
|
|
|
|
- **Repository URL** : Utilisez le format SSH court (ex: `git@git.avqn.ch:AVQN/mon-nouveau-site.git`).
|
|
> ⚠️ **Attention** : Ne mettez PAS `ssh://` devant.
|
|
- **Branch** : `main`
|
|
|
|
### 4. Configuration du Build
|
|
|
|
Coolify va charger le dépôt. Une fois chargé, configurez comme suit :
|
|
|
|
- **Build Pack** : Choisissez `Nixpacks`.
|
|
- **Options** :
|
|
- Cochez la case **Is it a static site?** ✅.
|
|
- **Publish Directory** : Laissez `dist`.
|
|
|
|
### 5. Configuration du Domaine
|
|
|
|
Changez le domaine par défaut (ex: `https://mon-site.app.avqn.ch`).
|
|
|
|
### 6. Fonctionnalités Avancées (Indispensable pour les PRs)
|
|
|
|
1. Allez dans l'onglet **Features** (ou Configuration -> Advanced).
|
|
2. Cochez **Preview Deployments** pour activer les environnements temporaires sur les Pull Requests.
|
|
|
|
### 7. Configuration des Webhooks (Sécurité)
|
|
|
|
Pour que Coolify puisse nettoyer les environnements de PR automatiquement :
|
|
|
|
1. Dans Coolify (menu **Webhooks** du projet), définissez un **Webhook Secret** (générez-en un ou mettez un mot de passe fort).
|
|
2. Copiez ce secret.
|
|
3. Allez dans **Gitea -> Configuration du dépôt -> Webhooks**.
|
|
4. Ajoutez le Webhook Coolify (ou modifiez l'existant) et collez le code dans le champ **Secret**.
|
|
|
|
### 8. Lancement
|
|
|
|
Cliquez sur **Deploy**. 🚀
|
|
|
|
|