Advertisement
  1. Web Design
  2. Jekyll

Configurando Jekyll para Páginas de GitHub en 60 Segundos

by
Read Time:3 minsLanguages:
This post is part of a series called 60 Second Video Tutorials.
Start Learning Web Design in 60 Seconds
Adobe XD in 60 Seconds

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

Jekyll puede ser usado con páginas de GitHub para crear sitios web simples. ¡Este video te mostrará cómo configurar el esqueleto de la estructura de archivos de Jekyll en 60 segundos!

Una vez que estás listo y en necesidad de inspiración, revisa lo que está disponible entre los temas de Jekyll en Envato Market.

Si prefirieras una explicación escrita, aquí está todo el proceso descrito en pasos claros:

Nuevo Proyecto

Primero, crea una carpeta en tu sistema para un nuevo repositorio. Has esto usando la terminal para navegar a donde quieras que esté tu nueva carpeta, después ingresando mkdir mysite. Nuestra nueva carpeta es llamada "mysite", pero puedes nombrarla como quieras.

Cambia el directorio a esta nueva carpeta ingresando cd mysite--una vez ahí crea un archivo de configuración ingresando el comando vim _config.yml. Tu ventana de terminal te mostrará los contenidos de este archivo, así que presiona i para entrar a modo insertar, después agrega el siguiente contenido:

Presiona Esc para dejar el modo insertar, después ingresa :x para guardar los cambios que has hecho.

Crear Index

Después necesitamos crear el documento index, así que ingresa vim index.md y como hiciste antes, agrega el siguiente contenido:

Agrega Carpeta de Layouts

Ahora crea un nuevo directorio ingresando mkdir_layouts y cambia a ese directorio con cd_layouts. Dale un documento de plantilla por defecto vim default.html y agrega el siguiente contenido:

Inicializa Nuevo Repositorio

Ahora necesitamos inicializar la carpeta como un nuevo repositorio y comprometer los cambios. Así que inicia navegando de vuelta a la raíz del proyecto con cd... Después ingresa git init, seguido de git add --all && git commit --all.

Empujando a GitHub

Cambia a GitHub vía el navegador y crea un nuevo repositorio.

Se te han dado unas cuantas opciones en este punto, así que toma los comandos en donde veas empujar un repositorio existente desde la línea de comando. Los comandos se leerán como:

Pega estos comandos en la terminal para empujar tu repositorio local a GitHub.

Ajustes de GitHub

Por último, en el los Ajustes de repositorio GitHub, opta por usar la rama maestra para Páginas GitHub, después da clic en Guardar.

Jekyll está todo configurado, ¡y tu sitio web está listo para ser construido!

Estructura de Archivos Jekyll, Explicada

  • _config.yml trabaja como el archivo de configuración de Jekyll. Esto es lo que las Páginas GitHub leen para ajustes globales de sitio como variables locales y más.
  • index.md es el documento index raíz del sitio web Páginas GitHub.
  • _layouts/default.html es el archivo de plantilla por defecto en la que se basará index.md.

Recursos Útiles

Para más información sobre construir sitios web estáticos usando Jekyll, ¡revisa los siguientes recursos en Envato Tuts+!


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.