Agregar un tema a tu sitio de Páginas de GitHub con Jekyll

Puedes personalizar tu sitio Jekyll agregando y personalizando un tema.

¿Quién puede utilizar esta característica?

GitHub Pages is available in public repositories with GitHub Free and GitHub Free for organizations, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server. For more information, see "GitHub’s plans."

GitHub Pages now uses GitHub Actions to execute the Jekyll build. When using a branch as the source of your build, GitHub Actions must be enabled in your repository if you want to use the built-in Jekyll workflow. Alternatively, if GitHub Actions is unavailable or disabled, adding a .nojekyll file to the root of your source branch will bypass the Jekyll build process and deploy the content directly. For more information on enabling GitHub Actions, see "Managing GitHub Actions settings for a repository."

En este artículo

Las personas con permisos de escritura para un repositorio pueden agregar un tema a un sitio de GitHub Pages con Jekyll.

Si publicas desde una rama, los cambios en tu sitio se publican automáticamente cuando se fusionan con la fuente de publicación de tu sitio. Si publicas desde un flujo de trabajo de GitHub Actions personalizado, los cambios se publican cuando se desencadene el flujo de trabajo (normalmente mediante una inserción en la rama predeterminada). Si quieres previsualizar tus cambios primero, puedes hacer los cambios localmente en vez de en GitHub. Después, prueba tu sitio localmente. Para obtener más información, vea «Probar tu sitio de Páginas de GitHub localmente con Jekyll».

Agregar un tema

  1. En GitHub, navega al repositorio de tu sitio.
  2. Navega a la fuente de publicación para tu sitio. Para obtener más información, vea «Configurar una fuente de publicación para tu sitio de Páginas de GitHub».
  3. Ve a config.yml.
  4. En la esquina superior derecha de la vista de archivos, haz clic en para abrir el editor de archivos.

Captura de pantalla de un archivo. En el encabezado, un botón (etiquetado con un icono de lápiz) está resaltado en naranja oscuro.

Nota: En lugar de editar y confirmar el archivo con el editor de archivos predeterminado, puedes optar por usar el editor de código github.dev; para ello, selecciona el menú desplegable y haz clic en github.dev. También puedes clonar el repositorio y editar el archivo localmente a través de GitHub Desktop haciendo clic en GitHub Desktop .

Captura de pantalla de un archivo. En el encabezado, un icono de triángulo hacia abajo está resaltado en naranja oscuro.

1. Agrega una nueva línea al archivo para el nombre del tema. * Para usar un tema compatible, escribe `theme: THEME-NAME`, reemplazando _THEME-NAME_ por el nombre del tema como se muestra en el `_config.yml` del repositorio del tema (la mayoría de los temas siguen una convención de nomenclatura `jekyll-theme-NAME`). Para obtener una lista de los temas compatibles, consulte "[Temas admitidos](https://pages.github.com/themes/)" en el sitio GitHub Pages. Por ejemplo, para seleccionar el tema minimalista, escribe `theme: jekyll-theme-minimal`. * Para usar cualquier otro tema de Jekyll hospedado en GitHub, escriba `remote_theme: THEME-NAME` reemplazando THEME-NAME por el nombre del tema como se muestra en el archivo README del repositorio del tema.

  1. Haz clic en Confirmar cambios... .

  2. En el campo de "Mensaje de confirmación", escriba un mensaje de confirmación corto y significativo que describa la modificación que hizo en el archivo. Puedes atribuir el cambio a mas de un autor en el mensaje del mismo. Para obtener más información, vea «Crear una confirmación con distintos autores».

  3. Si tiene más de una dirección de correo electrónico asociada a la cuenta en , haga clic en el menú desplegable de la dirección de correo electrónico y seleccione la que se usará como dirección de correo electrónico del creador de Git. Únicamente las direcciones de correo electrónico verificadas aparecen en el menú desplegable. Si ha habilitado la privacidad de la dirección de correo electrónico, una dirección de correo electrónico no responder del creador de la confirmación será la predeterminada. Para obtener más información sobre el formulario exacto que puede tomar la dirección de correo electrónico sin respuesta, consulte "Configurar tu dirección de correo electrónico de confirmación".

    Captura de pantalla de una solicitud de cambios de GitHub en la que se muestra un menú desplegable con opciones para elegir la dirección de correo electrónico del creador de la confirmación. octocat@github.com aparece como que se seleccionó.

  4. Debajo de los campos para el mensaje de confirmación, decide si deseas agregar tu confirmación a la rama actual o a una rama nueva. Debajo de los campos del mensaje de confirmación, decide si deseas agregar tu confirmación a la rama actual o a una nueva rama. Si tu rama actual es la rama predeterminada, debes elegir crear una nueva rama para tu confirmación y después crear una solicitud de extracción. Para obtener más información, vea «Crear una solicitud de incorporación de cambios».

    Captura de pantalla de una solicitud de cambios de GitHub en la que se muestra un botón de radio para confirmar directamente en la rama principal o para crear una nueva rama. Aparece seleccionada la opción de rama nueva.

  5. Haz clic en Confirmar cambios o Proponer cambios.

Personalizar el CSS de tu tema

Estas instrucciones funcionan mejor con temas que son compatibles de forma oficial con GitHub Pages. Para obtener una lista completa de los temas compatibles, vea "Temas admitidos" en el sitio GitHub Pages.

El repositorio fuente de tu tema podría ofrecer algo de ayuda para personalizarlo. Por ejemplo, consulta LÉAME minimalista.

  1. En GitHub, navega al repositorio de tu sitio.

  2. Navega a la fuente de publicación para tu sitio. Para obtener más información, vea «Configurar una fuente de publicación para tu sitio de Páginas de GitHub».

  3. Cree un nuevo archivo denominado /assets/css/style.scss.

  4. Agrega el siguiente contenido en la parte superior del archivo:

    ---
---

@import "{{ site.theme }}";

  5. Agregue cualquier CSS o Sass personalizado (incluidas las importaciones) que desee colocar inmediatamente después de la línea @import.

Personalizar el diseño HTML de tu tema

Estas instrucciones funcionan mejor con temas que son compatibles de forma oficial con GitHub Pages. Para obtener una lista completa de los temas compatibles, vea "Temas admitidos" en el sitio GitHub Pages.

El repositorio fuente de tu tema podría ofrecer algo de ayuda para personalizarlo. Por ejemplo, consulta LÉAME minimalista.

  1. En GitHub, desplázate hasta el repositorio fuente de tu tema. Por ejemplo, el repositorio de origen del tema minimalista es https://github.com/pages-themes/minimal.
  2. En la carpeta layouts, ve al archivo default.html del tema.
  3. Copie el contenido del archivo.
  4. En GitHub, navega al repositorio de tu sitio.
  5. Navega a la fuente de publicación para tu sitio. Para obtener más información, vea «Configurar una fuente de publicación para tu sitio de Páginas de GitHub».
  6. Crea un archivo llamado layouts/default.html.
  7. Pega el contenido del diseño personalizado que copiaste anteriormente.
  8. Personaliza el diseño como desees.

Información adicional