¿Qué es GitHub Pages?
Aquí trataremos el proceso de crear y mantener un sitio web de GitHub Pages.
GitHub Pages son sitios estáticos hospedados directamente desde el repositorio de GitHub, pero son más que una colección de archivos estáticos. Haciendo uso de tecnologías de generación de sitios, como Jekyll y Liquid, los desarrolladores definen plantillas dinámicas que se procesan en sitios web estáticos completos. Cada vez que se confirma un cambio en la rama de origen asociada al sitio, el sitio se vuelve a generar con las actualizaciones más recientes y se publica automáticamente en la dirección URL de destino.
Obtenga más información sobre los orígenes de publicación para sitios de GitHub Pages.
Habilitar GitHub Pages
El primer paso para usar GitHub Pages consiste en habilitarlo desde la pestaña Configuración del repositorio. Puede optar por usar la rama main, o bien especificar la carpeta docs que contiene. Si en algún momento le interesa deshabilitar GitHub Pages, puede hacerlo aquí.
Elegir un tema con Jekyll
Jekyll es el generador de sitios estáticos que usa GitHub para compilar el sitio web a partir del contenido del repositorio. Además de proporcionar una gran comodidad para el contenido, se ajusta a una convención de diseño estándar. Esta normalización de estilo permite los temas intercambiables, que puede seleccionar en la configuración de GitHub Pages.
GitHub proporciona varios temas. La comunidad de Jekyll también ofrece una gran variedad de temas comerciales y de código abierto.
Obtenga más información sobre los temas de Jekyll.
Uso del encabezado de YAML
El término encabezado hace referencia a los metadatos de YAML que se anteponen al contenido de un archivo. En el caso de Jekyll, estos metadatos incluyen instrucciones de generador que indican el estilo de diseño de una página de Markdown (post, page, etc.). También puede incluir metadatos de página, por ejemplo, el título del documento o las variables de contenido de la página, como el autor de una entrada de blog.
En el siguiente ejemplo se usa el diseño post. En este ejemplo se da por supuesto que hay un archivo _layouts/post.html que define el código HTML del contenedor. Se pueden ofrecer otras opciones de diseño agregando sus archivos HTML respectivos en la carpeta _layouts.
---
layout: post
title: This is set as the document title.
---
This is visible body content, which might use Markdown, HTML, and Liquid templating.
Obtenga más información sobre el encabezado de YAML.
Personalización del sitio
Una vez que el sitio esté en funcionamiento, puede personalizar los detalles del sitio a través de _config.yml. Este archivo incluye prácticamente todas las opciones de configuración del sitio, incluidos los metadatos, los menús de navegación, los colores del tema, las opciones del compilador y mucho más.
Obtenga más información sobre la configuración de _config.yml.
Creación y edición de contenido
La creación y edición de páginas del sitio sigue la experiencia estándar de GitHub. Los archivos que usa para su sitio web de GitHub Pages disfrutan de todas las mismas ventajas que otros archivos del repositorio de GitHub. Puede editarlos con cualquier herramienta, crear y combinar ramas, y vincularlos con incidencias o solicitudes de incorporación de cambios.
Además de Markdown y HTML, Jekyll admite la sintaxis del lenguaje de plantilla Liquid. Liquid permite a los usuarios insertar dinámicamente variables y construcciones básicas de flujo lógico en sus archivos de contenido. Cuando se compila, el producto final es HTML estándar.
En el ejemplo siguiente se muestra una combinación del bucle de for y la inserción de variables.
<ul>
{% for post in site.posts %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
Obtenga más información sobre el lenguaje de plantilla Liquid.
Trabajo con entradas de blog
A pesar de no tener una base de datos con la que trabajar, Jekyll es compatible con el concepto de blog gracias a la convención _posts/2020-06-25-blog-post-name.md. Como puede deducir, todas las entradas de blog se almacenan en la carpeta _posts y usan la convención de fecha y nombre tal como se muestra. Durante la compilación, Jekyll procesa los archivos de esta carpeta para generar una lista de entradas de blog HTML.
En el ejemplo siguiente se muestra la estructura de una entrada de blog sencilla. Incluye metadatos para subtitle, tags y comments. Es posible que el tema que elija no admita estos metadatos.
---
layout: post
title: Blog post title rendered by theme
subtitle: Blog post subtitle rendered by theme
tags: welcoming
comments: true
---
This is the first line of rendered content in the post.
Obtenga más información sobre cómo agregar contenido al sitio de GitHub Pages con Jekyll.