Bien, en este artículo vamos a ver como subir una aplicación web que hemos creado a GitHub Pages de forma gratuita.

Pero realmente ¿Que es GitHub Pages?

GitHub pages (o páginas de GitHub) nos permite albergar un sitio web directamente desde un repositorio de GitHub. Es ideal para mostrar por ejemplo poder realizar un portafolio, para testear nuestra aplicación en un entorno más real o simplemente para realizar una demostración del funcionamiento de una aplicación.

Lo mejor de todo es que es este servicio de alojamiento de nuestra aplicación es totalmente gratis y si no nos da problemas (en principio no tendría porque) fácil de configurar. Por lo que nos vamos a ahorrar tiempo en realizar deploys complejos y dinero por no tener que pagar un servidor. El inconveniente es que todo el mundo tiene acceso al código del repositorio ya que para que sea gratuito la única condición que nos exije cumplir GitHub es esa, además de que tiene ciertos límites de uso que hacen que no sea posible utilizarlo en proyectos de gran envergadura. Pero son ideales para testear una aplicación deployandola en un servidor o para enseñar lo que hemos hecho. Existen opciones de tener el repositorio privado y alojado en GitHub Pages, pero esto supondría un desembolso monetareo.

Nosotros, vamos a ver un ejemplo de cómo hacer un deploy (subida/despegue) de nuestro proyecto almacenado en un repositorio publico a una GitHub Page.

Creando el proyecto de Angular

Para deployar (subir) algo a GitHub Pages, lo primero que necesitamos es crear ese algo, en nuestro caso, ese algo será una aplicación de Angular.

Para ello, vamos al VSC y realizamos lo siguiente:

Una vez creada, hacemos un cd hacía el proyecto y abrimos dicho repositorio con code .

Y se nos abrirá nuestro proyecto:

Subiendo el proyecto a GitHub

Ya tenemos el proyecto, ahora vamos a subirlo a GitHub.
Para ello, iniciamos sesión con nuestra cuenta de GitHub (si no tenemos creamos una) y pulsamos sobre el botón de New en el apartado de repositorio:

Para que nos redireccione hacía la página de creación de un nuevo repositorio. Y ponemos un nombre, yo usaré el mismo que el que uso en el proyecto de Angular, pero no sería necesario:

Y finalmente, tras pulsar en create repositorio, vemos que tenemos el repositorio de nuestro proyecto creado. Aunque por el momento está vacío:

Subiendo el codigo:

Existen dos maneras de subir el código a nuestro repositorio tal y como nos relata la ventana de GitHub.

  • La primera sería si no tenemos un repositorio creado y por lo tanto, tendríamos que hacer una serie de pasos adicionales (como crear el repositorio con git init, etc.):

Pero si pulsamos sobre Reveal in File Explorer podemos ver que se nos abrirá el directorio en el que almacenamos nuestro proyecto.

Y podemos observar que tenemos un directorio .git (oculto por si no os aparece tendréis que configurarlo) por lo que descartamos esta manera ya que no es la mejor manera de realizarlo cuando tenemos un repositorio ya creado.

  • La segunda alternativa, cuando ya tenemos un repositorio inicializado en nuestro proyecto, y por tanto, es el punto donde nos encontramos nosotros en nuestro proyecto de Angular y la que usaremos.

Por lo que copiaremos el código y lo pegamos en nuestro terminal:

Con ello, nos conectaremos al repositorio remoto que tenemos en GitHub Pages y subiremos nuestro proyecto:

Si ahora visitamos nuestro repositorio podemos ver que tenemos el código prácticamente al completo.

A excepción de algún que otro directorio que git está ignorando debido a que se encuentra definido en el archivo .gitignore donde se definen los directorios y los archivos que git va a ignorar.

Entre los directorios/ficheros que se ignoran destacan el node_modules que es donde se almacenan las dependencias y cada una de estas dependencias tiene muchísimos archivos e incluso algunas dependencias dependen de otras dependencias. Por lo que si alguna vez veís 5000 cambios, posiblemente es que hayáis eliminado el directorio de node_modules del archivo .gitignore:

Y también destacan los directorios de compiled output que son las 3 rutas principales sobre las que cuando ya hemos finalizado el desarrollado al completo nuestra aplicación, y la queremos construir la construir/empaquetar nuestra aplicación se almacenará en alguno de esos directorios por defecto.

