Casos de uso de GitHub Pages

Este repositorio contiene los casos de uso que estoy probando para trabajar con GitHub Pages.

Presenté una charla para contar este proyecto en Codemotion Madrid 2017. La he repetido en Comunidad CODE para que quede grabada, por si hay más gente interesada en verla:

Para saber más sobre GitHub y GitHub Pages puedes consultar ¿Cómo se utiliza Github pages?

En otros repositorios he creado notas sobre Git y GitHub por si ayudan :)

Índice

Origen
- master
- docs
- gh-pages
Utilidades
- Página web
- Blog
- Portfolio
- Presentación
- Tutorial
- Curso
Avanzado
- Dominio propio
HTML Preview
Jotted
Otros casos de uso

Origen

Hay dos posibilidades para publicar con GitHub Pages, usar el User site y publicar en username.github.io o usar Project sites para publicar en cualquiera de los repositorios que tengas (username.github.io/repository).

Los casos de uso que voy a compartir son todos Project Sites, pero si alguien quiere usar el User Site tiene que saber que en este caso el origen para publicar el código puede ser sólo master.

Para los Project Sites puedes publicar tu código desde las ramas master o gh-pages o el directorio /docs en la rama master. Hasta agosto de 2016 sólo se podía publicar desde gh-pages.

Para habilitar GitHub Pages desde master, gh-pages o /docs (dentro de la rama master) hay que ir a la sección Settings del repositorio y elegir el origen que quieras.

Los pasos para publicar tu página web serían los mismos que para subir a GitHub + el último paso de habilitar GitHub Pages:

# GitHub (en repo): Copiar la url en GitHub en botón "Clone or download": Clone with HTTPS

Ex. https://github.com/user/repository-name.git

# En el terminal (local)

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

cd repository-name

# Se añade todo el contenido en esa carpeta y se sube a GitHub

git add . (si quieres añadir todo)

git commit -m "Mensaje para el commit"

git push origin master (si estás en la rama master)

# Comprobación en GitHub

https://github.com/user/repository-name

# Habilitar GitHub Pages desde la pestaña "Settings"

# Comprobar que está publicado

https://user.github.io/repository-name

master

Se publica el código que tienes alojado en la rama master.

Repositorio de GitHub: https://github.com/cristinafsanz/melies-origen.
Cómo se hizo (README): https://github.com/cristinafsanz/melies-origen.
Resultado: https://cristinafsanz.github.io/melies-origen/.

docs

Cuando queremos publicar el código de un subdirectorio del repositorio, ya sea documentación o ficheros de producción que se generan a partir del código de master.

Repositorio de GitHub: https://github.com/cristinafsanz/melies-hugo.
Cómo se hizo (README): https://github.com/cristinafsanz/melies-hugo.
Resultado: https://cristinafsanz.github.io/melies-hugo/.

Para generar el código web se puede usar pre-commit y automatizarlo para que se genere siempre que se ejecute un commit. Un ejemplo se puede ver en el README del blog de Hugo.

gh-pages

Cuando no queremos que el código generado o la documentación esté en la misma rama que el resto del código.

Un ejemplo se explica en la charla Cómo desplegar tus proyectos Open Source de Ángel M Miguel.

Repositorio de GitHub (rama master): https://github.com/Angelmmiguel/rock-the-open-source.
Repositorio de GitHub (rama gh-pages): https://github.com/Angelmmiguel/rock-the-open-source/tree/gh-pages.
Resultado: https://angelmmiguel.github.io/rock-the-open-source/.

Un mismo proyecto generado para master, docs y gh-pages

master: https://github.com/cristinafsanz/vue-master.
docs: https://github.com/cristinafsanz/vue-master-docs.
gh-pages: https://github.com/cristinafsanz/vue-gh-pages.
gh-pages usando npm gh-pages: https://github.com/cristinafsanz/vue-gh-pages-npm.
gh-pages con Travis: https://github.com/cristinafsanz/vue-gh-pages-travis.

Utilidades

Avanzado

Dominio propio

Repositorio de GitHub: https://github.com/cristinafsanz/melies-hugo.
Cómo se hizo: https://github.com/cristinafsanz/melies-hugo#cambiar-dominio-de-github-pages.
Resultado: https://melies-hugo.js.org/.

HTML Preview:

Para poder ver el resultado si un repositorio de GitHub no tiene GitHub Pages habilitado.

Repositorio GitHub: https://github.com/htmlpreview/htmlpreview.github.com.
Página para visualizar el resultado: http://htmlpreview.github.io/.

Ejemplo:

Jotted:

Puedes subir los ejercicios a GitHub y tener el código por un lado y la demo por otro, como en Flexbox master o puedes utilizar una librería como Jotted y tener una funcionalidad como JSFiddle pero alojada en GitHub, como Flexbox jotted.