Jekyll, GitHub Pages y Netlify

Durante esta práctica desarrollará un web-site usando Jekyllrb como static site generator y lo desplegará en GitHub y en Netlify. Un buen tópico para el Web Site es una página CV personal o un Web Site sobre un tema de tu interés.

Instale Jekyll

• Instale Jekyll
  • Usando docker
  • o bien en su máquina o bien
  • en la máquina del servicio iaas.ull.es si no dispone de máquina.
  • Vea también las instrucciones en Jekyll Installation
• Si no se acuerda de como funciona Ruby le pueden venir las instrucciones en Ruby 101

Estudie las secciones del Tutorial de jekyllrb

Realice el Step by Step Tutorial en Jekyllrb:

• Setup
• Liquid
• Front Matter
• Layouts
• Includes
• Data Files
• Assets
• Blogging
• Collections
  • For the use of collections, see how this template for academic websites uses collections academicpages.github.io and the corresponding GitHub deployment

Es conveniente que el Web Site desarrollado contenga uso de los apartados estudiados, esto es haga uso de Collections, se haga separación de los datos en _data y _config.yml, que extienda algún layout en _layout, algún ejemplo de procesamiento con Liquid, uso de _includes, que haga uso de categories y tags, etc.

Themes

Elige un tema para tu web site. Puedes obtener información en Jekyll Themes.

Recomiendo Minimal Mistakes. Si lo eliges, deberás leer las instrucciones de Minimal Mistakes.

Configura y extiende el tema elegido (por ejemplo, los layouts).

Despliegue en GitHub Pages

Despliegue el proyecto en GitHub Pages. Puede usar la rama master, la carpeta docs en mastero bien Puede hacerlo usando la rama gh-pages con la gema github-pages o el paquete npm gh-pages

Also, read the section Deployment of the Step by Step Tutorial

Deploying in different environments

Working with different environments: url and baseurl and more

404

Lea el tutorial Custom 404 Page y añada una página 404 personalizada.

Tienes un ejemplo de 404.md en estos apuntes 404.md

• Intento de explicar como funciona El 404 de estos apuntes. Una brevísima introducción al DOM, a las Promesas y al Async Await

Existe una API similar a la de los gatos usada en el ejemplo para los amantes de los perros Dog API. Puedes usarla en tu 404.md

• A collective list of free APIs for use in software and web development: Animals, Anime, Art, Music, News, …

Test the Deployment with html-proofer and GitHub Actions

• Se puede probar el buen funcionamiento del Blog haciendo pruebas en GitHub Actions. Repase la sección Testing HTML pages de estos apuntes

• Here is a link to a starter template for a Jekyll 4 site - deployed with GH Actions and GH Pages. It uses peaceiris/actions-gh-pages a GitHub Action to deploy your static files to GitHub Pages.

Despliegue en Netlify

• Lea el tutorial A Step-by-Step Guide: Jekyll 3.0 on Netlify y despliegue el correspondiente Jekyll blog en Netlify

• Jekyll + NetlifyCMS 14 Youtube videos Thomas Bradley

Rúbrica

Incidencias para el Project Board para la práctica

Jekyll, GitHub Pages y Netlify

• Funciona en local

• Está desplegada en GitHub Pages

• Está desplegada en Netlify

• Tiene un 404 personalizado

• Se ha experimentado con las Categories y los tags

• Se ha experimentado con Liquid

• Contiene Data files y esta bien configurado el _config.yml

• Se ha experimentado con los Layouts

• Se hace uso de las Collections

• La User Experience, la navegación y la estética son aceptables

• Hay un Rakefile con Pruebas

• Se ha añadido una GitHub Action para las pruebas

• Opcional: Ha añadido un sistema de comentarios