Skip to content

Latest commit

 

History

History
218 lines (189 loc) · 12 KB

sesion-4.org

File metadata and controls

218 lines (189 loc) · 12 KB

GitHub Pages

Videotutoriales

Índice

  • Introducción y características del servicio
  • Páginas de usuario / organización
  • Páginas de repositorio
  • Markdown GitHub
  • Gestor estático de contenidos: Jekyll

Referencias

Contenidos

Características de GitHub Pages

  • Servicio de alojamiento web estático (sin lógica de servidor ni base de datos).
  • Hasta 1 GB de alojamiento (ver límites de uso).
  • Dos posibilidades:
    • Asociado a cuenta de usuario.
    • Asociado a un repositorio.
  • Tecnologías que se pueden utilizar: HTML, CSS y JavaScript. También se puede publicar cualquier otro tipo de archivos para su descarga vía web (PDF, DOC, ZIP,…)
  • Posibilidad de utilizar Jekyll, un gestor de contenidos estático de funcionalidades parecidas a WordPress.

Páginas de usuario / organización

Sólo se puede crear un sitio por cada cuenta de usuario u organización. Normalmente se utiliza como sitio principal relacionado con la cuenta correspondiente:

  • Página personal
  • Curriculum Vitae
  • Página informativa
  • Página de portfolio
  • Página principal con la información de una asignatura
  • …

Procedimiento:

  1. Crear un repositorio con el nombre MINOMBREDEUSUARIO.github.io dentro de la cuenta de usuario u organización correspondiente.
  2. Los archivos que se creen estarán disponibles en la dirección: https://MINOMBREDEUSUARIO.github.io.

Páginas de repositorio

Se puede crear un sitio asociado a cualquier repositorio. Algunos ejemplos de uso:

  • Documentación relacionada con el código del repositorio
  • Página informativa del proyecto
  • Prácticas de desarrollo de aplicaciones web
  • Trabajos o presentaciones de alumnos
  • …

Procedimiento:

  1. Crear un repositorio (nombrerepositorio) dentro de la cuenta de usuario u organización correspondiente (MINOMBREDEUSUARIO).
  2. Habilitar el servicio de GitHub Pages en el repositorio mediante una de las siguientes tres opciones:
    1. En los ajustes del repositorio (Settings), en la sección GitHub Pages, seleccionar la opción master branch. Todo lo que se almacen en la rama master se publicará.
    2. En los ajustes del repositorio (Settings), en la sección GitHub Pages, seleccionar la opción master branch /docs folder. Sólo se publicará lo que se almacene dentro de la la carpeta docs de la rama master.
    3. Crear una rama denominada gh-pages. El servicio de publicación de GitHub Pages se activará automáticamente y sólo se publicará el contenido de dicha rama.
  3. Los archivos que se creen estarán disponibles en la dirección: https://MINOMBREDEUSUARIO.github.io/nombrerepositorio.

Ajustes de GitHub Pages

  • Pestaña Settings / Sección GitHub Pages
  • Aquí se muestran los mensajes de error de publicación

Jekyll

Características

  • Gestor estático de contenidos
  • No necesita lógica de servidor ni bases de datos
  • Independencia de la estructura del sitio (plantillas) del contenido
  • El contenido se puede generar mediante MarkDown en lugar de HTML
  • Integrado en GitHub Pages (no necesita ser compilado)
  • Permite dividir los archivos de un sitio web en distintos trozos en los que trabajar de manera independiente (se disminuyen las posibilidades de que dos personas tengan que trabajar en el mismo archivo, disminuyendo así también las posibilidades de que haya conflictos de código)
  • Resulta muy sencillo agregar contenido nuevo (posts, páginas) al sitio con independencia de la estructura HTML

Instalación

Creación del sitio

jekyll new <nombre-sitio>

Ejecución del servidor de test

Si en lugar de crear un nuevo sitio lo que hacemos es clonar un repositorio que tenga un sitio Jekyll previamente creado habrá que ejecutar el siguiente comando:

# Dentro de la carpeta del repositorio clonado
bundle install

A continuación se lanza el servidor de test:

# Dentro de la carpeta del sitio
bundle exec jekyll serve
# El sitio estará disponible en http://localhost:4000/BASEURL
# BASEURL viene configurada en el archivo _config.yml

¡Muy importante! Para que funcione correctamente, la carpeta que contiene el proyecto Jekyll debe estar en una ruta sin espacios en blanco.

Agregar contenido

Front matter
  • Debe aparecer en todos los archivos que vayan a ser procesados por Jekyll (posts, páginas,…)
  • Formato YAML
  • Debe aparecer al principio del archivo antes que cualquier otro contenido
  • Separado por 3 guiones: 
    ---
layout: post
title: Título del post
---
Creación de posts
  • Añadir un archivo en la carpeta _posts con el siguiente formato (en función de si se desea utilizar MarkDown o HTML)
AÑO-MES-DIA-TITULO.md
AÑO-MES-DIA-TITULO.html
  • Añadir front matter y contenido. Por ejemplo:
---
layout: post
title:  "Mi título"
---

# Post 1

**Hola**, éste es mi primer post de Jekyll.
Creación de páginas
  • Añadir un archivo en la carpeta raíz del repositorio o dentro de un subdirectorio (fuera de la carpeta _posts)
  • Utilizar HTML o MarkDown
  • Añadir front matter y contenido.

