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 :)
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
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/.
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.
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/.
-
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.
-
Repositorio de GitHub: https://github.com/cristinafsanz/alcelavistaytevimadrid.
-
Resultado: http://cristinafsanz.github.io/alcelavistaytevimadrid/.
-
Repositorio de GitHub: https://github.com/cristinafsanz/melies-hugo.
-
Resultado: https://melies-hugo.js.org/.
-
Repositorio de GitHub: https://github.com/cristinafsanz/projects.
-
Resultado: http://cristinafsanz.github.io/projects/project/.
-
Repositorio de GitHub: https://github.com/cristinafsanz/melies-origen.
-
Resultado: https://cristinafsanz.github.io/melies-origen/.
-
Repositorio de GitHub: https://github.com/cristinafsanz/vuejs-primeros-pasos/tree/master/libro-vue.
-
Resultado: https://cristinafsanz.github.io/vuejs-primeros-pasos/libro-vue/capitulo1/example-vue/.
- Repositorio de GitHub: https://github.com/cristinafsanz/JavaScript30.
-
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/.
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:
-
Animaciones CSS: https://github.com/nucliweb/AnimacionesCSS-EscuelaIT/tree/master/dia1/01.
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.
-
Libro blanco de Kaleidos: https://github.com/kaleidos/libro-blanco.
-
P谩gina web libro blanco: https://kaleidos.github.io/libro-blanco/.
-
Geoinquietos: https://github.com/geoinquietos-org/geoinquietos-org.github.io.
-
P谩gina web Geoinquietos: http://geoinquietos.org/.
-
Conferenciaror: https://github.com/aprodeweb/conferenciaror.es.
-
P谩gina web conferenciaror: http://conferenciaror.es/.
-
Frontfest: https://github.com/frontfest/frontfest.github.io.
-
P谩gina web Frontfest (compraron una plantilla est谩tica y la desmenuzaron para adaptarla y que fuera m谩s modular y f谩cil de editar, @luisddm): http://frontfest.es/.
-
Phaser CE: https://github.com/photonstorm/phaser-ce.
-
Documentaci贸n Phaser CE: https://photonstorm.github.io/phaser-ce/.
-
Google closure-library: https://github.com/google/closure-library/tree/gh-pages/source/closure/goog/demos/editor.
-
goog.editor Demo: https://google.github.io/closure-library/source/closure/goog/demos/editor/editor.html.
-
Componente AngularJS: https://github.com/angular-ui-tree/angular-ui-tree.
-
Ejemplos componente AngularJS: http://angular-ui-tree.github.io/angular-ui-tree/#/basic-example.
-
Repositorio GitHub (rama gh-pages): https://github.com/Angelmmiguel/svgi/tree/gh-pages.
-
Herramienta de inspecci贸n SVG: https://angelmmiguel.github.io/svgi/.
-
Herramienta para grabaci贸n terminal: https://github.com/asciinema/asciinema.
-
Tema New Moon: https://github.com/taniarascia/new-moon.
-
Preview resultado tema: https://taniarascia.github.io/new-moon/.
-
C贸digo GitHub: https://github.com/rogerdudler/git-guide.
-
Gu铆a de git: http://rogerdudler.github.io/git-guide.
-
C贸digo GitHub: https://github.com/delapuente/pwa-workshop.
-
Taller (GitBook): https://delapuente.github.io/pwa-workshop/es/.
-
C贸digo GitHub: https://github.com/waapi/tool-transforms.
-
Ejemplo visual: https://waapi.github.io/tool-transforms/.
-
C贸digo GitHub: https://github.com/LeaVerou/talks.
-
Ejemplo charla: https://leaverou.github.io/talks/mavo-talk/#.
-
Sistema basado en CSS para presentaciones: https://github.com/LeaVerou/CSSS.
-
C贸digo GitHub: https://github.com/yiwenl/Sketches.
-
Sketches: http://yiwenl.github.io/Sketches/.
-
C贸digo GitHub: https://github.com/nikgraf/webvr-experiments.
-
Demo Bosque: https://nikgraf.github.io/webvr-experiments/HelloWorld/v3/.
-
Demo Star wars: https://nikgraf.github.io/webvr-experiments/Animation/v2/.