En nuestro caso, si vamos al archivo angular.json, podemos ver que el ouputPath es el directorio dist acompañado de / test-aplication:

Para que el deploy funcione correctamente tenéis que modificar el outputPath de “dist/test-aplication” a “dist”:

Instalando Angular CLI gh-pages

En muchas ocasiones deployar, es un proceso difícil y con muchos pasos, Por ello, se creó angular-cli-ghpages una herramienta que tiene como finalidad deployar fácilmente nuestra aplicación en gh-pages.

Con el fin de poder trabajar con Angular CLI gh-pages, instalaremos un paquete de npm, copiamos su install de npm que hemos encontrado dentro de la web de npm del repositorio:

Y ejecutamos dicha instrucción desde el terminal de VSC para instalarlo:

npm i angular-cli-ghpages

Perfecto, pues ya tenemos angular-cli-ghpages instalado.

Realizando el build + añadiendo el base href a index.html

Bien, lo primero que vamos a hacer es realizar el build (la construcción) de los ficheros que vamos a subir a GitHub Pages:

Cada vez que realicemos el build tendremos que especificarle el –base-href es muy importante que os fijeis que la ruta del base es "./" mediante el–base-href el indicamos a GitHub cuál será la ruta raíz de nuestra aplicación.

ng build --prod --base-href="./"

Si ahora vamos al proyecto, podemos ver que se nos ha generado/construido el directorio del proyecto (en nuestro caso como ya vimos en el angular.json el directorio donde realizamos el outputPath es el directorio dist).

Realizando el deploy (subida) a GitHub Pages

Finalmente, solamente nos falta realizar el deployment mediante a la instrucción:

npx angular-cli-ghpages – dir=dist

GitHub habilita automáticamente las rama gh-pages la cual es la encargada de almacenar nuestro código que queremos que suba al servidor (en nuestro caso el directorio dist). Es más, ni siquiera tenemos que habilitar Pages desde la configuración del repositorio ya que también se realiza automáticamente. Muestra de ello, es que si vamos a Settings dentro del repositorio:

Y buscamos el GitHub Pages, podemos ver que ya está todo configurado tanto que la rama es la de gh-pages como que tenemos habilitado el GitHub Pages:

Accediendo a nuestra aplicación de GitHub Pages

Una vez subido, tenemos dos opciones:

  • La primera manera y la más rápida sería ir directamente a la ruta sobre la que se desplegará mi proyecto, y siempre será:

https://usuarioGitHub.github.io/miproyecto por ejemplo en mi caso, sería: https://davidbernalgonzalez.github.io/test-aplication/

El principal inconveniente de trabajar con esta opción es que no tenemos demasiada información respecto de cuando se ha realizado dicho deploy, si ha terminado de deployarse, cuando se ha realizado el deploy, etc.

Pese a no tener mucha información, en mi caso, como se ha realizado el deploy correctamente podemos ver que se nos carga la página:

En caso de que el deploy no sea exitoso, en este caso para que lo veáis vamos a hacerla fallar a posta modificando poniendo un –base-href equivocado a proposito:

Si miramos la ruta del index.html vemos que tendría que ser github.io y no github.dd:

Si ahora intentamos cargar la aplicación, vemos que no nos carga y que nos aparece una pantalla en blanco:

Para solucionarlo, simplemente tendríamos que repetir el build y el deploymente que acabamos de realizar al principio.

  • La segunda manera de comprobar si el deploy se ha realizado correctamente y la más recomendable es ir a Environments desde nuestro repositorio de GitHub:

Y aquí podemos ver las subidas que hemos realizado (en mi caso aparecen algunas más porque he estado testeando alguna cosita más), cuanto hace que lo he subido y poquita cosa más:

Y podemos pulsar sobre View deployment para que nos lleve a la página sobre la que se ha realizado el deploy de nuestro repositorio de nuestra aplicación de Angular:

Si ahora realizo modificaciones en nuestro proyecto y queremos subirlas (deployarlas) a nuestro GitHub Pages del repositorio, podemos repetir el proceso nuevamente y ver como los cambios se efectúan correctamente:

Espero que os haya gustado. Un saludo y hasta la próxima 🙂