La carpeta _site

  • Contiene el sitio estático resultado del procesado de Jekyll
  • Su contenido puede alojarse en cualquier servidor web estático
  • Está excluida en el fichero .gitignore por ser un resultado de compilación, no código fuente.

El fichero de configuración

  • Archivo _config.yml
  • Configuración general del sitio: título, datos, correo electrónico,…
  • Variable baseurl: almacena la ruta base donde se publicará el sitio. En caso de utilizar un sitio de repositorio con GitHub Pages se debe configurar de la siguiente manera:
baseurl: "/NOMBRE_REPOSITORIO"
  • Si se va a utilizar un sitio de usuario / organización en GitHub Pages se debe dejar sin configurar
  • Variable url: almacena la URL del servidor web. Normalmente la configuraremos para que apunte al servicio de GitHub Pages asociado a nuestra cuenta:
url: "https://NOMBRE_USUARIO.github.io"
  • Documentación
  • Si se modifica el fichero de configuración hay que reiniciar el servidor de test para que tengan efecto los cambios

Creación de repositorios y subida a GitHub Pages

  1. Crear un nuevo sitio con Jekyll: jekyll new NOMBREPROYECTO
  2. Configurar archivo _config.yml
  3. Inicializar un repositorio nuevo en la carpeta del sitio de Jekyll creado (git init)
  4. Agregar los cambios al repositorio local
  5. Crear repositorio remoto vacío en GitHub
  6. Agregar remoto en el repositorio local
  7. Subir cambios con git push -u origin master
  8. Activar el servicio de GitHub Pages en los ajustes del repositorio en GitHub

Temas

  • Se configura en el fichero _config.yml
  • Tema por defecto: minima
  • Documentación sobre Temas
  • Temas soportados por GitHub
  • Instalar un nuevo tema en el equipo local para poder previsualizar el sitio en el servidor de test local:
    1. Modificar el archivo Gemfile del proyecto
    2. Añadir: gem "NOMBRE_DEL_TEMA"
    3. Ejecutar el comando: bundle install

Variables

Includes

Layouts

Repositorio de ejemplo

A continuación se incluye un enlace a un repositorio de ejemplo con un proyecto de Jekyll básico para el diseño de un sitio web. Está pensado para utilizar con los alumnos en el desarrollo de un sitio formado por 5 páginas estáticas. Utiliza una única plantilla para todas las páginas dividida en 4 secciones. No incluye ningún tema ya que está pensado para realizar el diseño del interfaz con HTML y CSS. Si se quiere utilizar como referencia hay que recordar que hay que cambiar las variables baseurl y url en el archivo _config.yml y adaptarla al repositorio creado.

Tareas

Sitio web de organización

  1. Crea un sitio GitHub Pages de organización en la organización que creaste en la sesión 3. Incluye un fichero index.html con tu nombre y tus apellidos. Comprueba que puedes acceder vía web al sitio publicado.

Sitio web con Jekyll

  1. Instala Jekyll en tu equipo y haz una captura de pantalla del resultado de ejecutar el comando jekyll -version.
  2. Haz un fork del repositorio disponible en https://github.com/antroher/plantilla-jekyll. Puedes crear el repositorio en tu cuenta o en la cuenta de organización que has creado.
  3. Clona tu repositorio y a continuación ejecuta en su interior el comando bundle install para instalar las dependencias.
  4. Modifica el fichero _config.yml para que contenga los parámetros baseurl y url que correspondan a tu repositorio.
  5. Ejecuta el servidor de test en tu equipo y comprueba que puedes acceder al sitio y navegar por él. Haz una captura de pantalla de una de las páginas cargadas a través del servidor local.
  6. Sube los cambios a GitHub.
  7. Configura tu copia del repositorio para activar el servicio de GitHub Pages en la rama master.
  8. Comprueba que puedes acceder vía web a tu sitio publicado.
  9. Crea una nueva página (en la carpeta principal del repositorio) denominada blog. Comprueba que aparece en el menú de navegación del sitio.
  10. Crea una nueva plantilla (en la carpeta _layouts) llamada plantillablog basada en la que se proporciona que muestre una lista de los posts del sitio. El listado debe incluir:
    • Un enlace al post cuyo texto sea el título del post.
    • La fecha de publicación.
    • Un extracto del contenido del texto del post.
  11. Crea 3 posts (en la carpeta _posts) que utilicen la plantilla por defecto. Para generar el texto de los posts puedes utilizar un generador del estilo lorem ipsum.
  12. Configura la página blog de manera que utilice la plantilla plantillablog. Comprueba que aparece la lista de posts y que se puede acceder a ellos a través de los enlaces.
  13. Incluye las capturas de pantalla de los apartados 2 y 5 en el repositorio en una carpeta denominada images.
  14. Modifica la página galeria.html para que incluya dos elementos <img> que muestren las dos capturas de pantalla.

Entrega de la tarea

Realiza una pull request indicando en el mensaje que has completado la tarea junto con:

  • Un enlace a tu sitio web publicado.
  • Un enlace al sitio de organización publicado que creaste en el apartado 1.

No hay que subir ningún archivo en la tarea de la plataforma Aules.