Las páginas web estáticas se han vuelto de moda y con buena razón, son increíblemente rápidas y con un número cada vez mayor de servicios de alojamiento compatibles, bastante fáciles de configurar.

No voy a entrar en todos los quién, qué, cuándo, dónde o por qué de las web estáticas. Asumo que tienes al menos una vaga idea de lo que son o sólo quieres crear tu propia página web estática, asimismo no te importan los demás detalles. De cualquier manera esta publicación es para ti.

Primero, quiero que sepas que estoy escribiendo esto para una audiencia tan amplia como sea posible; tu no necesitas ningún conocimiento de programación para seguirlo, aunque un poco de familiaridad con la línea de comandos y Git ayudará mucho.

Entonces, ¿cómo puedes crear una página web estática con GitHub en 10 minutos?

Nosotros trabajaremos con dos herramientas específicas: GitHub Pages, que está específicamente diseñado para servir contenido estático y un generador de contenido estático llamado Jekyll.

Jekyll es una gema de Ruby para crear sitios web estáticos fácilmente, por lo que necesitarás tener Ruby instalado en tu computador si quieres usar Jekyll. Si, tú tienes OSX lo más probable es que ya tengas una versión de Ruby (aunque puede que tú necesites actualizarla). Si no lo tienes o estás en un ordenador con Windows, tú puedes aprender más sobre su instalación aquí: Instalando Ruby.

Con eso fuera del camino, abrir una nueva ventana con la terminal y escribe gem install bundler jekyll. Esto instalará Bundler (una herramienta de gestión de paquetes de Ruby asimismo Jekyll).

Una vez que esas gemas (paquetes de Ruby) se hayan instalado, escribe Jekyll new mi-sitio-estatico (llámalo como quieras) que ejecutará el generador de Jekyll para crear tu proyecto en un nuevo directorio. Después de que tu sitio sea creado, salta al directorio del sitio recién creado escribiendo cd mi-sitio-estatico (o cd como sea que llames a tu proyecto).

Abre tu proyecto en un editor de texto y tú verás varios archivos y carpetas que Jekyll creadas por ti. Ahora mismo sólo tienes que preocuparte por el Gemfile (no el Gemfile.lock). El Gemfile es un archivo de Ruby que maneja todos los paquetes asociados de Ruby necesarios para ejecutar un proyecto.

El archivo contendrá una línea con la versión de Jekyll, coméntala:

#gem "jekyll", "~> 4.0.0"

Entonces, añade esta línea:

gem "github-pages", group: :jekyll_plugins

A veces las gemas de las que depende están desactualizadas o las gemas que has instalado localmente son demasiado modernas para GitHub Pages.

He descubierto que esto puede dificultar la construcción y la prueba de mi página web de Jekyll localmente. Puede ser más fácil probar tu sitio localmente y guardar la construcción hasta que esté listo para el despliegue. Sin embargo, en el momento de escribir esto puedes especificar estas versiones de dependencia en tu Gemfile y Jekyll funcionará tanto localmente como con GitHub Pages:

gem "jekyll", "~> 3.8.5"
gem "github-pages","~> 202" , group: :jekyll_plugins
group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.11.0"
end

Gracias a Alex Waibel en StackOverflow por la configuración más reciente.

Para ver tu sitio web en acción, ejecute bundle exec Jekyll serve  en la línea de comandos. Esto iniciará un servidor y podrás ver tu sitio web escribiendo localhost:4000 en la barra de direcciones de tu navegador.

¡Felicitaciones! Has creado un sitio web estático con Jekyll y estás en el directorio del proyecto. Ya has terminado el 50%.

Pongamos esto en línea

Ve a GitHub.com y regístrate o si ya tienes una cuenta selecciona el botón "nuevo" y crea un repositorio. Es importante que le pongas un nombre a tu repositorio, después del enlace que servirá tu cuenta de GitHub Pages, que es tú_nombredeusuario.github.io. Por ejemplo, mi nombre de usuario de GitHub es tfantina y mi blog es tfantina.github.io, por lo que mi repositorio GitHub se llama: "tfantina.github.io".

