Práctica p8-t3-jekyll-netlify

Jekyll

Introducción

• Instale Jekyll en su máquina o en la máquina del servicio iaas.ull.es si no dispone de máquina. Instrucciones en Jekyll Installation
• Si no se acuerda de como funciona Ruby le pueden venir las instrucciones en Ruby 101
• Realice el Step by Step Tutorial
  • Setup
  • Liquid
  • Front Matter
  • Layouts
  • Includes
  • Data Files
  • Assets
  • Blogging
  • Collections

Algunos tips si trabaja en la máquina del iaas.ull.es

• Creating a personal access token for the command line para trabajar con git y GitHub vía https

• Para que las instrucciones anteriores funcionen:

  1
  2
  3
  4
  5
  usuario@ubuntu$ git config --global credential.helper  store
  usuario@ubuntu$ ls -ltr ~/.git-credentials 
  -rw------- 1 usuario usuario 68 nov 27 13:27 /home/usuario/.git-credentials
  usuario@ubuntu$ cat ~/.git-credentials 
  https://crguezl:este-no-es-el-token@github.com
  

• Ejecutando en una máquina del iaas.ull.es:

  1
    usuario@ubuntu:~/src/ull-mii-sytws-1920.github.io$ bundle exec jekyll serve -H 10.6.128.216 -P 8080
  

Despliegue en GitHub Pages

• Section Deployment of the Step by Step Tutorial
• 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

Navigation

• Lea de el tutorial Navigation los escenarios Basic List y Sorted List e implementelos en su site

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 que se verá así /noexiste.

La página hace un request a The Cat API para mostrar una imagen de gatitos obtenida al azar. Existe una API similar para los amantes de los perros Dog API.

Personaliza tu página de 404.

Themes

• Jekyll Themes

Test the Deployment with html-profer and Travis

• Se puede probar el buen funcionamiento del Blog haciendo pruebas en Travis como se indica en este tutorial

When testing Jekyll output, there is no better tool than html-proofer. This tool checks your resulting site to ensure all links and images exist. Utilize it either with the convenient htmlproofer command-line executable, or write a Ruby script which utilizes the gem

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
usuario@ubuntu:~/src/ull-mii-sytws-1920.github.io$ bundle exec htmlproofer ./_site --disable-external
Running ["ImageCheck", "ScriptCheck", "LinkCheck"] on ["./_site"] on *.html... 


Ran on 158 files!


- ./_site/2019/09/30/leccion.html
  *  internally linking to /practicas, which does not exist (line 31)
     <a href="/practicas" title="Prácticas">✍</a>
  *  internally linking to /practicas, which does not exist (line 129)
     <a href="/practicas" title="Prácticas">✍</a>
- ./_site/404.html
  *  internally linking to /practicas, which does not exist (line 31)
     <a href="/practicas" title="Prácticas">✍</a>
     ... many more entries

Let us see if its true. Instead of running with jekyll serve, I use a static server to see if the build is really consistent:

1
2
3
4
5
6
7
8
9
10
11
usuario@ubuntu:~/src/ull-mii-sytws-1920.github.io/_site$ static-server -p 8080
options.index is now deprecated please use options.templates.index instead.
* Static server successfully started.
* Serving files at: http://localhost:8080
* Press Ctrl+C to shutdown.
<-- [GET] /2019/09/30/leccion.html
--> 200 OK /2019/09/30/leccion.html 5.63 KiB (15.964ms)
...
<-- [GET] /practicas/
--> 403 /practicas/ (2.199ms)
<-- [GET] /favicon.ico

See the 403 /practicas/ (2.199ms) warning.

It seems htmlproofer is right in spite that it works in github.io

CI with Travis

• Using HTMLProofer From Ruby and Travis

Disponga la ejecución de HTMLProofer en Travis

Despliegues de Jekyll 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