Configurando Jekyll para GitHub Pages en 60 segundos

Jekyll se puede utilizar con GitHub Pages para crear sitios web estáticos sencillos y que tengan en cuenta los blogs. Este video le mostrará cómo configurar la estructura plana de archivos Jekyll en 60 segundos!

Una vez que esté todo listo y necesite inspiración, vea qué hay disponible entre los temas de Jekyll en Envato Market.

 

Si prefiere una explicación por escrito, aquí está el proceso completo descrito en pasos claros:

Nuevo proyecto

Primero, cree una carpeta en su sistema para un nuevo repositorio. Para ello, utilice el terminal para navegar a donde desea que esté su nueva carpeta y luego ingrese: mkdir mysite. Nuestra nueva carpeta se llama "mysite", pero puedes nombrarla como quieras..  

Cambie el directorio a esta nueva carpeta ingresando cd mysite-Una vez allí crear un archivo de configuración ingresando el comando. vim _config.yml. La ventana de tu terminal te mostrará el contenido de este archivo, así que pulsa yo entrar modo de inserción, A continuación, agregue el siguiente contenido:

título: mi sitio

Golpear Esc dejar modo de inserción, luego entra :X para guardar los cambios que has hecho.

Crear índice

Luego necesitamos crear el documento índice, así que ingrese vim index.md y como lo hizo antes, agregue el siguiente contenido:

--- Título: Hola diseño: por defecto --- Hola!

Añadir carpeta de diseños

Ahora crea una nueva carpeta ingresando mkdir _layouts y cambiar a ese directorio con cd _layouts. Dale un documento de plantilla por defecto vim default.html y añade el siguiente contenido:

 contenido 

Inicializar Nuevo Repo

Ahora necesitamos inicializar la carpeta como un nuevo repositorio y confirmar los cambios. Así que comience navegando de regreso a la raíz de nuestro proyecto con discos compactos… . Entonces entra git init, seguido por git add --all && git commit --todos

Empujando a GitHub

Cambie a GitHub a través del navegador y cree un nuevo repositorio.. 

Se te darán algunas opciones en este punto, así que toma los comandos donde veas empujar un repositorio existente desde la línea de comandos. Los comandos leerán algo como:

git remote add origin [email protected]: nombre_usuario / mysite.git git push -u origin master

Pegue estos comandos en el terminal para enviar su repositorio local a GitHub.

Configuraciones de GitHub

Por último, en el repositorio de GitHub. Ajustes, optar por utilizar la rama maestra para Páginas de GitHub, luego pulsa Salvar.

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

Estructura de archivo Jekyll, explicado

  • _config.yml funciona como el archivo de configuración Jekyll. Esto es lo que lee GitHub Pages para las configuraciones de todo el sitio, como las variables globales, y más.
  • index.md es el documento de índice raíz del sitio web de GitHub Pages.
  • _layouts / default.html es el archivo de plantilla predeterminado en el que se basará index.md.

Recursos utiles

Para obtener más información sobre la creación de sitios web estáticos con Jekyll, consulte los siguientes recursos en torno a Envato Tuts+!

  • Cómo configurar un tema Jekyll

    En este tutorial, veremos cómo configurar un tema de Jekyll desde el principio, comenzando con algunos consejos básicos de instalación, explicando cómo ...
    Kezz Bracey
    Jekyll
  • Nuevo curso: Creación de sitios web estáticos con Jekyll

    En nuestro nuevo curso, aprenderá todo sobre el generador de sitios estáticos Jekyll y construirá un sitio web completo desde cero en menos de dos horas. Únete a Guy Routledge ...
    Andrew Blackman
    Jekyll
  • La línea de comandos para el diseño web: entendiendo lo básico

    En este tutorial, aprenderá todos los elementos esenciales para trabajar con un terminal o un símbolo del sistema, incluido cómo abrirlo, cómo ejecutar comandos, cómo repetir ...
    Kezz Bracey
    Terminal