How to: Publicar página web estática con Azure Static Web Apps, CI/CD, Github Actions, Dominio y SSL.
Si no quieres leer el blog con las instrucciones, puedes ver el video en mi Threadit, actualizaré esta entrada de blog cuando esté disponible en mi canal de Youtube (: Mira mi Threadit para esta entrada de blog ;)
También puedes ver algo parecido (pero incompleto, debo agregar XD) en mi participación, en la hora 3 de la Azure Cloud Week 2022
Más información de Azure Static Web Apps
Azure Static Web Apps es un servicio gratuito para proyectos personales, puede ser el servicio perfecto para que construyas tu CV o hagas tu portafolio como desarrollador.
Para este video usé un template para que no fuera tedioso y largo verme construir la página web, puedes buscar muchos templates en Google o ir a esta página:
Después de descargar el template de tu elección, lo descomprimes y lo abres con Visual Studio Code o el editor de tu preferencia, recomiendo usarlo junto con la extensión Live Server.
- Crea tu recurso desde el portal de Azure, recuerda que necesitas tener ya una cuenta:
Crea tu Azure Static Web App entrando aquí
Al entrar busca el servicio y da click en el
Configura tu suscripción (lo más seguro es que solo tengas una)
Selecciona un grupo de recursos
Dale un nombre cool ;)
Elige la ubicación adecuada, la más cercana a ti o a tu público objetivo
Conecta tu cuenta de Github y selecciona tu repositorio
Crea tu repositorio (antes de buscarlo en Azure)
- Sube los archivos de tu página web (add, commit y push)
Actualiza tu página para verificar los archivos
Selecciona tu rama en el portal de Azure
- Revisa y crea tu servicio
- Verifica que tu servicio esté ya disponible en línea
- Agrega tu propio dominio a tu servico, desde la pestaña dominios personalizados (el tiempo de espera depende de tu proveedor)
- Recuerda que el certificado de seguridad (SSL) es gratis y se configura de forma automática
- Verifica el deploy en tu workflow de Github Actions. El archivo .yml es lo más importante en este servicio, ya que tiene toda configuración necesaria para desplegar actualizaciones.
- ¡Ya tienes todo listo! Ahora puedes modificar todo lo que necesites para tu página web y añadir nuevas características
Te sugiero comenzar a utilizar git flow para mantener un orden en tu creación de características nuevas. Aprende rápido a usar Gitflow
Puedes ver mi CV (no actualizado) aquí
Una demo de una app web con Flutter, montada en Azure Static Web Apps aquí
Y una página de mis servicios aquí
Puedes crear un blog igual que este, entrando a Hashnode, ¡es gratis!
Ó solicita un tutorial en español, escríbeme
¡Saludos! :D