How to: Publicar página web estática con Azure Static Web Apps, CI/CD, Github Actions, Dominio y SSL.

Christian Pineda Berruecos's photo
Christian Pineda Berruecos
·Mar 4, 2022·

3 min read

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:

Templates

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.

Descargar Visual Studio Code

Descargar Live Server

  1. 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

  1. Configura tu suscripción (lo más seguro es que solo tengas una)

  2. Selecciona un grupo de recursos

  3. Dale un nombre cool ;)

  4. Elige la ubicación adecuada, la más cercana a ti o a tu público objetivo

  5. Conecta tu cuenta de Github y selecciona tu repositorio

  6. Crea tu repositorio (antes de buscarlo en Azure)

  7. Sube los archivos de tu página web (add, commit y push)
  8. Actualiza tu página para verificar los archivos

  9. Selecciona tu rama en el portal de Azure

  10. Revisa y crea tu servicio
  11. Verifica que tu servicio esté ya disponible en línea
  12. Agrega tu propio dominio a tu servico, desde la pestaña dominios personalizados (el tiempo de espera depende de tu proveedor)
  13. Recuerda que el certificado de seguridad (SSL) es gratis y se configura de forma automática
  14. 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.
  15. ¡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!

Crea tu blog con Hashnode

Ó solicita un tutorial en español, escríbeme

¡Saludos! :D

 
Share this