Cómo alojar un sitio web angular usando Netlify y GitHub

Al alojar un sitio web de Angular en línea, puede elegir entre muchas plataformas disponibles. Uno de estos que puedes usar gratis 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 básica de ejemplo

Puede crear una aplicación Angular simple usando un editor como Visual Studio Code. A continuación, puede alojar este sitio web utilizando Netlify.

1. Crear un nueva aplicación angular.
2. Crea una página de inicio sencilla. Reemplace el código en el aplicación.componente.html
   instagram viewer
   archivo con el siguiente contenido de la página de destino:

   <clase div="encabezado contenedor-oscuro">
   <h2>Nuestro sitio web comercial</h2>
   </div>
   <clase div="contenedor-blanco">
   <clase div="contenido">
   <h2>Nuestro sitio web comercial</h2>
   <pag>Aprenda a diseñar, desarrollar y mantener su sitio web profesional en muy poco tiempo.</pag>
   </div>
   </div>
   <clase div="contenedor-naranja">
   <clase div="contenido">
   <h2>lo que hacemos</h2>
   <pag>Te damos las herramientas para desarrollar sitios web y soluciones únicas para tus clientes. También brindamos capacitación para
    mantenimiento y otros temas relacionados con el sitio web.</pag>
   </div>
   </div>
   <clase div="contenedor-blanco">
   <clase div="contenido">
   <h2>Sobre nosotros</h2>
   <pag>Somos una pequeña empresa que opera desde Melbourne, Australia. Nuestros espacios están diseñados de manera única para que los clientes también puedan
    visítenos en persona.</pag>
   </div>
   </div>
   <clase div="pie de página contenedor-oscuro">
   <pag>Derechos de autor 2022</pag>
   </div>

3. Agregue algo de estilo a la aplicación Angular agregando algo de CSS al aplicación.componente.css archivo:

   * {
    Familia tipográfica: "Arial", sans serif;
   }
   .encabezamiento {
    relleno: 30px 50px;
   }
   .pie de página {
    relleno: 5px 50px;
    alineación de texto: centro;
   }
   .contenedor-oscuro {
    color de fondo: #202C39;
    color blanco;
    pantalla: flexible;
    alinear elementos: centro;
   }
   .contenedor-naranja {
    color de fondo: #FFD091;
    color: #202C39;
   }
   .contenedor-blanco {
    color de fondo: humo blanco;
    color: #202C39;
   }
   .contenido {
    relleno: 100px 25%;
    pantalla: flexible;
    dirección de flexión: columna;
    altura de línea: 2rem;
   tamaño de fuente: 1.2em;
    alinear elementos: centro;
    alineación de texto: centro;
   }

4. Agregue un poco de estilo para la aplicación Angular general en estilos.css:

   cuerpo {
    margen: 0;
    relleno: 0;
   }

5. Para probar la aplicación, navegue a su carpeta raíz usando una terminal o línea de comando. Escribe el ng servir dominio:

   ng servir

6. Espere a que su código se compile y visite http://localhost: 4200/ en un navegador web para ver su aplicación.
7. En el .browserslistrc archivo, elimine iOS safari versión 15.2-15.3. Esto evitará que se muestren errores de compatibilidad en la consola cuando construyas el proyecto.

   última 1 versión de Chrome
   última 1 versión de Firefox
   últimas 2 versiones principales de Edge
   últimas 2 versiones principales de Safari
   últimas 2 versiones principales de iOS
   ESR de Firefox
   noios_saf 15.2-15.3
   nosafari 15.2-15.3

8. Cree su código usando el construir comando en la terminal:

   construir

9. En el .gitignore archivar, eliminar o comentar el /dist línea. Quitarlo asegurará que dist La carpeta está en el conjunto de archivos que envía a su repositorio de GitHub.

   # /dist

Cómo enviar tu 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 ser útil comprender algunos de Funciones básicas de GitHub primero.

1. Crear un nuevo repositorio en GitHub. Puede hacerlo iniciando sesión en GitHub y haciendo clic en Nuevo.
2. Ingrese los detalles de su nuevo repositorio. Dale un nombre como "netlify-app" y una descripción. No inicialice el repositorio con un archivo README, un archivo .gitignore o una licencia.
3. En una terminal en su computadora, navegue hasta el directorio donde almacenó su aplicación Angular. Ejecute los siguientes comandos para inicializar su carpeta como un repositorio git:

   iniciar git
   agrega git
   git comprometerse -m "primero comprometerse"

4. Empuje el código dentro de esta carpeta al nuevo repositorio remoto que creó en GitHub. Siga el git remoto agregar original, rama git, y empujar git comandos proporcionados por GitHub en su página de repositorio remoto:

   git remoto agregar original <Su enlace de repositorio de GitHub>
   rama git -M principal
   git push -u origen principal

5. 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 usar 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á el dist carpeta de su proyecto Angular para publicar la versión construida de su código.

Puede configurar todos estos ajustes siguiendo los pasos de configuración al crear un nuevo sitio:

1. Inicie sesión o regístrese para netlizar. Puede hacerlo usando sus credenciales de GitHub.
2. Desde el panel principal y la página de lista de sitios, expanda Agregar nuevo sitioy seleccione Importar un proyecto existente.
3. Seleccionar GitHub.
4. Haga clic en Configurar Netlify en GitHub.
5. Haga clic en Instalar.
6. Netlify mostrará una lista de sus repositorios de GitHub. Seleccione el que le gustaría hospedar. Por ejemplo, si nombró a su repositorio "netlify-app", seleccione "netlify-app" de la lista.
7. En la pantalla de configuración, deje el Dueño, Sucursal para desplegar, y Directorio base campos en sus valores predeterminados. Si estaba publicando una rama específica, como una rama de "Producción" separada, podría agregarla a la Sucursal para desplegar campo. Cambiar el Comando de compilación campo a "ng build". Para el Publicar directorio campo, escriba dist/. Si no sabe cuál es el nombre del proyecto, puede navegar a la carpeta dist de su proyecto para encontrarlo allí. Por ejemplo, "dist/netlify-app".
8. Haga clic en Sitio de implementación.
9. Espere a que se complete la implementación. Esto puede tardar unos minutos y es posible que deba 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: main@HEAD.
10. Clickea en el Implementación de producción abierta botón.
11. Ahora puede ver su sitio web en otra pestaña, usando una URL en el formato de .netlify.aplicación. Si aloja un sitio web con múltiples redireccionamientos, es posible que no pueda redirigir a otras páginas. En este caso, hay una manera de corregir una redirección fallida en Netlify. Si quieres, también puedes modifica tu nombre de dominio gratis.

Hospedaje de su sitio web usando GitHub y Netlify

Con suerte, ahora puede alojar con éxito un sitio web usando GitHub y Netlify. Puede configurar implementaciones automáticas en ciertas ramas de un repositorio de GitHub. De esta manera, puede automatizar y agilizar la implementación de su sitio web.

Pero Netlify no es la única forma en que puede implementar una aplicación Angular en línea. También puede usar otras plataformas como GitHub Pages.