Créez un blog statique moderne avec Astro

Pourquoi choisir Astro ?

Astro est un générateur de sites statiques moderne conçu dans le but principal d’envoyer le moins de JavaScript possible au navigateur. Contrairement aux frameworks SPA traditionnels, Astro génère du HTML pur par défaut et charge JavaScript uniquement là où une interaction est requise.

Avantages principaux

• Sortie par défaut zéro JS : La page ne contient aucun JavaScript par défaut
• Content First : collections de contenu intégrées, gestion sécurisée du contenu Markdown
• Excellentes performances : Le rendu pendant la construction, le score parfait dans Lighthouse n’est pas un rêve
• Intégration flexible : prend en charge les composants du framework tels que React, Vue, Svelte, etc.

Construction du projet

npm create astro@latest my-blog
cd my-blog
npm run dev

Installer les dépendances

npm install @astrojs/tailwind @astrojs/sitemap astro-icon

Structure du répertoire

Une bonne structure de projet est la base de la maintenabilité :

src/
├── components/    # 可复用组件
├── layouts/       # 页面布局
├── pages/         # 路由页面
├── content/       # Markdown 内容
└── styles/        # 全局样式

Optimisation des performances

1. Les images sont automatiquement optimisées à l’aide d’Astro Assets
2. Les polices sont hébergées localement pour éviter les décalages de mise en page
3. CSS est généré à la demande à l’aide de Tailwind
4. La mise en évidence du code est terminée lors de la construction à l’aide de Shiki

N’oubliez pas : la meilleure optimisation est de ne pas envoyer de code inutile.

Résumer

Astro fournit la solution parfaite pour les blogs statiques : des performances ultimes, une excellente expérience de développement et d’excellentes performances de référencement. Si vous recherchez un framework de blog, Astro vaut vraiment la peine d’être essayé.