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’re 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!