Despliega React-App en Netlify Gratis + CI/CD

Netlify es una plataforma que en su plan basic o gratuito permite un ancho de banda de 100GB mensuales, 300 minutos de build y un hilo para la compilación/construcción de nuestras aplicaciones.

Necesitamos tener:

1. Git instalado en el ordenador.
2. Cuenta de Github.
3. Cuenta de Netlify.
4. Una aplicación contruida con React para desplegar.

La aplicación que voy a desplegar es https://github.com/raulcr98/qr-generator-react, una que construí en un tutorial anterior, puedes ver el artículo aquí: https://binary-coffee.dev/post/como-crear-codigos-qr-con-react.

Pasos:

1. Lo primero que debemos hacer es crear un nuevo repositorio en GitHub.

2. Luego abrimos la terminal en la carpeta de nuestro proyecto y ejecutamos:

echo "# test" >> README.md
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/username/repository_name.git
git push -u origin main

3. Vamos a Netlify y nos logueamos. Y desde la vista de inicio seleccionamos New site from Git.

4. En el siguiente paso seleccionamos GitHub y luego el repositorio que creamos en el paso 1. Es posible que no te salga si no permites que tenga acceso a todas tus repositorios.

5. Luego seleccionas la rama main, el build command debe ser yarn build y Publish directory /build. Presionamos en Deploy site.

6. Vamos a la página inicial y clickeamos en sites el proyecto que acabamos de crear. Y nos aparecerá la url de nuestra página.

7. Si deseamos cambiar el dominio de nuestra web simplemente vamos a Domain Settings -> Options -> Edit site name y cambiamos por el de nuestra preferencia.

Ahora cada vez que realicemos un cambio en nuestro proyecto solo debemos subir los cambios al repositorio en GitHub y automáticamente se actualizará nuestro proyecto.

Esto es todo espero que haya sido de utilidad. Cualquier duda o sugerencia puedes hacerme saber mediante los comentarios.