Subir proyecto Angular a Githubpages
Sube tu proyecto web para mostrarlo online. Github permite que tu proyecto web aparezca en un subdominio con tu usuario. A través de la librería «angular-github-pages». Básicamente son 4 archivos Javascript y una hoja de estilos CSS, los compilados para realizar el deploy en el dominio github.io.
En 8 pasos se puede desplegar una muestra de tu proyecto, personalmente vi infinidad de usos dado que Angular ha sido parte de mi crecimiento en Desarrollo. Esta libreria que se puede añadir directamente al proyecto libera de pasos algo que también se puede hacer por medio de un archivo YAML. Sin embargo en esta ocasión solo esta con la librería angular-github-pages
CREAR REPO EN GITHUB
1
En nuestro Github personal, crear un nuevo repositorio con solamente el nombre:
2
Copiar toda esta lista de comandos con el botón copiar de Github:
En esta parte la idea es subir en simple el proyecto Angular al repositorio recién creado. Se sugiere copiar el grupo de comandos, o, tranquilamente, se puede trabajar por ramas o con Github aplicación de escritorio.
CREAR PROYECTO ANGULAR EN LOCAL
3
Por consola o terminal, crear proyecto nuevo de angular en local:
ng add angular-cli-ghpages
Con el comando angular@cli para crear nuevo proyecto, construimos uno en local para subir a Github, cualquier nombre esta bien: En el ejercicio actual se utilizó Angular en versión 16.0.0. - Node Js en versión 16.17.1
AGREGAR LIBRERÍA
4
Con este comando, por consola agregar la librería angular-ghpages:
ng add angular-cli-ghpages
Debido a que solamente se requiere la librería angular 'githubpages' en entorno de desarrollo, el comando anterior lo instalará en 'devDependencies'.
PRIMER COMMIT
5
Ahora los datos copiados en el paso 2, se pegan y se ejecutan dentro del proyecto nuevo de Angular creado.
echo "# proyect-githubpages" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/2014maximo/proyect-githubpages.git
git push -u origin main
Y así de esta forma subir el primer commit con toda la estructura del framework.
CONSTRUIR COMPILADO
6
Ejecutar este comando para construir. En la parte de 'project-gh-pages' colocar el nombre del repositorio creado en Github:
ng build --base-href "https://2014maximo.github.io/project-gh-pages/"
Con este comando por consola, se ejecuta el constructor de proyecto, el cual funciona en base al repositorio que esta en Github.
NOTA:
Cada que hacemos cambios al proyecto, se suben a Github y luego se ejecuta el anterior comando.
SUBIR COMPILADO
7
Ahora ejecutamos el siguiente comando para terminar:
npx angular-cli-ghpages --dir=dist/project-gh-pages/browser/
Reemplazar la parte de
dist/project-gh-pages/browser/
Por la ruta donde se encuentran los siguientes archivos creados en la compilación:
DEPLOY EN GITHUB
8
Con este comando por consola, se ejecuta el constructor de proyecto, el cual funciona en base al repositorio que esta en Github.
GithubPersonal.github.io/nombreRepositorio
Se uso como referencia la documentación de la librería oficial :
No se tuvo el éxito esperado con la documentación oficial. Debido a esto sugiero estos pasos que en la prueba resultaron exitosos y simples.
Cualquier sugerencia es bienvenida.