Como desarrollador principiante de Angular, una de las primeras cosas que querrás hacer es compartir tus proyectos con el mundo. GitHub Pages ofrece una forma gratuita y sencilla de alojar sitios web estáticos directamente desde tu repositorio de GitHub. En esta guía, te llevaré paso a paso por el proceso completo para desplegar tu aplicación Angular en GitHub Pages.

Prerrequisitos

Antes de comenzar, asegúrate de tener:

  • Un proyecto en Angular básico y funcional
  • Git instalado en tu computadora
  • Una cuenta en GitHub
  • Node.js y npm/yarn instalados

Paso 1: Prepara tu Proyecto Angular

Primero, asegurémonos de que tu proyecto Angular esté listo para el despliegue:

  1. Construye tu proyecto:
    Ejecuta el comando de construcción para producción para crear archivos optimizados:
  2. ng build --prod.
  3. Esto genera una carpeta dist/ con tu aplicación compilada.
  4. Prueba localmente:
    Puedes probar la construcción de producción localmente usando:npx http-server dist/mi-app/

Paso 2: Crea un Repositorio en GitHub

  1. Crea un Repositorio:
    Ve a GitHub.com e inicia sesión. Haz clic en el ícono “+” en la esquina superior derecha y selecciona “Nuevo repositorio”. Nómbralo (por ejemplo, tu-usuario.github.io para un sitio de usuario o cualquier nombre para un sitio de proyecto), configúralo como público y inicialízalo con un README.
  2. Sube tu Proyecto a GitHub:
    En tu terminal, navega a la carpeta de tu proyecto Angular y ejecuta:
  3. git init
  4. git add .
  5. git commit -m "Commit inicial"
  6. git remote add origin https://github.com/tu-usuario/nombre-de-tu-repositorio.git git push -u origin main

Paso 3: Instala y Configura Angular CLI para GitHub Pages

  1. Instala el Paquete Angular CLI GH Pages:
    Para facilitar el despliegue, instala el paquete angular-cli-ghpages globalmente o como dependencia de desarrollo:
npm install -g angular-cli-ghpages
  1. Configura la Base Href:
    Para GitHub Pages, establece la bandera –base-href para que coincida con la URL de tu repositorio. Para un sitio de usuario (tu-usuario.github.io), usa /. Para un sitio de proyecto (tu-usuario.github.io/nombre-de-tu-repositorio), usa /nombre-de-tu-repositorio/. Actualiza el comando de construcción:
ng build --prod --base-href /nombre-de-tu-repositorio/

Paso 4: Despliega en GitHub Pages

  1. Despliega el Proyecto:
    Usa el paquete angular-cli-ghpages para desplegar el contenido de la carpeta dist/nombre-de-tu-proyecto/:

ngh –dir=dist/nombre-de-tu-proyecto/

    Este comando sube los archivos construidos a una rama gh-pages en tu repositorio.

    1. Habilita GitHub Pages:
      Ve a tu repositorio en GitHub, navega a la pestaña Configuración y desplázate hasta la sección Pages. En Branch, selecciona la rama gh-pages y haz clic en Guardar. GitHub Pages proporcionará una URL (por ejemplo, https://tu-usuario.github.io/nombre-de-tu-repositorio/).

    Paso 5: Verifica y Accede a tu Sitio

    1. Verifica el Despliegue:
      Después de unos minutos, visita la URL proporcionada por GitHub Pages para ver tu aplicación Angular en vivo. Si no carga, asegúrate de que base-href coincida con el nombre de tu repositorio y que la carpeta dist/ se haya subido correctamente.
    2. Solución de Problemas:
      • Si ves un error 404, verifica que la rama gh-pages contenga los archivos correctos.
      • Asegúrate de que las rutas de Angular estén configuradas para funcionar con GitHub Pages usando HashLocationStrategy (agrega { useHash: true } a tu RouterModule.forRoot() en app.module.ts).

    Paso 6: Actualiza tu Sitio

    Para actualizar tu sitio, haz cambios en tu proyecto Angular, reconstrúyelo con:

    ng build --prod --base-href /nombre-de-tu-repositorio/

    Luego, vuelve a desplegar:

    ngh --dir=dist/nombre-de-tu-proyecto/

    Tu sitio en GitHub Pages se actualizará automáticamente.

    Conclusión

    si queremos desplegar proyectos básicos de Angular y que sea gratis podemos usar GitHub Pages es una manera sencilla de mostrar tu trab.

    Sigue estos pasos, tendrás tu aplicación en línea en poco tiempo. ¡Comparte la URL!