Tutorial Jekyll
Guía completa de Jekyll - De cero a experto
Índice
- ¿Qué es Jekyll?
- Instalación y configuración
- Estructura de archivos
- Configuración básica
- Creando contenido
- Temas y personalización
- Plugins y extensiones
- Publicación y deployment
- Consejos avanzados
¿Qué es Jekyll?
Jekyll es un generador de sitios web estáticos de código abierto escrito en Ruby. Se utiliza principalmente para crear blogs y sitios web simples que no requieren una base de datos.
Características principales:
- Velocidad: Los sitios estáticos cargan muy rápido
- Seguridad: No hay base de datos que pueda ser comprometida
- Simplicidad: Fácil de mantener y actualizar
- Control de versiones: Puedes usar Git para gestionar tu contenido
- Hosting gratuito: Compatible con GitHub Pages
Casos de uso comunes:
- Blogs personales
- Documentación de proyectos
- Sitios web de portfolios
- Páginas de landing simples
- Sitios web académicos
Instalación y configuración
Prerrequisitos
# Verificar instalación ruby --version # Versión 2.7 o superior gem --version bundler --version # Instalar Jekyll gem install jekyll bundler
Crear tu primer sitio
# Crear nuevo sitio jekyll new mi-blog cd mi-blog # Instalar dependencias bundle install # Ejecutar servidor local bundle exec jekyll serve
Estructura de archivos
Estructura completa de un sitio Jekyll:
mi-sitio-jekyll/ ├── _config.yml # Configuración principal ├── _config_development.yml # Configuración para desarrollo ├── Gemfile # Dependencias de Ruby ├── Gemfile.lock # Versiones específicas ├── .gitignore # Archivos a ignorar en Git ├── README.md # Documentación del proyecto ├── index.md # Página principal ├── 404.md # Página de error 404 ├── about.md # Página "Acerca de" ├── contact.md # Página de contacto │ ├── _layouts/ # Plantillas base │ ├── default.html # Layout principal │ ├── post.html # Layout para posts │ ├── page.html # Layout para páginas │ └── home.html # Layout para página principal │ ├── _includes/ # Componentes reutilizables │ ├── header.html # Cabecera del sitio │ ├── footer.html # Pie de página │ ├── nav.html # Navegación │ ├── head.html # Meta tags y CSS │ └── sidebar.html # Barra lateral │ ├── _posts/ # Entradas del blog │ ├── 2024-01-01-mi-primer-post.md │ ├── 2024-01-15-segundo-post.md │ └── 2024-02-01-tercer-post.md │ ├── _drafts/ # Borradores (no publicados) │ ├── post-en-desarrollo.md │ └── ideas-futuras.md │ ├── _data/ # Archivos de datos │ ├── navigation.yml # Datos de navegación │ ├── authors.yml # Información de autores │ └── social.yml # Enlaces sociales │ ├── _sass/ # Archivos Sass/SCSS │ ├── _base.scss # Estilos base │ ├── _layout.scss # Estilos de layout │ ├── _syntax-highlighting.scss │ └── _custom.scss # Estilos personalizados │ ├── assets/ # Recursos estáticos │ ├── css/ │ │ └── main.scss # Archivo principal de CSS │ ├── js/ │ │ └── main.js # JavaScript personalizado │ ├── images/ │ │ ├── logo.png │ │ ├── avatar.jpg │ │ └── posts/ # Imágenes de posts │ └── fonts/ # Fuentes personalizadas │ └── _site/ # Sitio generado (no subir a Git) ├── index.html ├── about/ ├── assets/ └── ...
Carpetas que Jekyll entiende automáticamente:
_posts/
- Entradas del blog_drafts/
- Borradores no publicados_layouts/
- Plantillas base_includes/
- Componentes reutilizables_data/
- Archivos de datos_sass/
- Archivos Sass/SCSS_site/
- Sitio generado automáticamente
Configuración básica
_config.yml
mínimo:
title: Mi Blog description: Una descripción de mi sitio author: Tu Nombre url: "https://tuusuario.github.io" baseurl: "" markdown: kramdown highlighter: rouge
_config.yml
completo:
# Información básica del sitio title: Mi Blog Jekyll description: Un blog personal sobre tecnología y desarrollo author: Tu Nombre email: tu@email.com # URL del sitio url: "https://tuusuario.github.io" baseurl: "" # Configuración de construcción markdown: kramdown highlighter: rouge permalink: /:categories/:year/:month/:day/:title/ # Plugins básicos plugins: - jekyll-feed - jekyll-sitemap - jekyll-seo-tag # Configuración de kramdown kramdown: input: GFM hard_wrap: false syntax_highlighter: rouge # Archivos a excluir exclude: - README.md - Gemfile - Gemfile.lock - node_modules - vendor - .sass-cache - .jekyll-cache - .jekyll-metadata # Variables personalizadas social: twitter: tu_usuario github: tu_usuario linkedin: tu_usuario # Configuración de zona horaria timezone: Europe/Madrid # Configuración por defecto defaults: - scope: path: "" type: "posts" values: layout: "post" comments: true - scope: path: "" type: "pages" values: layout: "page"
Kramdown (procesador de Markdown)
Kramdown es el procesador de Markdown que Jekyll usa por defecto. Convierte archivos .md
en HTML con características especiales:
- Atributos HTML:
{: .mi-clase #mi-id}
- Tablas avanzadas con alineación
- Notas al pie:
[^1]
- Bloques de código con syntax highlighting
- Matemáticas (con MathJax)
Permalinks
Los permalinks determinan las URLs de tus páginas:
# Diferentes patrones permalink: /:categories/:year/:month/:day/:title/ # /blog/2024/01/01/mi-post/ permalink: pretty # /2024/01/01/mi-post/ permalink: /:categories/:title/ # /blog/mi-post/ permalink: /:title/ # /mi-post/
Creando contenido
Estructura de un post:
--- layout: post title: "Mi primer post" date: 2024-01-01 10:00:00 +0100 categories: blog tutorial tags: jekyll markdown author: Tu Nombre --- # Mi contenido Este es el contenido del post con **markdown**. ## Código de ejemplo ```javascript function hola() { console.log("¡Hola Jekyll!"); }
Esto es una cita importante
- Lista item 1
- Lista item 2 ```
Crear páginas:
--- layout: page title: Acerca de permalink: /about/ --- Información sobre ti o tu sitio...
Usar borradores:
# Crear borrador touch _drafts/mi-borrador.md # Mostrar borradores bundle exec jekyll serve --drafts
Temas y personalización
Temas populares:
- Minima - Tema por defecto de Jekyll
- Minimal Mistakes - Muy completo y configurable
- Beautiful Jekyll - Fácil de usar
- Academic - Para sitios académicos
Usar un tema:
# En _config.yml theme: minima # O tema remoto (GitHub Pages) remote_theme: "mmistakes/minimal-mistakes@4.24.0"
Personalizar temas:
Puedes sobrescribir cualquier archivo del tema creando el mismo archivo en tu sitio:
tu-sitio/ ├── _layouts/ │ └── post.html # Sobrescribe el layout del tema ├── _includes/ │ └── header.html # Sobrescribe el header del tema └── _sass/ └── custom.scss # Estilos personalizados
Plugins y extensiones
Plugins que soporta GitHub Pages:
- jekyll-feed - Feed RSS automático
- jekyll-sitemap - Sitemap para SEO
- jekyll-seo-tag - Meta tags SEO
- jekyll-paginate - Paginación de posts
- jemoji - Soporte emojis :smile:
Configuración de plugins:
plugins: - jekyll-feed - jekyll-sitemap - jekyll-seo-tag - jekyll-paginate - jemoji paginate: 5 paginate_path: "/blog/page:num/"
Limitaciones de GitHub Pages:
- Solo plugins oficiales
- No plugins de terceros
- No plugins personalizados
Alternativas:
- GitHub Actions - Para usar cualquier plugin
- Netlify/Vercel - Soporte completo de plugins
- Build local - Construir y subir manualmente
Publicación y deployment
Proceso básico para GitHub Pages:
- Crear repositorio:
tuusuario.github.io
- Subir código:
git init git add . git commit -m "Initial commit" git remote add origin https://github.com/tuusuario/tuusuario.github.io.git git push -u origin main
- Configurar GitHub Pages en Settings → Pages
- Tu sitio estará en:
https://tuusuario.github.io
Flujo de trabajo típico:
# 1. Crear nuevo post touch _posts/2024-01-01-mi-nuevo-post.md # 2. Escribir contenido # 3. Probar localmente bundle exec jekyll serve --drafts # 4. Publicar git add . git commit -m "Nuevo post: Mi nuevo post" git push origin main
Otras opciones de hosting:
- Netlify - Automático desde GitHub
- Vercel - Deploy automático
- Servidor propio - Subir carpeta
_site/
Consejos avanzados
Comandos útiles:
# Construir el sitio bundle exec jekyll build # Servidor local con live reload bundle exec jekyll serve --livereload # Limpiar archivos generados bundle exec jekyll clean # Actualizar dependencias bundle update # Mostrar versión jekyll --version
Optimización:
- Usa cache - Jekyll cachea automáticamente
- Optimiza imágenes - Comprime antes de subir
- Minifica CSS/JS - Usa plugins de minificación
- CDN - Para archivos estáticos grandes
SEO básico:
# En _config.yml title: Tu Título description: Descripción para motores de búsqueda url: "https://tudominio.com" plugins: - jekyll-seo-tag - jekyll-sitemap
<!-- En layouts --> <!-- Begin Jekyll SEO tag v2.8.0 --> <title>Tutorial Jekyll | Centro de Cálculo</title> <meta name="generator" content="Jekyll v4.4.1" /> <meta property="og:title" content="Tutorial Jekyll" /> <meta name="author" content="Centro de Cálculo ESIT" /> <meta property="og:locale" content="es" /> <meta name="description" content="Guía completa de Jekyll - De cero a experto" /> <meta property="og:description" content="Guía completa de Jekyll - De cero a experto" /> <link rel="canonical" href="https://universidad-de-la-laguna.github.io/esit-cc-web/posts/tutorial-jekyll/" /> <meta property="og:url" content="https://universidad-de-la-laguna.github.io/esit-cc-web/posts/tutorial-jekyll/" /> <meta property="og:site_name" content="Centro de Cálculo" /> <meta property="og:type" content="article" /> <meta property="article:published_time" content="2025-07-04T00:00:00+00:00" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="Tutorial Jekyll" /> <meta name="twitter:site" content="@ULL" /> <meta name="twitter:creator" content="@Centro de Cálculo ESIT" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"BlogPosting","author":{"@type":"Person","name":"Centro de Cálculo ESIT"},"dateModified":"2025-07-04T00:00:00+00:00","datePublished":"2025-07-04T00:00:00+00:00","description":"Guía completa de Jekyll - De cero a experto","headline":"Tutorial Jekyll","mainEntityOfPage":{"@type":"WebPage","@id":"https://universidad-de-la-laguna.github.io/esit-cc-web/posts/tutorial-jekyll/"},"url":"https://universidad-de-la-laguna.github.io/esit-cc-web/posts/tutorial-jekyll/"}</script> <!-- End Jekyll SEO tag -->
Solución de problemas:
# Error de dependencias bundle install bundle update # Error de permisos bundle install --path vendor/bundle # Sitio no actualiza bundle exec jekyll clean bundle exec jekyll build
Recursos adicionales
Documentación oficial:
Comunidad:
Temas:
¡Felicidades! Ahora tienes todo el conocimiento necesario para crear y mantener sitios web increíbles con Jekyll. 🚀
This post is licensed under CC BY 4.0 by the author.