feat: Astro starter kit minimal et élégant
- Design minimal monochrome (fond blanc, typo Inter) - Navigation avec Navbar (Home/About) - Pages index et about - Configuration Docker optimisée avec nginx - SEO et performance optimisés - Prêt pour la production
This commit is contained in:
115
README.md
Normal file
115
README.md
Normal file
@@ -0,0 +1,115 @@
|
||||
# 🚀 Astro Starter Kit
|
||||
|
||||
Un starter kit moderne optimisé pour la performance et le SEO, utilisant **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
|
||||
npm install
|
||||
|
||||
# Lancer le serveur de dev
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Le site sera accessible sur `http://localhost:4321`
|
||||
|
||||
### Build de production
|
||||
|
||||
```bash
|
||||
# Générer les fichiers statiques
|
||||
npm run build
|
||||
|
||||
# Prévisualiser le build
|
||||
npm 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
|
||||
|
||||
## 📄 Licence
|
||||
|
||||
MIT
|
||||
Reference in New Issue
Block a user