Téléchargement du code source d' astrowind - Téléchargement du code source astrowind

astrowind

Autres catégories

1.0.0

Télécharger

AstroVent

? Thème Astro le plus étoilé et le plus fourchu en 2022 et 2023 . ?

AstroWind est un modèle gratuit et open source pour créer votre site Web à l'aide d'Astro 5.0 + Tailwind CSS . Prêt à démarrer un nouveau projet et conçu en tenant compte des meilleures pratiques du Web.

✅ Scores prêts pour la production dans les rapports PageSpeed Insights .
✅ Intégration avec Tailwind CSS prenant en charge le mode sombre et RTL .
✅ Blog rapide et convivial pour le référencement avec flux RSS automatique, support MDX , catégories et balises , partage social , ...
✅ Optimisation de l'image (en utilisant les nouveaux Astro Assets et Unpic pour le CDN d'image universel).
✅ Génération du plan du site du projet en fonction de vos itinéraires.
✅ Ouvrez les balises Graph pour le partage sur les réseaux sociaux.
✅ Analytics intégré à Google Analytics et intégration Splitbee.

Table des matières

Démo
À venir : AstroWind 2.0 – Nous avons besoin de votre vision !
Commencer
- Structure du projet
- Commandes
- Configuration
- Déployer
Foire aux questions
Projets connexes
Contribuer
Remerciements
Licence

Démo

? https://astrowind.vercel.app/

? À venir : AstroWind 2.0 – Nous avons besoin de votre vision !

Nous nous lançons dans un voyage passionnant avec AstroWind 2.0 et nous voulons que vous en fassiez partie ! Nous faisons actuellement les premiers pas dans le développement de cette nouvelle version et vos idées sont inestimables. Rejoignez la discussion et partagez vos commentaires, idées et suggestions pour aider à façonner l'avenir d' AstroWind . Rendons AstroWind 2.0 encore meilleur, ensemble !

Partagez vos commentaires dans notre discussion !

Commencer

AstroWind essaie de vous donner un accès rapide à la création d'un site Web à l'aide d'Astro 5.0 + Tailwind CSS. C'est un thème gratuit qui met l'accent sur la simplicité, les bonnes pratiques et les hautes performances.

Très peu de javascript vanille est utilisé uniquement pour fournir des fonctionnalités de base afin que chaque développeur décide quel framework (React, Vue, Svelte, Solid JS...) utiliser et comment aborder ses objectifs.

Dans cette version, le modèle prend en charge toutes les options de configuration output , static , hybrid et server , mais le blog ne fonctionne qu'avec prerender = true . Nous travaillons sur la prochaine version et visons à la rendre entièrement compatible avec SSR.

Structure du projet

Dans le modèle AstroWind , vous verrez les dossiers et fichiers suivants :

 /
├── public/
│   ├── _headers
│   └── robots.txt
├── src/
│   ├── assets/
│   │   ├── favicons/
│   │   ├── images/
│   │   └── styles/
│   │       └── tailwind.css
│   ├── components/
│   │   ├── blog/
│   │   ├── common/
│   │   ├── ui/
│   │   ├── widgets/
│   │   │   ├── Header.astro
│   │   │   └── ...
│   │   ├── CustomStyles.astro
│   │   ├── Favicons.astro
│   │   └── Logo.astro
│   ├── content/
│   │   ├── post/
│   │   │   ├── post-slug-1.md
│   │   │   ├── post-slug-2.mdx
│   │   │   └── ...
│   │   └-- config.ts
│   ├── layouts/
│   │   ├── Layout.astro
│   │   ├── MarkdownLayout.astro
│   │   └── PageLayout.astro
│   ├── pages/
│   │   ├── [...blog]/
│   │   │   ├── [category]/
│   │   │   ├── [tag]/
│   │   │   ├── [...page].astro
│   │   │   └── index.astro
│   │   ├── index.astro
│   │   ├── 404.astro
│   │   ├-- rss.xml.ts
│   │   └── ...
│   ├── utils/
│   ├── config.yaml
│   └── navigation.js
├── package.json
├── astro.config.ts
└── ...

Astro recherche les fichiers .astro ou .md dans le répertoire src/pages/ . Chaque page est exposée sous forme d'itinéraire en fonction de son nom de fichier.

