You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
3 Hrs
48 Min
24 Seg

Desplegar en Cloudflare Pages

23/25
Resources

How to deploy a website using Astro and Clover?

Want to integrate a custom domain for your Astro-built website and deploy it efficiently? Here, we break down the deployment process using Clover, taking advantage of Astro's server integration and ensuring your site is fast and efficient. Upon completion, you will learn how to connect your domain using affordable and accessible tools such as Namecheap.

What is the first step in deploying our Clover site?

Before you start deploying, make sure all changes are updated in your repository, preferably hosted on GitHub. Clover is an ideal tool for this purpose, as it allows the deployment of static websites with advanced integrations for Astro. Here are the steps to follow:

  1. Update your repository: Make sure all changes are uploaded and committed to GitHub.
  2. Create a Clover account: This is crucial for the next step configurations.
  3. Navigate to the Clover dashboard: Once inside, go to the Pages section where you can create a new project and connect your GitHub repository.

How do we connect Clover to our GitHub repository?

Connecting Clover to GitHub allows us to automate the deployment and management of the site. The steps are simple:

  1. Create a new project in Clover: Do it from the Pages section.
  2. Connect to Git: When you create the new project, select "Connect to Git" and authorize access to your repositories.
  3. Select your repository: Search and choose the specific repository that contains your web project.
  4. Choose the Astro framework: Configure the necessary elements for integration and deployment, such as selecting Astro as framework.

How to configure the deployment environment?

There are crucial aspects to consider in the configuration and they must be adjusted to avoid problems. Here are the details:

  • Default configurations: Clover has support for Astro, so many configurations are automatically adjusted.
  • Add environment variable: It is necessary to assign an environment variable called no version to ensure the correct functioning of the application.
  • Run local build: Before deploying, use npm run build to make sure there are no errors.

How to integrate a custom domain?

When you want your site to be accessible through a unique domain, here are the basic steps to follow:

  1. Purchase a domain from Namecheap: Namecheap is recommended for its ease of use and low cost.
  2. Change the DNS: Configure the DNS of the domain through Clover so that the site responds to the purchased domain.
  3. Configure domain security: Enable free SSL provided by Clover and ensure that the site uses HTTPS.

What performance improvements does Clover offer?

Clover not only facilitates deployment, but also optimizes performance thanks to:

  • Caching systems: Improve site loading speed.
  • Content compression: Ensures faster data transmission.
  • Automatic optimization: Facilitates administration and configuration, as it is integrated with Clover's DNS.

Conclusion

Deploying your website built on Astro using Clover is not only efficient, but optimizes performance and provides security. Properly configure your environment, connect your domain and start sharing your creation with the world. Remember, as you continue to learn and hone your web development skills, Clover and Astro are your allies in achieving a robust and professional website. Keep going, the sky is the limit!

Contributions 8

Questions 4

Sort by:

Want to see more contributions, questions and answers from the community?

Aqui los que precionamos "Guardar e implementar" antes de configurar la variable de entorno JAJAJA ![](https://static.platzi.com/media/user_upload/image-644a10d0-2fed-4959-a3df-d51eec6c2152.jpg)
Hoy 22-02-2024 no es necesario colocar el nombre de la variable, dejala por defecto!

lol por ansioso le di a “Guardar e implementar” antes de crear la variable de entorno, eso me enseñara a primero terminar de escuchar la explicación

Parece que el link de la documentacion de Cloudflare esta roto.

### ¿Qué es Cloudflare y cómo se utiliza con Astro? **Cloudflare** es una plataforma de servicios web que proporciona una variedad de herramientas y servicios para mejorar el rendimiento, la seguridad y la confiabilidad de los sitios web. Entre sus servicios más destacados se encuentran la red de entrega de contenido (CDN), protección DDoS, administración de DNS y optimización del rendimiento. ### Uso de Cloudflare con Astro: Cloudflare puede mejorar significativamente la experiencia de usuario y la seguridad de tu sitio web desarrollado con Astro. ### Beneficios de usar Cloudflare con Astro: 1. **Mejora del Rendimiento**: * **CDN**: Cloudflare tiene una amplia red de servidores en todo el mundo. Al utilizar su CDN, el contenido de tu sitio web se almacena en caché en servidores cercanos a tus usuarios, reduciendo el tiempo de carga de las páginas. * **Optimización de imágenes**: Cloudflare puede optimizar automáticamente las imágenes de tu sitio web, reduciendo el tamaño de los archivos y acelerando el tiempo de carga. 2. **Seguridad**: * **Protección DDoS**: Cloudflare protege tu sitio contra ataques DDoS, que pueden causar interrupciones significativas. * **Firewall de Aplicaciones Web (WAF)**: Filtra y bloquea el tráfico malicioso para proteger tu sitio web de amenazas comunes. * **Certificados SSL**: Cloudflare proporciona certificados SSL gratuitos, asegurando que el tráfico entre tu sitio web y tus usuarios esté cifrado. 3. **Fiabilidad**: * **Redundancia**: Cloudflare mejora la disponibilidad de tu sitio web al distribuir el contenido en múltiples servidores. * **Balanceo de carga**: Redirige el tráfico a diferentes servidores en función de la carga y la disponibilidad, asegurando que tu sitio web se mantenga accesible incluso durante picos de tráfico. 4. **Administración de DNS**: * **DNS Rápido y Seguro**: Cloudflare ofrece un servicio de DNS rápido y seguro que puede mejorar los tiempos de resolución de tu dominio. ### Ejemplo práctico de configuración de Astro con Cloudflare: 1. **Configuración del DNS**: * Apunta el DNS de tu dominio a los servidores de Cloudflare. Esto se hace desde el panel de control de Cloudflare, siguiendo las instrucciones proporcionadas al agregar tu dominio. 2. **Implementación de Astro en Cloudflare Pages**: * Cloudflare Pages es una plataforma de alojamiento estático gratuita que se integra perfectamente con Astro. * Puedes desplegar tu sitio Astro directamente en Cloudflare Pages, aprovechando la integración con GitHub y otras características de desarrollo continuo (CI/CD). ### Pasos para desplegar un sitio Astro en Cloudflare Pages: 1. **Crear un Proyecto en Cloudflare Pages**: * Ve a la consola de Cloudflare y selecciona "Pages". * Crea un nuevo proyecto y conecta tu repositorio Git (por ejemplo, GitHub). 2. **Configurar el Proyecto**: * Especifica los comandos de construcción y directorio de salida. Para Astro, el comando de construcción es `npm run build` y el directorio de salida es `dist`. 3. **Desplegar el Sitio**: * Cloudflare Pages construirá y desplegará automáticamente tu sitio cada vez que hagas un commit en tu repositorio Git. ### Resumen: **Cloudflare** es una herramienta poderosa que puede mejorar la velocidad, seguridad y fiabilidad de tu sitio web desarrollado con Astro. Utilizando servicios como CDN, protección DDoS, administración de DNS y Cloudflare Pages, puedes asegurarte de que tu sitio web tenga un rendimiento óptimo y esté bien protegido contra amenazas.
Hola , tengo una consulta. Como puedo subir el proyecto a un hosting por medio de ftp? intenten subirlo pero no funciona el sitio. gracias
Demasiado bueno el curso, Astro es una herramienta muy poderosa y facil si se tiene conocimiento base de programacion. A mi que me gusta es python y programas mas del lado del backend siempre me da pereza programar en JS lol, pero con Astro esta facil y se ve muy bien ! gracias Platzi y Oscar por este excelente curso!

Variables de entorno