Landing pages & site templates

AstroWind

Modèle gratuit sous licence MIT en Astro et Tailwind CSS pour un site marketing et un blog

arthelokyo/astrowindAstro5,887 as of 2026-08-19
By Jake Luo · Published 19 août 2026

AstroWind est un modèle de site web gratuit sous licence MIT, bâti sur Astro 7 et Tailwind CSS 4, avec 5 887 étoiles GitHub en août 2026. Une seule commande génère un site marketing et un blog qui produit du HTML statique, crée son propre sitemap, émet des balises Open Graph et un flux RSS, et accepte un identifiant Google Analytics depuis un unique fichier de configuration YAML. Cela couvre correctement la moitié « construire » d'un lancement. Cela ne couvre pas la moitié qui décide si quelqu'un arrive : ce que vous publiez dessus et à qui vous en parlez.

Ce que contient réellement AstroWind

AstroWind (github.com/arthelokyo/astrowind) est un thème de départ, ni un framework ni un produit hébergé : vous en générez une copie, vous la modifiez, et le résultat vous appartient. Il est sous licence MIT et compte, à côté de ses étoiles, 1 659 forks — sur un modèle, c'est le chiffre le plus parlant, car un fork correspond à quelqu'un qui a réellement commencé un site avec. Le dépôt se présente comme le thème Astro le plus étoilé et le plus forké de ces quatre dernières années ; c'est l'affirmation du mainteneur, que nous n'avons pas vérifiée. À la lecture du README et de la configuration, voici ce qui est fourni :

  • Sortie statique par défaut Le modèle utilise la compilation statique d'Astro : déployer revient à publier un dossier de fichiers HTML. C'est la raison pour laquelle ses scores de performance tiennent sans réglage, et pour la recherche cela compte : les balises dont un robot a besoin figurent dans le HTML que le serveur renvoie, et ne sont pas assemblées après coup par un script.
  • Un blog déjà câblé Articles en Markdown et MDX, catégories et étiquettes, pagination, articles liés, partage social et flux RSS. Les permaliens sont configurables, et catégories, étiquettes et page de liste peuvent chacune être désactivées ou renommées depuis la configuration.
  • La plomberie SEO Un sitemap généré à partir de vos routes, des métadonnées Open Graph et Twitter Card, un gabarit de titres et des indicateurs index et follow par section — le tout défini dans un unique `src/config.yaml` plutôt que dispersé entre les composants.
  • Gestion des images Les images responsives natives d'Astro complétées par Unpic pour un CDN d'images universel, de sorte que les images sont optimisées à la compilation au lieu d'être servies telles que vous les avez déposées.
  • Thématisation avec Tailwind CSS 4 Couleurs et polices vivent sous forme de variables CSS dans `CustomStyles.astro`, avec les jetons de thème dans `tailwind.css`, conformément à la configuration centrée sur le CSS de Tailwind 4. Le mode sombre et les mises en page de droite à gauche sont pris en charge d'origine.
  • Un emplacement d'analytique, vide par défaut La configuration comporte un champ d'identifiant Google Analytics dont la valeur est nulle. Le remplir tient en une ligne ; vérifier qu'il enregistre ensuite réellement est un autre travail, et c'est l'objet de la section suivante.

Est-il maintenu ?

Cela vaut la vérification pour n'importe quel modèle, car un modèle abandonné vous attache silencieusement à une version ancienne du framework. L'historique des commits d'AstroWind en août 2026 est substantiel et non cosmétique : une série de travaux le 8 août a adopté l'API de polices native d'Astro et le préchargement selon la zone visible, déplacé le traitement des images vers les images responsives propres à Astro, remplacé un bloc de scripts monolithique par des composants web, activé le TypeScript strict et supprimé du code mort. Les dépendances sont passées à Astro 7 le 4 août, et au début de l'été il y a eu une modernisation de l'intégration continue et des corrections de rigueur de typage. Il exige une version récente de Node, et ses versions étiquetées sont en retard sur la branche principale : ce que vous générez depuis le modèle est donc en avance sur la dernière étiquette.

Ce qu'un modèle ne peut pas faire à votre place

Un modèle vous fait gagner la semaine que vous auriez passée sur la mise en page, le comportement responsif et les balises meta. Il ne supprime pas la raison pour laquelle la plupart des sites de fondateurs restent silencieux : une page techniquement excellente sur un produit que personne ne cherche ne reçoit toujours pas de visiteurs. AstroWind générera un sitemap ; il ne peut pas décider de ce qui doit y figurer. Il transformera ce que vous écrivez en HTML rapide et explorable ; le jugement sur les pages qui méritent d'être écrites reste le vôtre, et ce jugement représente l'essentiel du résultat.

L'enchaînement honnête pour un nouveau site : le modèle vous achète de la vitesse sur les parties mécaniques, puis le travail change complètement de nature — choisir les questions que vos acheteurs tapent réellement, publier mieux que ce qui se positionne déjà dessus, et gagner les premiers liens et mentions. Si vous partez de zéro, le SEO d'un site tout neuf donne le calendrier honnête, et transformer les visiteurs en inscriptions est la partie qui décide si le trafic vaut quelque chose une fois arrivé. Ajouter des données structurées par-dessus ce que le modèle émet déjà coûte peu et aide les moteurs d'IA à vous citer correctement.