Il n'y a rien de spécial à propos de src/components/ , mais c'est là que nous aimons placer tous les composants Astro/React/Vue/Svelte/Preact.

Tous les actifs statiques, comme les images, peuvent être placés dans le répertoire public/ s'ils ne nécessitent aucune transformation ou dans le répertoire assets/ s'ils sont importés directement.

? ‍ Astronaute chevronné ? Supprimez ce fichier README.md . Mettez à jour src/config.yaml et son contenu. Amusez-vous!

Commandes

Toutes les commandes sont exécutées depuis la racine du projet, depuis un terminal :

Commande	Action
`npm install`	Installe les dépendances
`npm run dev`	Démarre le serveur de développement local sur `localhost:4321`
`npm run build`	Construisez votre site de production sur `./dist/`
`npm run preview`	Prévisualisez votre build localement, avant de le déployer
`npm run check`	Vérifiez votre projet pour les erreurs
`npm run fix`	Exécutez Eslint et formatez les codes avec Prettier
`npm run astro ...`	Exécutez des commandes CLI comme `astro add` , `astro preview`

Configuration

Fichier de configuration de base : ./src/config.yaml

 site :
  name : ' Example '
  site : ' https://example.com '
  base : ' / ' # Change this if you need to deploy to Github Pages, for example
  trailingSlash : false # Generate permalinks with or without "/" at the end

  googleSiteVerificationId : false # Or some value,

# Default SEO metadata
metadata :
  title :
    default : ' Example '
    template : ' %s — Example '
  description : ' This is the default meta description of Example website '
  robots :
    index : true
    follow : true
  openGraph :
    site_name : ' Example '
    images :
      - url : ' ~/assets/images/default.png '
        width : 1200
        height : 628
    type : website
  twitter :
    handle : ' @twitter_user '
    site : ' @twitter_user '
    cardType : summary_large_image

i18n :
  language : en
  textDirection : ltr

apps :
  blog :
    isEnabled : true # If the blog will be enabled
    postsPerPage : 6 # Number of posts per page

    post :
      isEnabled : true
      permalink : ' /blog/%slug% ' # Variables: %slug%, %year%, %month%, %day%, %hour%, %minute%, %second%, %category%
      robots :
        index : true

    list :
      isEnabled : true
      pathname : ' blog ' # Blog main path, you can change this to "articles" (/articles)
      robots :
        index : true

    category :
      isEnabled : true
      pathname : ' category ' # Category main path /category/some-category, you can change this to "group" (/group/some-category)
      robots :
        index : true

    tag :
      isEnabled : true
      pathname : ' tag ' # Tag main path /tag/some-tag, you can change this to "topics" (/topics/some-category)
      robots :
        index : false

    isRelatedPostsEnabled : true # If a widget with related posts is to be displayed below each post
    relatedPostsCount : 4 # Number of related posts to display

analytics :
  vendors :
    googleAnalytics :
      id : null # or "G-XXXXXXXXXX"

ui :
  theme : ' system ' # Values: "system" | "light" | "dark" | "light:only" | "dark:only"

Personnaliser la conception

Pour personnaliser les familles de polices, les couleurs ou plusieurs éléments, reportez-vous aux fichiers suivants :

src/components/CustomStyles.astro
src/assets/styles/tailwind.css

Déployer

Déployer en production (manuel)

Vous pouvez créer une version de production optimisée avec :

npm run build

Maintenant, votre site Web est prêt à être déployé. Tous les fichiers générés se trouvent dans le dossier dist , que vous pouvez déployer sur n'importe quel service d'hébergement de votre choix.

Déployer sur Netlify

Clonez ce référentiel sur votre propre compte GitHub et déployez-le sur Netlify :

Déployer sur Vercel

Clonez ce référentiel sur votre propre compte GitHub et déployez-le sur Vercel :

Foire aux questions

Pourquoi?

Projets associés

TailNext - Modèle gratuit utilisant Next.js 14 et Tailwind CSS avec le nouveau App Router.
Qwind - Modèle gratuit pour créer votre site Web en utilisant Qwik + Tailwind CSS.

Contribuer

Si vous avez des idées, des suggestions ou si vous trouvez des bugs, n'hésitez pas à ouvrir une discussion, un problème ou à créer une pull request. Cela serait très utile pour nous tous et nous serions heureux de vous écouter et d’agir.