¡Hey Coders!, Bienvenidos a este tutorial sobre cómo desplegar tu sitio web utilizando Cloudflare Pages, Cloudflare Pages es una solución de alojamiento (Hosting) y despliegue extremadamente fácil, rápida y segura para desarrolladores frontend que buscan crear sitios web estáticos y aplicaciones JAMstack.
En este tutorial, aprenderás a crear un proyecto en Cloudflare Pages, conectarlo con un repositorio de GitHub, configurar el proceso de construcción y desplegar tu sitio en la web. Vamos a desglosar estos pasos para que puedas tener un flujo de trabajo de integración y despliegue continuo (CI/CD) para tu proyecto en poco tiempo.
Este tutorial está destinado a desarrolladores que tienen un proyecto frontend listo para desplegar, que puede ser en cualquier framework, aunque en mi caso lo probaré con un proyecto de React, aunque puedes usar cualquier otro, ya sea construido con un generador de sitios estáticos como Next.js, Gatsby, Hugo, Jekyll, o cualquier otro que pueda construirse en un sitio web estático.
Requerimientos
Para poder usar Cloudflare Pages, necesitarás contar con los siguiente Requerimientos:
- Cuenta de Cloudflare: Necesitarás una cuenta en Cloudflare para usar Cloudflare Pages. Si no tienes una, puedes crearla fácilmente en el sitio web de Cloudflare.
- Repositorio en GitHub: Cloudflare Pages se integra con GitHub para el despliegue continuo. Necesitarás tener un repositorio en GitHub con el código de tu proyecto. En este caso puedes usar este repositorio de una aplicación de adminsitracion de Gastos en React que cree en el pasado.
- Conocimientos básicos de Git: Dado que Cloudflare Pages se integra con GitHub, necesitarás saber cómo hacer push a tus cambios a tu repositorio para desplegar actualizaciones de tu sitio.
- Conocimientos básicos de línea de comandos y YAML (opcional): Si bien no es estrictamente necesario, puede que necesites usar la línea de comandos y editar archivos YAML para configurar tu despliegue, especialmente si estás utilizando características avanzadas como las variables de entorno o la configuración de rutas y redirecciones.
Preparacion del proyecto
Primero vamos a clonar este proyecto:
git clone https://github.com/fazt/react-expense-tracker
Luego elimina la carpeta .git, y subelo a tu propia cuenta.
Esto de descargarlo y subirlo es solo con fines educativos, es mucho más fácil hacer un fork.
Entonces con el proyecto ya subido a tu cuenta de Github, ahora pasemos a desplegarlo en Cloudflare Pages.
Pasos para desplegar un proyecto frontend en cloudflare Pages
Paso 1: Crear una cuenta de Cloudflare
Si aún no tienes una, ve a Cloudflare y crea una cuenta llengo en pages.cloudflare.com. Es gratis y sólo te llevará unos minutos.
Paso 2: Enlazar tu repositorio de GitHub con Cloudflare Pages
Navega hasta la sección "Pages" en tu Dashboard de Cloudflare.
Haz clic en el botón "Create a project".
Se te pedirá que conectes tu cuenta de GitHub. Asegúrate de darle a Cloudflare Pages los permisos necesarios para acceder a tu repositorio.
Una vez que hayas conectado tu cuenta de GitHub, selecciona el repositorio que deseas desplegar.
Paso 3: Configurar la construcción de tu proyecto
- En la página de configuración, debes especificar cómo Cloudflare Pages debe construir tu proyecto. Por ejemplo, si estás utilizando un generador de sitios estáticos, debes especificar el comando de construcción y el directorio de salida.
En nuestro caso como estamos usando un proyecto de React con Vitejs, vamos a hacer los siguientes pasos:
- Para un proyecto Next.js, podrías tener "npm run build" como tu comando de construcción y "out" como tu directorio de salida. Una vez que hayas llenado los detalles de construcción, haz clic en el botón "Save and Deploy".
Paso 4: Despliegue de tu sitio
- Cloudflare Pages ahora construirá y desplegará tu sitio. Este proceso puede llevar algunos minutos. Puedes seguir el progreso en la página del proyecto.
- Una vez que el despliegue sea exitoso, recibirás una URL generada automáticamente donde tu sitio estará alojado. También puedes configurar tu propio dominio personalizado en la sección "Custom domains".
¡Eso es todo! Ahora tienes un sitio desplegado con Cloudflare Pages. Recuerda que cada vez que hagas push a tu repositorio, Cloudflare Pages desplegará automáticamente una nueva versión de tu sitio.
Recuerda que para hacer cambios solo necesitas hacer un push a la rama que has desplegado que en nuestro caso es la rama master