Estos días he estado jugando con una aplicación en AngularJS, donde estoy compartiendo información sobre los servidores de Mastodon, con el objetivo de poder elegir sabiamente y no ir saltando de uno a otro, como me ha pasado a mi 😝 Quería hospedarla en algún sitio, además de compartir el código fuente, y es por ello que GitHub Pages me parecía una buena opción. En este artículo te cuento cómo hacerlo.

Aplicación de ejemplo

Lo primero que necesitas es una aplicación de ejemplo que hospedar. Puedes usar la plantilla por defecto creando una nueva aplicación:

ng new angularjs-in-gh-pages

Repositorio en GitHub

Ahora crea un repositorio en GitHub como lo harías con cualquier otro código fuente. En mi caso lo voy a llamar angularjs-in-gh-pages. Una vez creado asócialo al código anterior con las indicaciones de GitHub.

Instalar el módulo angular-cli-ghpages

Para poder hacer el despliegue de forma sencilla puedes puedes utilizar el módulo, angular-cli-ghpages. Este creará un nuevo branch, llamado gh-pages, y desplegará lo necesario para tu proyecto.

npm i angular-cli-ghpages

Desplegar la aplicación en GitHub Pages

Para desplegar la aplicación de forma satisfactoria primero debes lanzar el siguiente comando:

ng deploy

Selecciona GitHub Pages:

Y ahora ejecuta lo siguiente:

ng deploy --base-href=/angularjs-in-gh-pages/

Como ves, debes indicar el nombre del repositorio para el valor del base href de la página index.html, para que tu aplicación en su nueva localización pueda encontrar el código desplegado. En tu terminal el proceso terminará así:

Y en GitHub tendrás que esperar a que el proceso de despliegue finalice:

El resultado debería ser como este: https://0gis0.github.io/angularjs-in-gh-pages/

¡Saludos!