Vuelve a la ventana de tu terminal, sube tu sitio Jekyll desde tu computadora hasta GitHub ejecutando los siguientes comandos:

git init
git remote add origin git@github.com:<tu-nombre_usuario>/<tu_nombre_del_repo>.git
git commit -am “Configurando Jekyll!”
git push -u origin master
Comandos de git

(Al sustituir el nombre de usuario y el nombre del proyecto, tú no necesitas abrir o cerrar <>).

Una vez que tus cambios han sido subidos a tu repositorio, tú deberías tener un sitio web estático que funcione. Esto se debe a que estás usando la gema GitHub Pages y has nombrado tu repositorio de tal manera que GitHub entienda que quieres alojarlo con GitHub Pages.

Tú puedes confirmarlo visitando tu sitio o entrando en la pestaña de configuración de GitHub y desplazándote a la sección de páginas. Tú deberías ver un botón verde que muestra dónde se ha publicado tu sitio:

Tú también notarás que se puede cambiar fácilmente el tema desde aquí también. GitHub ofrece algunos temas predeterminados para Jekyll, pero por supuesto también puedes crear propios.

Si tu sitio web dice que está publicado, pero se ve en blanco, es posible que tengas que hacer una refrescar la página o intentar mirar tu sitio en una ventana privada. Esto puede parecer obvio, pero pasa usualmente cada vez que configuro una nueva instancia de Jekyll.

Si, todo va de acuerdo con el plan, tu sitio debería verse algo como esto:

Bienvenida Jekyll

Ahí lo tienes - en pocos minutos has creado y desplegado un sitio web estático con GitHub Page. Pero, tú probablemente quieras ser capaz de poner algo de contenido en tu página.

Prometí que esto sólo tomaría diez minutos, así que no me sumergiré en todos los detalles de las páginas, la portada o el lenguaje de plantillas de Liquid. Eso es una publicación para otro día. En este instante compartiré cómo crear tu primera publicación.

De vuelta en tu editor de texto, abre la carpeta "_posts".  Ya hay una entrada que te da la bienvenida a tu nuevo blog. Crea un nuevo archivo de anotaciones y guárdalo con un nombre en este formato: AÑO-MES-DÍA-TÍTULO.markdown (ver abajo):

Una publicación de Jekyll contiene dos secciones: portada y cuerpo.

La portada da instrucciones específicas a Jekyll, como cuál va a ser el título de la publicación, qué diseño usar y cuándo fue escrito la publicación.

La portada es altamente personalizable. Por ejemplo, quería que mis mensajes tuvieran imágenes de héroes, así que creé una etiqueta lead_image y puse algo de sintaxis en mi diseño para comprobar específicamente si hay imágenes "lead" en el material de portada de cada publicación. El lenguaje de plantillas Liquid facilita la incorporación de contenido del material de portada en el tema.

Hay mucho más que se puede hacer con la portada, pero empecemos con un ejemplo genérico.

La portada por defecto se ve así:

—
layout: post 
title:  "Welcome to Jekyll!"
date:   2019-11-09 18:07:11 -0600
categories: jekyll update
—
Portada por defecto
  • El diseño le dice a Jekyll en qué parte quieres que se muestre el contenido. Tú puedes tener varios diseños para diferentes páginas o tipos de publicaciones.
  • El título de la publicación.
  • Fecha de la publicación.
  • Categorías, que son esencialmente etiquetas. Tú puedes añadir tantas o tan pocas como quieras separadas por espacios.

Después de la portada, tu publicación puede ser escrito en Markdown, lo que te da mucha flexibilidad para escribir el contenido de tu publicación.

Una vez tu publicación este finalmente guardado, abre una ventana terminal  

git commit -am “Públicar"
git push
Comando git

Después de un minuto (y tal vez un refresco), tú podrás ver tu publicación.

¡Espero que ahora tengas un sitio web estático en GitHub Pages creado con Jekyll! Si tienes algún problema o pregunta por favor hazme un tweet @tfantina, o puedes mandarme un correo electrónico a contact@travisfantina.com.

Traducido del artículo - How to create a free static site with GitHub Pages in 10 minutes del autor Travis Fantina