Aprendizaje y Enseñanza de la Tecnología

Desarrollo Colaborativo de Proyectos de Aprendizaje y Enseñanza de Tecnologías en la Nube

  Org   Template-Org   GH-pages   Netlify-pages   Faltas   Classroom   Campus-Virtual   Activity   Chat   Casiano   meet

Generating a Web Site with a Static Generator

Objetivos

En esta tarea vamos a aprender a construir web sites usando un generador estático de contenidos.

Para ello aprenderemos a usar

  1. los servicios de alojamiento de websites que provee GitHub mediante GitHub Pages
  2. como funciona el generador de web sites estáticos Jekyll.

Al aceptar esta asignación se creará un repo con los archivos y carpetas necesarios para la generación de un web site usando Jekyll.

En este web site deberás crear un web site en un repo con nombre <organization>/<organization>.github.io para la organización que creaste en la tarea anterior con una estructura similar al web site de este curso conteniendo temas, tareas, comentarios, enlaces, etc. así como una página de usuario en GitHub Pages.

Puesta a punto del entorno de trabajo

  1. Abrimos un codespaces en el repo de la asignación
    1. Si es necesario repase las notas sobre CodeSpaces.
    2. Alternativamente, véanse las notas sobre GitPod
  2. A continuación arrancamos el server de jekyll. Para ello escriba en la terminal:
    1. cd docs pulse retorno de carro. Esto le sitúa en la carpeta docs que es donde se encuentran los ficheros del web site de la asignatura
    2. bundle install pulse retorno de carro. Este comando instala las dependencias necesarias para que el generador estático de contenidos Jekyll pueda funcionar
    3. rake serve pulse retorno de carro. Este comando arranca el servidor web de Jekyll
    4. alternativamente puede escribir bundle exec jekyll serve en la terminal
    5. Haga click en Open in Browser: se abrirá una nueva pestaña en la que visitamos la página web servida.

    /assets/images/codespaces/codespaces-jekyll-serve.png

Adaptar los contenidos del Web Site a nuestra Asignatura

  1. Cambiar el nombre de la asignatura y los datos en el fichero _config.yml
    • Cada vez que se modifique el fichero _config.yml hay que parar el servidor de desarrollo y volverlo a arrancar. Pulse Ctrl-C en la terminal para parar el servidor y posicionándose en la carpeta docs/ vuelva a arrancar el servidor con rake serve
  2. Limpiar los documentos en las carpetas leccion y _tareas y sustituirlos por nuestras lecciones y tareas correspondientes a nuestra asignatura

Jekyll docs

Para aprender mas tenemos los tutorials en la documentación de Jekyll

Liquid docs

Ejemplos avanzados

Aprender algo de Liquid usando una lección y una tarea

  1. Ver el fichero clases.md de estos apuntes: https://raw.githubusercontent.com/ULL-MFP-AET/ull-mfp-aet.github.io/main/clases.md
  2. El fichero _includes/clases_impartidas.md: https://raw.githubusercontent.com/ULL-MFP-AET/ull-mfp-aet.github.io/main/_includes/clases-impartidas.md
  3. También ver el ejemplo de la rúbrica en una práctica como _tareas/aprender-markdown.md
  4. https://raw.githubusercontent.com/ULL-MFP-AET/ull-mfp-aet.github.io/main/_tareas/aprender-markdown.md
  5. Contenidos del fichero _includes/rubrica.md: https://raw.githubusercontent.com/ULL-MFP-AET/ull-mfp-aet.github.io/main/_includes/rubrica.md

Liquid extension for VSCode

Opcionalmente puede instalar el paquete Liquid para su Codespaces.

assets/images/liquid-vscode-package

Recuerde que para habilitar la sincronización de configuración, en la esquina inferior izquierda de la barra de actividad seleccione y haga clic en la rueda dentada. Active la sincronización de configuración…. En el cuadro de diálogo, seleccione todas las configuraciones.

Desplegando en su organización ull-mfp-aet-2324-aluXXXX.github.io

Hemos estado generando el web site en el repo de la asignación de esta tarea. El objetivo es que este web site sea el de su organización, por lo tanto es conveniente que lo despliegue en su organización.

  1. Haga un fork del repo de la práctica a su organización: el repo de destino será en la organización de su asignatura: ULL-MFP-AET-2324-aluXXX/ull-mfp-aet-2324-aluXXX.github.io
    • Previamente el profesor debe configurar la organización para permitir los forks (settings -> member priveleges -> repository forking -> check Allow forking of private repositories)
  2. El nombre del repo de destino deberá ser el de la organización de su asignatura seguido del sufijo .github.io: ull-mfp-aet-2324-aluXXXX.github.io
  3. Configure el repo ULL-MFP-AET-2324-aluXXX/ull-mfp-aet-2324-aluXXX.github.io para usar github pages
  4. Modifique el baseurl en el archivo _config.yml a vacío baseurl: ""
  5. Compruebe en las GitHub Actions del repo ULL-MFP-AET-2324-aluXXX/ull-mfp-aet-2324-aluXXX.github.io que el despliegue se ha realizado correctamente y observe el despliegue en el web site https://ull-mfp-aet-2324-aluXXX.github.io

Llevando sucesivos cambios del repo de la práctica a su repo de organización

  1. Haga ahora mas cambios en el repo de la práctica ULL-MFP-AET-2324/asignatura-website-aluXXX y compruebe que se despliegan correctamente en su web site https://ull-mfp-aet-2324-aluXXX.github.io/asignatura-website-aluXXX
  2. Haga un pull request a la rama main del repo ULL-MFP-AET-2324-aluXXX/ull-mfp-aet-2324-aluXXX.github.io desde el repo de la práctica ULL-MFP-AET-2324/asignatura-website-aluXXX
  3. Ahora analice el pull request y acepte los cambios propuestos
  4. Observe los cambios en el despliegue de la web de su asignatura en ull-mfp-aet-2324-aluXXX.github.io

Página web del usuario en GitHub

Siguen algunos ejemplos de páginas web de usuarios en GitHub que pueden servir de inspiración para us página web de usuario:

Desplegando el Web Site de la Asignatura en Moodle

Si tiene acceso a un curso Moodle puede desplegar el web site de la asignatura en el curso Moodle. Para ello puede seguir las instrucciones en la sección Importing a Website into Moodle

Desplegando en Netlify

Si desea hacer un despliegue en Netlify, vaya a Netlify pulse login y autentiquese usando su cuenta de GitHub. Deberá dar permisos a Netlify para que acceda a su cuenta de GitHub.

  1. Añada un nuevo site

  2. Cree un nuevo site y enlace a su repositorio de GitHub

    Cada vez que envías un push a GitHub (o GitLab/BitBucket), ¡Netlify implementará automáticamente tus actualizaciones y cambios!

  3. Configure el despliegue de su repo en Netlify como sigue: /assets/images/netlify-config.png

  4. Recuerde modificar el baseurl en el archivo _config.yml a vacío baseurl: "" o de otro modo no funcionará correctamente el despliegue en Netlify: /assets/images/netlify-despliegue-incorrecto.png

Tienes un tutorial detallado en https://www.netlify.com/blog/2020/04/02/a-step-by-step-guide-jekyll-4.0-on-netlify/

Entrega

Deja en el fichero README.md de este repositorio

References

Referencias para esta práctica

Rúbrica

Actividad de los Alumnos para asignatura-website

Medidas de Actividad de los Alumnos para asignatura-website

Your Comments