Aprendizaje y Enseñanza de la Tecnología

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

---

Organization ULL-MFP-AET-2122   Github Classroom ULL-MFP-AET-2122   Campus Virtual AET   Chat Chat   Profesor Casiano

Generating a Web Site with a Static Generator

En esta tarea vamos a construir un web site. Para ello usaremos los servicios de alojamiento de websites que provee GitHub mediante GitHub Pages y el generador de web sites estáticos Jekyll.

Para el desarrollo usaremos GitPod.

Al aceptar se le creará un repo con los archivos y carpetas necesarios para la generación de un web site usando Jekyll. Despliegue el repo en GitPod usando el botón GitPod. El contenedor/Docker/Máquina Virtual creado instalará Jekyll (lleva su tiempo, tenga paciencia) y arrancará Jekyll en modo servidor.

Haga click en http://127.0.0.1:4000 Follow link using forwarded port

A continuación lea los tutorials de Jekyll y Minimal Mistakes

References

GitHub Pages

• GitHub Pages

Jekyll Docs

• Jekyll docs
  • Pages
  • Posts
  • Front Matter
  • Collections
    • Page Sections in Jekyll - Separating Content from Layout
    • Explain like I’m five: Jekyll collections
  • Data Files
    • Why I love Jekyll Data Files - Chen Hui Jing // JekyllConf 2019 YouTube
  • Assets
  • Static Files

Site Structure

• Directory Structure
• Categories

• Having Different types of posts: Jekyll multiple post types

   - work
     -- _posts
      --- portfolio01.md  # The portfolio01.md belongs to the work category. 
      --- portfolio02.md  #   /work/portfolio02
   - blog
     -- _posts
       --- blogitem01.md # The blogitem01.md belongs to the blog category.
       --- blogitem02.md # /blog/blogitem02
  

Liquid

• Liquid at Jekyll
• Liquid Sandbox: You can test your Liquid code here. This sandbox only loads the default Liquid methods
• Liquid at Shopify

Variables, Includes, Layouts, Permalinks

• Variables
• Includes
• Layouts
• Permalinks

Themes

• Themes
• Jekyll Themes

Pagination

• Pagination

Tutorials

• Tutorials
• Video Walkthroughs
• Navigation
• Order of interpretation
• Custom 404 Page
• Convert an HTML site to Jekyll
• Using Jekyll with Bundler
• Setting up your GitHub Pages site locally with Jekyll

Repl.it and Jekyll

• Repl.it Tutorial MAKE A BLOG USING JEKYLL
• Repl de ejemplo
• Repo en GitHub

Maths

• MathJax v3 in Jekyll by Arthur O’Dwyer
• How I blog about math: an update on KaTeX with Jekyll by GUILLAUME ENDIGNOUX

Cheat Sheets

• Jekyll cheat Sheet at CloudCannon

CV Examples

• Jekyll CV BiagioBrattoli Example
• YouTube Video: How to use minimal Jekyll theme Thunder - Tutorial 10
• Blog: Webjeda
• The GitHub organization academicpages has several repos including one with a beautiful CV template at academicpages/sb-personal. You can see it deployed at https://academicpages.github.io/

Favicon

• Favicon Generator. For real

Minimal Mistakes

• Minimal Mistakes Quick Start Guide
• https://mademistakes.com/ blog

GitPod

• Getting Started
• Configuring GitPod
• GitPod Browser Extension
• Chrome extension in the webstore
• fireFox addon
• GitPod Screencasts 7 videos
• Sharing Running Workspaces
• gitpod.io/workspaces
• Creating reproducibles for any programming language
• Sustainable Node.js development with only a browser
• https://education.github.com/
• GitHub Student Developer Pack
  • Get the Student Developer Pack
• GitPod is inside the GitHub Student Developer Pack
• https://gitpod.io/plans
• The benefits of integrating Docker and Cloud IDE’s in the GitHub Classroom workflow by Ugo Pattacini
• Introduction to Gitpod
• GitPod For Schools, Universities, and Coding Bootcamps
• A Beginner’s Guide to Understanding and Building Docker Images
• Config Docker for GitPod
• Docker in gitpod

Your Comments