Descargar astrowind - Descarga del código fuente astrowind

astrowind

Otras categorias

1.0.0

Descargar

astroviento

? Tema de Astro con más estrellas y bifurcaciones en 2022 y 2023 . ?

AstroWind es una plantilla gratuita y de código abierto para crear su sitio web utilizando Astro 5.0 + Tailwind CSS . Listo para iniciar un nuevo proyecto y diseñado teniendo en cuenta las mejores prácticas web.

✅ Puntuaciones listas para producción en informes de PageSpeed Insights .
✅ Integración con Tailwind CSS compatible con modo oscuro y RTL .
✅ Blog rápido y compatible con SEO con fuente RSS automática, soporte MDX , categorías y etiquetas , compartir en redes sociales , ...
✅ Optimización de imagen (usando nuevos Astro Assets y Unpic para CDN de imágenes universales).
✅ Generación de sitemap del proyecto en base a tus rutas.
✅ Etiquetas Open Graph para compartir en redes sociales.
✅ Analytics integrado en Google Analytics e integración con Splitbee.

Tabla de contenido

Manifestación
Próximo: AstroWind 2.0: ¡Necesitamos su visión!
Empezando
- Estructura del proyecto
- Comandos
- Configuración
- Desplegar
Preguntas frecuentes
Proyectos Relacionados
Contribuyendo
Expresiones de gratitud
Licencia

Manifestación

? https://astrowind.vercel.app/

? Próximo: AstroWind 2.0: ¡Necesitamos su visión!

¡Nos estamos embarcando en un viaje emocionante con AstroWind 2.0 y queremos que usted sea parte de él! Actualmente estamos dando los primeros pasos en el desarrollo de esta nueva versión y sus conocimientos son invaluables. Únase a la discusión y comparta sus comentarios, ideas y sugerencias para ayudar a dar forma al futuro de AstroWind . ¡Hagamos juntos que AstroWind 2.0 sea aún mejor!

¡Comparta sus comentarios en nuestra discusión!

Empezando

AstroWind intenta brindarle acceso rápido para crear un sitio web utilizando Astro 5.0 + Tailwind CSS. Es un tema gratuito que se centra en la simplicidad, las buenas prácticas y el alto rendimiento.

Se utiliza muy poco javascript básico solo para proporcionar una funcionalidad básica para que cada desarrollador decida qué framework (React, Vue, Svelte, Solid JS...) usar y cómo abordar sus objetivos.

En esta versión, la plantilla admite todas las opciones en la configuración output , static , hybrid y server , pero el blog solo funciona con prerender = true . Estamos trabajando en la próxima versión y nuestro objetivo es hacerla totalmente compatible con SSR.

Estructura del proyecto

Dentro de la plantilla AstroWind , verá las siguientes carpetas y archivos:

 /
├── 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 busca archivos .astro o .md en el directorio src/pages/ . Cada página se expone como una ruta según su nombre de archivo.

No hay nada especial en src/components/ , pero ahí es donde nos gusta colocar los componentes Astro/React/Vue/Svelte/Preact.

Cualquier recurso estático, como imágenes, se puede colocar en el directorio public/ si no requieren ninguna transformación o en el directorio assets/ si se importan directamente.

? ‍¿Astronauta experimentado? Elimine este archivo README.md . Actualice src/config.yaml y contenidos. ¡Divertirse!

Comandos

Todos los comandos se ejecutan desde la raíz del proyecto, desde una terminal:

Dominio	Acción
`npm install`	Instala dependencias
`npm run dev`	Inicia el servidor de desarrollo local en `localhost:4321`
`npm run build`	Construya su sitio de producción en `./dist/`
`npm run preview`	Obtenga una vista previa de su compilación localmente, antes de implementarla
`npm run check`	Revisa tu proyecto en busca de errores
`npm run fix`	Ejecute Eslint y formatee códigos con Prettier
`npm run astro ...`	Ejecute comandos CLI como `astro add` , `astro preview`

Configuración

Archivo de configuración básica: ./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"

Personalizar diseño

Para personalizar familias de fuentes, colores o más elementos, consulte los siguientes archivos:

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

Desplegar

Implementar en producción (manual)

Puede crear una compilación de producción optimizada con:

npm run build

Ahora su sitio web está listo para ser implementado. Todos los archivos generados se encuentran en la carpeta dist , que puede implementar en cualquier servicio de alojamiento que prefiera.

Implementar en Netlify

Clona este repositorio en tu propia cuenta de GitHub e impleméntalo en Netlify:

Implementar en Vercel

Clona este repositorio en tu propia cuenta de GitHub e impleméntalo en Vercel:

Preguntas frecuentes

¿Por qué?

Proyectos relacionados

TailNext: plantilla gratuita que utiliza Next.js 14 y Tailwind CSS con la nueva App Router.
Qwind: plantilla gratuita para crear su sitio web usando Qwik + Tailwind CSS.

Contribuyendo

Si tiene alguna idea, sugerencia o encuentra algún error, no dude en abrir una discusión, un problema o crear una solicitud de extracción. Esto sería muy útil para todos nosotros y estaremos encantados de escucharlo y actuar.