馃嚭馃嚫 English | 馃嚜馃嚫 Espa帽ol

Empieza un proyecto en blanco con Jekyll y Tailwind

Jekyll es un generador de sitios est谩ticos desarrollado en Ruby. Es de los veteranos y de los m谩s sencillos de usar. Por defecto viene con demasiadas cosas que no necesito y siempre paso demasiado tiempo modificando cosas. Un d铆a descubr铆 que pod铆a inicializarlo completamente vac铆o y construir seg煤n mis necesidades.

脷ltimamente he tenido que desarrollar varios sitios y he decidido dejar una gu铆a paso a paso de c贸mo hacerlo.

Has de tener la gema Jekyll instalada en el sistema. Si no la tienes instalada, inst谩lala:

$ gem install jekyll

Seguidamente inicia un nuevo proyecto con la opci贸n --blank:

$ jekyll new sitename --blank

Al haber usado la opci贸n --blank no tenemos un fichero Gemfile. Cr茅alo:

$ bundle init

A帽ade jekyll y webrick al Gemfile. De acuerdo a la documentaci贸n, webrick solo es necesario si usas a partir de la versi贸n 3 de Ruby.

$ bundle add jekyll webrick

Con estos pasos ya est谩 listo Jekyll para ser usado. Para arrancar el servidor ejecuta:

$ bundle exec jekyll serve

Para ver el resultado debes acceder a http://localhost:4000 desde tu navegador.

La instalaci贸n que hemos hecho es muy b谩sica y no deber铆as ver mucho m谩s que un texto diciendo

You鈥檙e ready to go!

Start developing your Jekyll website.

TailwindCSS

Para instalar Tailwind vamos a usar las instrucciones oficiales de instalaci贸n con PostCSS adapt谩ndolas un poco a nuestras necesidades.

Por suerte hay un plugin de Jekyll que integra PostCSS y es el que vamos a usar.

Inst谩lalo usando Bundler, como hemos hecho con Jekyll y Webrick:

$ bundle add jekyll-postcss

Seguidamente edita el fichero _config.yml y a帽ade la siguiente configuraci贸n:

plugins:
  - jekyll-postcss

postcss:
  cache: false

Ahora toca instalar los paquetes de npm que necesitaremos:

$ npm install -D postcss autoprefixer cssnano tailwindcss

Tal y como se indica en la documentaci贸n del plugin, crea un fichero postcss.config.js con el siguiente contenido:

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    ...(process.env.JEKYLL_ENV == "production"
      ? [require("cssnano")({ preset: "default" })]
      : [])
  ]
};

El c贸digo de m谩s arriba 煤nicamente difiere del de la documentaci贸n en que he a帽adido el plugin de Tailwind.

Ahora toca finalmente a帽adir Tailwind. Para ello crea un fichero tailwind.config.js con el siguiente contenido:

module.exports = {
  content: [
    "./**/*.{md,html}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

La 煤nica diferencia respecto al c贸digo que viene en la documentaci贸n de Tailwind es en el content. He especificado el path y las extensiones a las que quiero que Tailwind afecte.

Para que funcione con Jekyll todav铆a hay que hacer un par de cambios.

Cambia la extensi贸n del fichero assets/css/main.scss a .css y sustituye su contenido por el siguiente:

---
---

@tailwind base;
@tailwind components;
@tailwind utilities;

Las dos l铆neas del principio son parte del YAML front matter y son necesarias para que Jekyll procese el fichero correctamente. Las siguientes tres l铆neas que comienzan por @tailwind son las directivas del framework. Lo que hacen es cargar la informaci贸n necesaria para que todas las clases y funcionalidades del framework est茅n disponibles.

Arranca de nuevo el servidor (esta vez con el live reload):

$ bundle exec jekyll serve --livereload  

Has de ver que el estilo del texto ha cambiado. Esto quiere decir que Tailwind est谩 funcionando.

Una 煤ltima prueba puede consistir en cambiar el color de fondo de la web. Ve al fichero _layouts/default.html y a帽ade class="bg-green-300" al body. En cuanto guardes los cambios el navegador deber铆a refrescarse autom谩ticamente cargando los nuevos estilos. 隆Ahora tienes el mismo color de fondo que esta web!

脷ltimos escritos

Proyectos

Recibe actualizaciones de mis proyectos

    Nombre
    Email

    D贸nde encontrarme