Static Site With Tailwind

Sitio estático (con viento de cola)

La pila

• HTML
• Viento de cola

como correr

DESARROLLO

• Ejecute yarn serve:dev Esto servirá src con index.html como punto de entrada.

• En una segunda terminal ejecute yarn watch . Esto observará todos los archivos dentro de src/ y sabrá recompilar app.css con cualquier nuevo estilo de viento de cola que se haya agregado a lo largo del camino.

Nota: hay un poco de retraso aquí antes de presionar actualizar... "Oye, esta no es una aplicación elegante de React KISS y simplemente presiona el botón de actualización".

• Para compilar Tailwind CSS manualmente para dev sin mirar ejecutar yarn compile:css:dev

Edificio para la producción

Entonces realmente quieres implementar esta cosa...

• Ejecute yarn build:all para hacer "todas las cosas". Esto copiará todos los archivos *.html a un directorio /build y compilará app.css con NODE_ENV=production . Esto le indica a Tailwind que use nuestra opción purge preestablecida de tailwind.config.js

• Copie este directorio /build a cualquier sitio de alojamiento estático... O dígale a su sitio de alojamiento estático que utilice /build/index.html como punto de entrada.

Nota: Después de compilar, también puede publicar esta compilación localmente para ver cómo se verá "prod" ejecutando yarn serve:prod . Esto mostrará el directorio build en lugar de src para verlo con el código recién compilado.

Enrutamiento

¿Cómo creo algunas URL limpias para páginas nuevas? Agregue un archivo vercel.json con routes definidas y deje que Vercel se encargue del resto.

 {
  "version": 2,
  "routes": [
    {"src": "/about", "dest": "/about.html"}
  ]
}

Para obtener más detalles, consulte sus documentos aquí.

Eso es todo

Eso es todo amigos... Introduzcan algo de HTML estático, vinculen index.css y diviértanse.

Alojamiento con Vercel

Vincular el repositorio y la configuración

Vista previa de la implementación

¡Hecho!