Entrada

Desplegar un sitio Jekyll desde GitHub

Publicado Actualizado
10 min de lectura
Netlify: Desplegar un sitio Jekyll desde GitHub

Requisitos previos

Antes de comenzar, necesitamos:

  • Un sitio Jekyll funcionando correctamente en local.

  • El proyecto versionado en un repositorio de GitHub.

  • Un archivo Gemfile (obligatorio).

Paso 1: Crear un proyecto

Vamos a comenzar creando un sitio en blanco:

1

jekyll new mi-blog-jekyll --blank

Al tratarse de un proyecto en blanco (--blank), el proceso de creación es inmediato y los mensajes se muestran casi al instante.

1

New jekyll site installed in /home/marco/workspace/mi-blog-jekyll.

Paso 2: Añadir Jekyll al proyecto

Una vez dentro del proyecto, desde la terminal inicializamos Bundler para generar el archivo Gemfile, el cual se utilizará para gestionar las dependencias del proyecto.

1

bundle init

Posteriormente, agregamos Jekyll como dependencia principal.

1

bundle add jekyll

Al concluir nos muestra los mensajes en la consola.

1
2
3
4
5
6
7
8
9
10
11
12
13

Writing new Gemfile to /home/marco/workspace/jekyll/mi-blog-jekyll/Gemfile
Fetching gem metadata from https://rubygems.org/...........
Resolving dependencies...
Fetching gem metadata from https://rubygems.org/..........
Resolving dependencies...
Fetching listen 3.10.0
Fetching google-protobuf 4.33.4 (x86_64-linux-gnu)
Fetching kramdown 2.5.2
Installing listen 3.10.0
Installing kramdown 2.5.2
Installing google-protobuf 4.33.4 (x86_64-linux-gnu)
Fetching sass-embedded 1.97.3 (x86_64-linux-gnu)
Installing sass-embedded 1.97.3 (x86_64-linux-gnu)

Podemos probar el sitio en local, usando el comando:

1

bundle exec jekyll serve

Nuevamente veremos mensajes en la consola. En este caso, es un aviso común relacionado con el uso deprecado de la directiva @import en Sass. Aunque se recomienda migrar a @use, este warning no afecta el funcionamiento del proyecto ni el proceso de compilación, por lo que podemos dejarlo tal cual por ahora.

Configuration file: /home/marco/workspace/jekyll/mi-blog-jekyll/_config.yml
            Source: /home/marco/workspace/jekyll/mi-blog-jekyll
       Destination: /home/marco/workspace/jekyll/mi-blog-jekyll/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
