Cómo alojar un sitio web angular usando Netlify y GitHub
Aloje su sitio Angular de forma gratuita mediante este sencillo proceso.
Al alojar un sitio web Angular en línea, puede elegir entre muchas plataformas disponibles. Uno de ellos que puedes utilizar de forma gratuita es Netlify.
Si almacena una copia del código fuente de su sitio web en un repositorio de GitHub, puede usar Netlify para alojar ese sitio.
Netlify también vuelve a implementar automáticamente su sitio cuando envía nuevos cambios a la rama del repositorio que está alojando.
Cómo crear una aplicación angular de ejemplo básica
Puede crear una aplicación Angular sencilla utilizando un editor como Visual Studio Code. Luego puede alojar este sitio web utilizando Netlify.
- Crea una nueva aplicación Angular.
-
Crea una página de inicio sencilla. Reemplace el código en el archivo app.component.html con el siguiente contenido de la página de destino:
<div class="container-dark header"> <h2>Our Business Website</h2> </div> <div class="container-white"> <div class="content"> <h2>Our Business Website</h2> <p>Learn how to design, develop, and maintain your professional website in no time.</p> </div> </div> <div class="container-orange"> <div class="content"> <h2>What We Do</h2> <p>We give you the tools to develop websites and unique solutions for your customers. We also provide training for maintenance and other website related topics.</p> </div> </div> <div class="container-white"> <div class="content"> <h2>About Us</h2> <p>We are a small business operating from Melbourne, Australia. Our spaces are uniquely crafted so clients can also visit us in person.</p> </div> </div> <div class="container-dark footer"> <p>Copyright 2022</p> </div>
Agregue algo de estilo a la aplicación Angular agregando algo de CSS al archivo app.component.css:
* { font-family: "Arial", sans-serif; } .header { padding: 30px 50px; } .footer { padding: 5px 50px; text-align: center; } .container-dark { background-color: #202C39; color: white; display: flex; align-items: center; } .container-orange { background-color: #FFD091; color: #202C39; } .container-white { background-color: whitesmoke; color: #202C39; } .content { padding: 100px 25%; display: flex; flex-direction: column; line-height: 2rem; font-size: 1.2em; align-items: center; text-align: center; }
Agregue algo de estilo para la aplicación Angular general en styles.css:
body { margin: 0; padding: 0; }
Para probar la aplicación, navegue hasta su carpeta raíz usando una terminal o línea de comando. Escriba el comando ng server:
ng serve
Espere a que se compile su código y visite http://localhost:4200/ en un navegador web para ver su aplicación.
En el archivo .browserslistrc, elimine iOS safari versión 15.2-15.3. Esto evitará que se muestren errores de compatibilidad en la consola cuando cree el proyecto.
last 1 Chrome version last 1 Firefox version last 2 Edge major versions last 2 Safari major versions last 2 iOS major versions Firefox ESR not ios_saf 15.2-15.3 not safari 15.2-15.3
Construya su código usando el comando ng build en la terminal:
ng build
En el archivo .gitignore , elimine o comente la línea /dist . Eliminarlo garantizará que la carpeta dist esté en el conjunto de archivos que envía a su repositorio de GitHub.
# /dist
Cómo enviar su código angular a GitHub
Deberá almacenar su código en un repositorio remoto para que Netlify acceda al código fuente.
Puede crear un nuevo repositorio en GitHub y enviar el código de su sitio web a ese repositorio. Si no está familiarizado con GitHub, puede resultarle útil comprender primero algunas de las funciones básicas de GitHub.
Crea un nuevo repositorio en GitHub. Puede hacerlo iniciando sesión en GitHub y haciendo clic en Nuevo.
Ingrese los detalles de su nuevo repositorio. Asígnale un nombre como "netlify-app" y una descripción. No inicialice el repositorio con un archivo README, un archivo .gitignore o una licencia.
En una terminal de su computadora, navegue hasta el directorio donde almacenó su aplicación Angular. Ejecute los siguientes comandos para inicializar su carpeta como repositorio git:
git init git add . git commit -m "first commit"
Inserte el código dentro de esta carpeta en el nuevo repositorio remoto que creó en GitHub. Siga los comandos git remoto add original, git branch y git push proporcionados por GitHub en su página de repositorio remoto:
git remote add original <Your GitHub repo link> git branch -M main git push -u origin main
-
Puede confirmar que el código de su aplicación Angular ahora está en su repositorio remoto de GitHub actualizando la página del repositorio de GitHub.
Cómo utilizar Netlify para alojar su código
Para alojar su código usando Netlify, deberá darle acceso a su código fuente de GitHub. Netlify luego usará la carpeta dist de su proyecto Angular para publicar la versión compilada de su código.
Puede configurar todas estas configuraciones siguiendo los pasos de configuración al crear un nuevo sitio:
Inicia sesión o regístrate en Netlify. Puede hacerlo utilizando sus credenciales de GitHub.
Desde el panel principal y la página de lista de sitios, expanda Agregar nuevo sitio y seleccione Importar un proyecto existente.
Selecciona GitHub.
Haga clic en Configurar Netlify en GitHub.
Haga clic en Instalar.
Netlify mostrará una lista de sus repositorios de GitHub. Selecciona el que te gustaría alojar. Por ejemplo, si ha nombrado su repositorio "netlify-app", seleccione "netlify-app" de la lista.
En la pantalla de configuración, deje los campos Propietario, Rama para implementar y Directorio base en sus valores predeterminados. Si estuviera publicando una rama específica, como una rama de "Producción" separada, podría agregarla en el campo Rama para implementar. Cambie el campo comando de compilación a "ng build".
- Haga clic en Implementar sitio.
Espere a que se complete la implementación. Esto puede tardar unos minutos y es posible que tengas que actualizar la página. Si todo va bien, podrá ver la implementación exitosa en la lista de implementaciones. Haga clic en su implementación publicada, por ejemplo, Producción: principal@HEAD.
Haga clic en el botón Abrir implementación de producción.
Ahora puede ver su sitio web en otra pestaña, usando una URL en el formato
.netlify.app. Si aloja un sitio web con múltiples redireccionamientos, es posible que no pueda redirigir a otras páginas. En este caso, existe una manera de corregir una redirección fallida en Netlify. Si lo deseas, también puedes modificar tu nombre de dominio gratuito.
Alojamiento de su sitio web con GitHub y Netlify
Con suerte, ahora puede alojar con éxito un sitio web utilizando GitHub y Netlify. Puede configurar implementaciones automáticas en determinadas ramas de un repositorio de GitHub. De esta manera, puede automatizar y optimizar la implementación de su sitio web.
Pero Netlify no es la única forma de implementar una aplicación Angular en línea. También puedes utilizar otras plataformas como GitHub Pages.