C'est précisément pour cette moitié distribution qu'existe AgentCeres, votre AI Growth Officer. Il s'agit d'une équipe marketing IA gérée qui étudie votre marché, rédige les contenus et les prises de contact, et vous soumet le travail sortant pour approbation avant toute publication. Elle complète un modèle comme AstroWind au lieu de le concurrencer : le modèle vous donne le site, l'équipe vous donne une raison qu'on le visite. Vous pouvez voir comment cela fonctionne sur agentceres.com.

Vérifiez que le site enregistre avant de croire ses chiffres

Ceci est une leçon de première main plutôt qu'un conseil propre à AstroWind, et cela vaut pour tout modèle doté d'un champ d'analytique. Nous construisons et hébergeons des pages d'atterrissage pour nos propres clients, et ces pages publiées sont servies sous une politique de sécurité du contenu stricte. Au lancement de la fonctionnalité, nous injections une petite balise de script d'analytique dans chaque page. La balise était dans le HTML, la page paraissait parfaite, et le compteur de vues affichait zéro. Rien ne servait ce script : la requête renvoyait un 404 à chaque visite, sur chaque page, pendant des jours. Nous ne l'avons repéré que parce qu'un zéro assuré et immobile est plus suspect qu'un chiffre faible. Le comptage se fait désormais côté serveur, après que la page a réellement été renvoyée.

La règle transposable : une balise présente dans votre source n'est pas la même chose qu'une balise qui enregistre. La même politique a aussi cassé en silence deux éléments qui s'affichaient très bien en local, une image hébergée à l'extérieur et une feuille de styles de polices chargée depuis un autre domaine, parce que les règles de la couche d'hébergement s'appliquent à la page déployée et non à la copie de votre ordinateur. Après avoir déployé un modèle, ouvrez l'URL en production avec le panneau réseau du navigateur et vérifiez que la requête d'analytique renvoie un 200, que vos images se chargent depuis l'origine déployée, et que le code source affiche vos titre, description et canonique à l'intérieur de la balise head.

Vérifications après déploiement qui valent cinq minutes
  • Affichez le code source de l'URL en production et vérifiez que titre, description, canonique et balises Open Graph sont dans l'élément head.
  • Chargez la page déployée avec le panneau réseau ouvert : chaque requête devrait renvoyer 200, en particulier celle de l'analytique.
  • Récupérez /sitemap-index.xml et vérifiez qu'il liste bien les pages attendues, puis soumettez-le dans la Search Console.
  • Passez l'URL en production dans un test de vitesse plutôt que de vous fier à la capture d'écran du modèle ; vos images et vos polices ne sont pas celles de la démo.
  • Renseignez l'identifiant Google Analytics dans la configuration ou supprimez le champ : un emplacement d'analytique vide signifie que rien n'est enregistré.

FAQ

AstroWind est-il gratuit pour un usage commercial ?
Oui. Le dépôt est sous licence MIT, qui autorise l'usage commercial, la modification et la redistribution à condition de conserver la licence et la mention de copyright. Vous n'êtes pas tenu de créditer AstroWind visiblement sur votre site, et aucune formule payante ne verrouille de fonctionnalités à l'intérieur du modèle.
Faut-il connaître Astro pour l'utiliser ?
Moins que vous ne pourriez le craindre pour un site marketing. L'essentiel de ce qu'un fondateur modifie tient dans un unique fichier de configuration YAML et dans des fichiers de contenu en Markdown ou MDX, dont aucun n'exige de connaître le framework. Modifier les sections de page elles-mêmes suppose de toucher aux composants .astro, qui se lisent comme du HTML précédé d'un bloc d'en-tête de saveur JavaScript. Le modèle emploie délibérément très peu de JavaScript côté client, vous laissant le choix de React, Vue ou Svelte si vous avez besoin plus tard de pièces interactives.
Un modèle utilisé par d'autres sites nuit-il à mon référencement ?
Non : les moteurs classent les pages sur leur contenu, leurs liens et l'expérience offerte, pas selon que la mise en page est partagée avec d'autres sites. Des milliers de sites tournent sur les mêmes thèmes populaires et se positionnent très bien. Ce qui nuit, c'est de publier avec le contenu de démonstration encore en place, une description de remplissage sur chaque page, ou une image Open Graph appartenant toujours à l'auteur du modèle. Ce sont des problèmes de contenu qui arrivent avec un modèle, et non une sanction pour l'avoir utilisé.
En quoi cela diffère-t-il d'un constructeur de site visuel ?
AstroWind est du code source que vous possédez et déployez où vous voulez, modifié dans un éditeur de texte et versionné dans Git, ce qui convient à un fondateur technique ne voulant aucun prestataire dans la boucle. Un constructeur visuel échange cette propriété contre une expérience d'édition dans le navigateur qu'un collègue non technique peut utiliser sans déploiement. Si quelqu'un du marketing doit changer des textes sans ouvrir de pull request, la voie du constructeur est en général la plus douce.
Related projects
WebstudioConstructeur de sites visuel open source — une alternative à Webflow que vous hébergez vous-mêmeNext SEOComposants React sous licence MIT pour les données structurées dans les projets Next.jsSatoriLa bibliothèque open source de Vercel qui transforme JSX et CSS en SVG — le moteur derrière les images Open Graph dynamiquesSaaS BoilerplateUn starter kit SaaS Next.js gratuit et open-source avec authentification, multi-tenancy, rôles et permissions, i18n, et une landing page — construit avec Tailwind CSS, Shadcn UI et TypeScript

You built it. Now grow it.

AgentCeres is a managed AI marketing team — specialists draft the SEO, social, and outreach that fill your links, you approve what ships. 14-day free trial, from $39/month.

Start free trialMore projects