Deprecation Warning [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

  ╷
1 │ @import "base";
  │         ^^^^^^
  ╵
    /home/marco/workspace/jekyll/mi-blog-jekyll/assets/css/main.scss 1:9  root stylesheet
                    done in 0.044 seconds.
 Auto-regeneration: enabled for '/home/marco/workspace/jekyll/mi-blog-jekyll'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.
  • No es necesario instalar Jekyll como gema global
  • Jekyll se ejecutará siempre a través de Bundler
  • Netlify detecta automáticamente el Gemfile y ejecuta bundle install

Entonces estamos listos para continuar.

Paso 3: Subir el proyecto a GitHub

En este punto, ya puedes subir el proyecto a GitHub de la forma que te resulte más cómoda. Este flujo ya lo vimos en el artículo sobre desplegar sitios web desde un repositorio, así que aquí nos limitaremos a repasar los comandos básicos necesarios para dejar el proyecto versionado y disponible de forma remota.

Primero, inicializa el repositorio Git dentro del proyecto:

1

git init

Luego, agrega todos los archivos al área de staging:

1

git add .

Confirma los cambios creando el primer commit:

1

git commit -m "first commit"

A continuación, agrega el repositorio remoto (que previamente debiste haber creado en GitHub). En este ejemplo:

1

git remote add origin https://github.com/mcherrera-dev/mi-blog-jekyll.git

Finalmente, sube el contenido del proyecto al repositorio remoto utilizando push:

1

git push origin main

A continuación, puedes observar los archivos que vamos a subir a Netlify. Para este ejemplo, se han añadido algunos posts de prueba y estilos mínimos con el fin de ilustrar la estructura del proyecto.

FOLDERS
    Sin archivo x
              
        
            ---
---

@use "base";

        
      
              
        
            <!DOCTYPE html>
<html lang="{{ site.lang | default: "es-ES" }}">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>{{ page.title }} - {{ site.title }}</title>
    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
  </head>
  <body>

    <h1 align="center"><a href={{ "/" | relative_url }}>Blog</a></h1>

    {{ content }}

  </body>
</html>

        
      
              
        
            ---
layout: default
---

<article class="post">
  <header>
    <h1>{{ page.title }}</h1>

    <p class="post-meta">
      {{ page.date | date: "%d-%m-%Y" }}
    </p>
  </header>

  {{ content }}

  <footer class="post-footer">
    <a href="{{ "/" | relative_url }}">← Volver al inicio</a>
  </footer>
</article>

        
      
              
        
            ---
layout: post
title: "Introducción a Netlify"
categories: [netlify]
---


Netlify es una plataforma enfocada en el despliegue de sitios estáticos y aplicaciones modernas.
Permite publicar proyectos de forma rápida, segura y sin necesidad de administrar servidores.

En esta serie veremos cómo desplegar sitios paso a paso, comenzando desde lo más básico.

        
      
              
        
            ---
layout: post
title: "Deploy manual en Netlify"
categories: [netlify, deploy]
---

El deploy manual es la forma más rápida de publicar un sitio en Netlify.
Solo necesitas arrastrar la carpeta del proyecto ya construida al panel de la plataforma.

Este método es ideal para pruebas rápidas o proyectos pequeños.

        
      
              
        
            ---
layout: post
title: "Cambiar la URL del sitio en Netlify"
categories: [netlify, configuracion]
---

Cuando publicas un sitio en Netlify, se genera una URL automática.
Aunque funciona bien, suele ser larga y poco amigable.

Desde la configuración del proyecto puedes cambiar el nombre del sitio y obtener una URL más clara y fácil de compartir.

        
      
              
        
            ---
layout: post
title: "Desplegar un sitio desde GitHub en Netlify"
categories: [netlify, deploy]
---

Una de las principales ventajas de Netlify es su integración directa con repositorios Git.
Al conectar un proyecto desde GitHub, cada cambio que se envía al repositorio puede generar un nuevo despliegue automático.

Este enfoque es ideal para proyectos en constante evolución y facilita enormemente el flujo de trabajo.

        
      
              
        
            ---
layout: post
title: "Configuración básica de un proyecto en Netlify"
categories: [netlify, configuracion]
---

Luego de desplegar un sitio, Netlify ofrece varias opciones de configuración inicial.
Entre ellas se encuentran el manejo de dominios, variables de entorno y ajustes de build.

Con una configuración básica correcta, el proyecto queda listo para escalar o integrarse con otros servicios.

        
      
              
        
            $backgroundColor: #ffffff;
$bodyColor: #000000;
$bodyFont: -apple-system, BlinkMacSystemFont, "Segoe UI",
  Helvetica, Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol";

$mutedColor: #6b7280;

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: $backgroundColor;
  color: $bodyColor;
  font-family: $bodyFont;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  line-height: 1.6;
}

/* Tipografía básica */

h1, h2, h3, h4, h5, h6 {
  line-height: 1.25;
  margin: 2rem 0 1rem;
  font-weight: 600;
}

h1 {
  font-size: 2.25rem;
}

h2 {
  font-size: 1.75rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: #2563eb;            /* azul sobrio */
  text-decoration: none;     /* sin subrayado */
  transition: color 0.2s ease;
}

a:hover {
  color: #1e40af;            /* azul un poco más oscuro */
  text-decoration: underline;
}

a:visited {
  color: #4f46e5;            /* mantiene coherencia */
}

code {
  font-family: monospace;
  background: #f3f4f6;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
  font-size: 0.95em;
}

pre {
  background: #f3f4f6;
  padding: 1rem;
  overflow-x: auto;
  border-radius: 6px;
}


ul, ol {
  padding-left: 1.25rem;
  margin: 1rem 0;
  list-style: none;
}

.post-item {
  margin-bottom: 0.8rem;
  border: 1px solid black;
  padding: 0.5rem;
}

hr {
  border: none;
  border-top: 1px solid #e5e7eb;
  margin: 2rem 0;
}


footer {
  margin-top: 4rem;
  padding-top: 2rem;
  font-size: 0.9rem;
  color: $mutedColor;
  border-top: 1px solid #e5e7eb;
}

        
      
              
        
            url: "" # the base hostname & protocol for your site, e.g. http://example.com
baseurl: "" # the subpath of your site, e.g. /blog
title: "" # the name of your site, e.g. ACME Corp.

plugins:
  - jekyll-paginate

paginate: 3
paginate_path: "/page:num/"

        
      
              
        
            # frozen_string_literal: true

source "https://rubygems.org"

# gem "rails"

