Share
En la publicación anterior, hablé sobre las páginas de GitHub y cómo configurarlo en su repositorio de GitHub. Usamos el generador del sitio para comenzar y mencioné que GitHub Pages también es compatible con Jekyll.
En este post, hablaré sobre Jekyll y te mostraré cómo configurarlo con tu proyecto. He creado un proyecto de ejemplo que usted despliega y sigue junto con.
¿Qué es exactamente Jekyll? Aquí está su descripción en su sitio:
Jekyll es un generador de sitios estático simple, consciente del blog..
Está completamente impulsado por el contenido y también es compatible con Markdown. Utiliza Líquido para sus diseños, por lo que puede reutilizar algunas cosas, como la cabeza, el encabezado y el pie de página. Generará páginas estáticas basadas en su contenido y los diseños que especifique..
También es consciente del blog, por lo que podría ser un posible reemplazo para WordPress u otro CMS.
Quizás lo más importante a tener en cuenta es que, en Jekyll, los enlaces permanentes, las categorías, las páginas, las publicaciones y los diseños personalizados son todos ciudadanos de primera clase..
También puede generar y ver su sitio localmente, también.
Jekyll se basa en Ruby, por lo que la forma más fácil de instalar es usar RubyGems. Si está en Mac o Linux, puede instalar Jekyll a través de la línea de comandos ejecutando gema instalar jekyll. Si tiene algún problema durante la instalación, le sugeriría consultar la guía de instalación..
Si está en Windows, hay una página de documentos específica de Windows que deberá seguir..
Lo primero que deberá configurar es el archivo de configuración. Usted querrá agregar un _config.yml Archivo a la raíz de su proyecto. Hay una serie de opciones de configuración que puede agregar, usaré un subconjunto de ellas para este ejemplo. Anímate y agrega lo siguiente a tu _config.yml expediente:
# Dependencias markdown: pygments rdiscount: true # Permalinks Permalink: bonito # Destino del servidor: _gh_pages host: 0.0.0.0 puerto: 9001 baseurl: / encoding: UTF-8
Ahora que hemos agregado nuestro archivo de configuración, sigamos configurando la estructura del proyecto.
Hay una estructura específica que debe seguir al crear un sitio basado en Jekyll. Es importante seguir la estructura para que su sitio se genere correctamente. Esto es lo que parece,
Aquí es donde vas a tener tus diferentes diseños para tus páginas. Puedes pensar que estas son como plantillas de página de WordPress. Es posible que desee que su diseño predeterminado tenga una barra lateral y otro diseño que no tenga una barra lateral. Usted hará referencia a estos diseños en su contenido basado en el nombre del archivo..
Sigue adelante y crea un _layouts Carpeta en la raíz de tu proyecto. A continuación, digamos que desea crear el diseño predeterminado. Usted querrá crear un default.html dentro de _layouts carpeta. A continuación, podrá hacer referencia al diseño predeterminado en sus diferentes páginas..
Hay algunas cosas que probablemente querrá agregar a cada uno de sus archivos de diseño, el título de la página y el contenido. Si desea que se muestre el título de su página, querrá agregarlo a su diseño utilizando la siguiente sintaxis:
Título de la página
También querrá especificar dónde desea que se rellene el contenido de cada página en ese diseño. Para hacerlo, deberá usar la siguiente sintaxis:
contenido
Estos se utilizan en el default.html en el proyecto de ejemplo.
Es probable que desee incluir algunas otras cosas que se reutilizarán en cada página, como el encabezado, el pie de página, la navegación y otras. Usted querrá agregar estos en su _incluye carpeta.
Las inclusiones serán cosas que querrá reutilizar en diferentes páginas como mencioné anteriormente. Usted querrá agregarlos en el _incluye carpeta. Sigue adelante y crea un _incluye Carpeta en la raíz de tu proyecto..
Supongamos que desea tener el encabezado del documento como una inclusión. Primero necesitarías agregar un head.html archivo en el _incluye carpeta. Luego, agregará todo lo que necesita para el encabezado del documento, como el doctype, metadatos, scripts, etc..
A continuación querrá hacer referencia a eso. head.html archivo en tu default.html archivo de diseño. Lo harás usando la siguiente sintaxis:
% include head.html%
Puede ver que se usa en el archivo default.html en el proyecto de ejemplo.
Haría lo mismo para cualquier otra cosa que desee reutilizar entre páginas como el encabezado y el pie de página. También puede crear subcarpetas dentro de la _incluye Carpeta y referenciarlos también. Me gusta hacer esto para organizar las secciones de diferencia de cada página si tienen mucho contenido..
Ahora que tenemos un diseño predeterminado, hagamos nuestra primera página. Sigue adelante y crea un index.html archivo en la carpeta raíz de su proyecto. No te preocupes, no anulará tu tema index.php archivo si usas esto para documentar tu tema de WordPress.
La parte superior de cada archivo deberá especificar algunas cosas acerca de la página. Esto es lo que jekyll hará referencia al construir cada página. Hay una serie de cosas que puedes establecer, pero me centraré en algunas de ellas:
Aquí hay un ejemplo para agregar a la parte superior de su index.html expediente:
--- diseño: título predeterminado: Tuts + GitHub Pages slug: tuts-github-pages ---
Ahora que tenemos la configuración de nuestra página, todo lo que tenemos que hacer ahora es agregar nuestro contenido. Simplemente agregue todo el HTML que desea mostrar en su página.
La creación y el servicio de sus páginas se realiza a través de la línea de comando. Adelante, abra la herramienta de línea de comandos que desee, escriba jekyll servir y pulsa Enter. Deberías ver el siguiente resultado:
Si está viendo el resultado correcto, entonces sus páginas están creadas y listas para ser vistas. Ahora puede ver sus páginas en http: // localhost: 9001, o en el puerto que especifique en su _config.yml archivo, en su navegador de elección.
He cubierto los conceptos básicos sobre cómo comenzar a usar Jekyll con su proyecto. Recorrí cómo configurar el archivo de configuración y la estructura del proyecto. También hablé sobre cómo puedes construir y servir tus páginas. Si desea ver todo junto, puede echar un vistazo a este proyecto de ejemplo..
En la próxima publicación, hablaré sobre cómo servir sus páginas en GitHub Pages y las distribuiré en su tema o complemento de WordPress.
Accentsconagua