Configurar el tema Chirpy en Jekyll

Chirpy es un tema elegante y rico en funciones para Jekyll, ideal para blogs personales y páginas alojadas en GitHub Pages. En esta guía, te mostraré cómo configurarlo desde cero.

1. Requisitos previos

Antes de empezar, asegúrate de tener:

• Git
• Ruby (preferiblemente ≥ 2.7)
• Bundler (gem install bundler)
• Jekyll (gem install jekyll)
• Node.js y Yarn (necesarios para los activos como JS/CSS)

2. Configuración Local

Paso 1: Clonar el repsotorio del tema Chirpy

Clona el repositorio oficial de Chirpy:

git clone https://github.com/cotes2020/jekyll-theme-chirpy.git my_blog
cd my_blog

Paso 2: Ejecutar el script inicializador init.sh

Ejecuta el script init.sh (esto limpia cosas del tema demo y te da un punto limpio):

bash tools/init.sh

Este script:

• Elimina el historial de git del tema original
• Cambia algunas configuraciones básicas
• Inicializa tu propio repositorio

Asegúrate de darle permisos de ejecución si no lo tiene: chmod +x tools/init.sh

Paso 3: Instalar dependencias

Después de ejecutar init.sh, instala las dependencias:

bundle install

Paso 4: Servir localmente

Ya con todo listo, puedes correr el servidor local de Jekyll:

bash tools/run.sh

Abre en tu navegador: http://localhost:4000

Puedes ver que el tema está correctamente configurado y se presenta de forma limpia y listo para trabajar:

3. Configuraciones Extras

Configurar opciones en el config.yml

Revisa y edita _config.yml según tus necesidades. Algunos cambios útiles:

title: Tu Blog
tagline: Una frase corta
url: "https://tu-usuario.github.io"
baseurl: "" # si lo estás sirviendo desde la raíz

Por ejemplo, a continuación cambiamos el title, tagline y el idioma lang:

Recuerda que cada vez que realices cambios en el archivo _config.yml debes reiniciar el servidor para que se apliquen correctamente.

Más abajo en el archivo encontrarás la opción para cambiar el avatar del sidebar.

avatar: "assets/tu-avatar.png" # igual puede ser una imagen remota

Cambiar los favicons

El tema Chirpy ya está preparado para funcionar como una PWA, por lo que es importante reemplazar los favicons e íconos por los tuyos. Estos son visibles tanto al instalar el sitio como al compartir enlaces, mejorando la apariencia y la identidad de tu página.

Para generar los favicons de forma más cómoda, puedes usar la herramienta Real Favicon Generator. Solo necesitas subir un logo en alta resolución, y la plataforma generará automáticamente un archivo .zip con todos los íconos en distintos tamaños y formatos, además del código listo para integrarlos.

Arrastrar imagen a la herramienta Real Favicon Generator

Una vez generados los favicons, reemplaza únicamente los archivos de imágenes en el directorio:

assets/img/favicons

Despliegue en GitHub Pages

Crea un nuevo repositorio en GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/tu-usuario/tu-repo.git
git push -u origin main

Asegúrate de tener un flujo de despliegue. Chirpy ya incluye uno en .github/workflows/pages-deploy.yml. GitHub Actions se encargará de desplegar automáticamente.

En la configuración del repositorio en GitHub, activa GitHub Pages en la rama main (o en la rama gh-pages si decides usar despliegue automático).