gem "jekyll", "~> 4.4"
gem "jekyll-paginate"

        
      
              
        
            GEM
  remote: https://rubygems.org/
  specs:
    addressable (2.8.8)
      public_suffix (>= 2.0.2, < 8.0)
    base64 (0.3.0)
    bigdecimal (4.0.1)
    colorator (1.1.0)
    concurrent-ruby (1.3.6)
    csv (3.3.5)
    em-websocket (0.5.3)
      eventmachine (>= 0.12.9)
      http_parser.rb (~> 0)
    eventmachine (1.2.7)
    ffi (1.17.3-x86_64-linux-gnu)
    forwardable-extended (2.6.0)
    google-protobuf (4.33.4-x86_64-linux-gnu)
      bigdecimal
      rake (>= 13)
    http_parser.rb (0.8.1)
    i18n (1.14.8)
      concurrent-ruby (~> 1.0)
    jekyll (4.4.1)
      addressable (~> 2.4)
      base64 (~> 0.2)
      colorator (~> 1.0)
      csv (~> 3.0)
      em-websocket (~> 0.5)
      i18n (~> 1.0)
      jekyll-sass-converter (>= 2.0, < 4.0)
      jekyll-watch (~> 2.0)
      json (~> 2.6)
      kramdown (~> 2.3, >= 2.3.1)
      kramdown-parser-gfm (~> 1.0)
      liquid (~> 4.0)
      mercenary (~> 0.3, >= 0.3.6)
      pathutil (~> 0.9)
      rouge (>= 3.0, < 5.0)
      safe_yaml (~> 1.0)
      terminal-table (>= 1.8, < 4.0)
      webrick (~> 1.7)
    jekyll-paginate (1.1.0)
    jekyll-sass-converter (3.1.0)
      sass-embedded (~> 1.75)
    jekyll-watch (2.2.1)
      listen (~> 3.0)
    json (2.18.0)
    kramdown (2.5.2)
      rexml (>= 3.4.4)
    kramdown-parser-gfm (1.1.0)
      kramdown (~> 2.0)
    liquid (4.0.4)
    listen (3.10.0)
      logger
      rb-fsevent (~> 0.10, >= 0.10.3)
      rb-inotify (~> 0.9, >= 0.9.10)
    logger (1.7.0)
    mercenary (0.4.0)
    pathutil (0.16.2)
      forwardable-extended (~> 2.6)
    public_suffix (7.0.2)
    rake (13.3.1)
    rb-fsevent (0.11.2)
    rb-inotify (0.11.1)
      ffi (~> 1.0)
    rexml (3.4.4)
    rouge (4.7.0)
    safe_yaml (1.0.5)
    sass-embedded (1.97.3-x86_64-linux-gnu)
      google-protobuf (~> 4.31)
    terminal-table (3.0.2)
      unicode-display_width (>= 1.1.1, < 3)
    unicode-display_width (2.6.0)
    webrick (1.9.2)

PLATFORMS
  x86_64-linux

DEPENDENCIES
  jekyll (~> 4.4)
  jekyll-paginate

BUNDLED WITH
   2.4.19

        
      
              
        
            ### Jekyll ###
_site/
.sass-cache/
.jekyll-cache/
.jekyll-metadata
# Ignore folders generated by Bundler
.bundle/
vendor/

        
      
              
        
            ---
layout: default
title: Blog
---

<ul>
  {% for post in paginator.posts %}
    <li class="post-item">
      <a href="{{ post.url | relative_url }}">
        {{ post.title }}
      </a>
      <small>— {{ post.date | date: "%d-%m-%Y" }}</small>
      <p>{{ post.excerpt }}</p>
    </li>
  {% endfor %}
</ul>

<nav class="pagination">
  {% if paginator.previous_page %}
    <a href="{{ paginator.previous_page_path }}">
      ← Más recientes
    </a>
  {% endif %}

  {% if paginator.next_page %}
    <a href="{{ paginator.next_page_path }}">
      Más antiguos →
    </a>
  {% endif %}
</nav>

    Selecciona un archivo para ver su contenido

    Paso 4: Seleccionar el repo y configurar el build

    En este punto, ya sabemos que debemos crear un nuevo sitio a partir de un repositorio, utilizando GitHub como proveedor de código. Para ello, seleccionamos GitHub, autorizamos el acceso si es necesario y luego elegimos el repositorio que queremos desplegar.

    Seleccionar repositorio Seleccionar repositorio

    A continuación, asignamos un nombre al proyecto, el cual se utilizará para generar la URL pública con la que el sitio quedará disponible una vez finalizado el despliegue.

    Asignar nombre a la URL Asignar nombre a la URL

    La configuración del build debe definirse exactamente como se muestra a continuación, ya que Netlify utiliza estos valores para saber cómo construir el proyecto y qué directorio publicar.

    Configuración del build Configuración del build

    Como se puede observar, Netlify detecta automáticamente la rama principal (main), define el comando de build y reconoce la carpeta de salida que debe publicarse; en el caso de Jekyll, _site.

    Finalmente, bajamos hasta el botón para desplegar el sitio.

    Desplegar el sitio Desplegar el sitio

    Y ahora, es cosa de esperar a que finalice el proceso y poder visitar el sitio.

    Sitio desplegado Sitio desplegado

    https://mi-blog-jekyll.netlify.app/

    Desplegar un sitio Jekyll en Netlify desde GitHub es un proceso sencillo si se entiende cómo funciona Bundler y la configuración de entornos.

    Netlify , Deploy
    Esta entrada está licenciada bajo CC BY 4.0 por el autor.