Configuración y despliegue de sitios web con Netlify y Github Actions

Clase 32 de 38Curso de Optimización Web

Resumen

¿Cómo configurar Netlify para alojar tu proyecto web?

Netlify es una excelente opción para desplegar sitios web estáticos, ya que permite distribuir contenido eficientemente a través de su red de servidores globales. ¿Listo para convertirte en un experto en el uso de Netlify? Aquí te explicamos cómo hacerlo paso a paso.

¿Por qué elegir Netlify?

Netlify no solo es un servicio muy amigable, sino también conveniente cuando trabajamos con archivos estáticos. Al usarlo, no solo ganas en rapidez de despliegue, sino también en funciones avanzadas como la automatización y la optimización de tus recursos web. Pero eso no es todo, al ser un entorno profesional, te permite gestionar y escalar tus sitios web de manera eficiente.

¿Cuáles son los pasos para comenzar con Netlify?

  1. Crea una cuenta en Netlify: Si todavía no tienes una, entra en Netlify y registra una nueva cuenta.

  2. Conecta Netlify con tu repositorio: Ya sea en Github, GitLab o cualquier otro servicio de repositorios. Es fundamental tener tu proyecto en un repositorio.

  3. Configura tu proyecto: Inicia sesión en Netlify, ve a la pestaña "Sites" y selecciona "Crear un nuevo sitio desde Git". Esto te permitirá seleccionar el proyecto que desees desplegar.

  4. Selecciona el branch y la configuración de build: Al configurar, podrás definir cuál branch utilizar, comúnmente el 'master', y proporcionas comandos específicos como npm run build y el directorio raíz para el HTML.

  5. Despliega tu sitio: Una vez configurado, haz clic en "Deploy Site". Netlify ejecutará el proceso de construcción e instalará las dependencias de npm, permitiendo ver el sitio inmediatamente.

¿Qué sucede detrás de escena en Netlify?

Netlify crea un contenedor donde instala las dependencias de tu proyecto, ya sea que uses npm o yarn. Posteriormente, ejecuta el comando de build especificado en tu configuración. Al finalizar el proceso, genera un HTML estático listo para ser visualizado y optimizado.

¿Cómo aprovechar al máximo el uso de dominios y previsualización?

  • Modifica tu dominio: Puedes personalizar el subdominio asignado por Netlify para hacerlo más reconocible y profesional.
  • Previsualiza tu sitio: Netlify te ofrece la posibilidad de ver el sitio mediante una URL de previsualización. Esto facilita la revisión y detección de errores antes de hacer cambios definitivos.

¿Qué beneficios ofrece Netlify?

  • Optimización automática: Herramientas como Lighthouse te proporcionan reportes detallados para mejorar el rendimiento.
  • Facilidad de uso: El proceso es lo suficientemente sencillo como para desplegar un sitio en minutos.

Comparte tu experiencia con Netlify o si has probado otros servicios. Recuerda, en la próxima clase, aprenderás a conectar Github Actions con Netlify para refrescar automáticamente el contenido de tu sitio web. ¡Vamos allá!