Ilusionismo con GitHub Pages

Cristina Fernández

Desarrolladora front-end en Kairós DS.

Agenda

  • Origen
  • GitHub Pages
  • Casos de uso
  • Alternativas

¿Por qué surge esta charla?

Publicar portfolio web

Alojar código

Cinematógrafo (1895)

¿Qué es GitHub Pages?

User site y Project sites

Ejemplo repositorio de usuario (cristinafsanz.github.io) 
https://user.github.io
Ejemplo repositorio de proyecto (projects) 
https://user.github.io/repo

https://user.github.io

Ejemplo página web

¿Qué necesitas saber?

github.com: Crear repositorio

Crear un repositorio añadiendo nombre y un README.

Clonar repositorio

  • git clone https://github.com/user/repository-name.git

Gif con Georges Méliès duplicándose a sí mismo (como espectáculo de magia).

Añadir código al proyecto

Añadir código a Git (gif de cohete en Viaje a la Luna, de Georges Méliès)

Subir el código

  • git add .
  • git commit -m "Mensaje"
  • git push origin master

Código en GitHub

GitHub (gif de la luna en Viaje a la Luna cuando impacta el cohete)

Habilitar GitHub Pages

Habilitar GitHub Pages desde la pestaña Settings, eligiendo desde el dropdown las posibilidades.

Página web publicada

Resultado en GitHub (ya en la luna, en Viaje a la Luna, de Georges Méliès)

¿Qué código publicas?

Extensión de Chrome Octotree

Extensión que añade un panel a la izquierda con proyecto en forma de árbol

Truco de sobreimpresión

Gif con Georges Méliès duplicándose a sí mismo (como espectáculo de magia).

1 proyecto publicado de 4 formas

4 repositorios del mismo proyecto

Vue (Jose Dongil)

Proyecto buscador de películas

Vue master

Código Vue master en GitHub
github.com/user/repo user.github.io/repo/dist

Vue master /docs

Código Vue master en GitHub
github.com/user/repo user.github.io/repo

Vue gh-pages

Código Vue gh-pages en GitHub
github.com/user/repo user.github.io/repo

Vue gh-pages Travis

Fichero Travis en Master

Casos de uso

Cursos

Truco de parar

Gif con Georges Méliès duplicándose a sí mismo (como espectáculo de magia).

1 proyecto con una librería añadida

2 repositorios del mismo proyecto

Flexbox (Diana Aceves)

Código css master en GitHub
github.com/user/repo user.github.io/repo/exercise github.com/user/repo/README

Ejercicio

Página web con ejercicio CSS

Jotted

Código para usarlo, en página web de jotted

Flexbox con Jotted

Código css master en GitHub
github.com/user/repo user.github.io/repo/exercise github.com/user/repo/README

Ejercicio con Jotted

Página web con ejercicio CSS con pestañas HTML, CSS y Resultado

Presentación

Esta presentación

Portada esta presentación

Instrucciones

github.com/cristinafsanz/melies-origen

Blog

Instrucciones

github.com/cristinafsanz/melies-hugo

Hugo

Hugo, película homenaje a Méliès

Documentación

Tema Jekyll inicial

Elegir un tema de Jekyll

Instrucciones

github.com/cristinafsanz/github-page-theme

Alternativas

Hosting (Jorge Aznar)

Ejemplo en el navegador

Repo con un código ejemplo

Codepen (Sarah Drasner)

Ejemplo mostrado en Codepen: con CSS, JS y resultado

Fichero JS con un código ejemplo

Surge o Netlify

Código en GitHub
github.com/user/repo user.github.io/repo repo.surge.sh repo.netlify.com Explanation

GitLab

¿Por qué GitHub Pages?

Un único sitio

Conclusión

Busca tu medio y a experimentar

¡Gracias!

Créditos

Créditos