Lanza tu sitio web con Cloudflare Pages en 2026

1. Introducción al curso: Hola a todos, y bienvenidos al lanzamiento de su sitio web con CloudFlare Pages Course Mi nombre es Anor Pretoris y seré instructor para este curso Entonces solo para darte un breve resumen de lo que vamos a hacer. Entonces, esencialmente, vamos a, como mencioné en el curso, lanzar nuestro sitio web con CloudFlare Pages Pero en cuanto a las tecnologías y demás, vamos a asegurarnos de que tenemos un proyecto listo para funcionar y ese proyecto luego se cargará a un repositorio Github y se sincronizará a través de Github desktop. Como puedes ver aquí, tengo una aplicación muy sencilla que tiene, como puedes ver un archivo css style dot, script dot js file y un index dot HML, y todos estos forman juntos como parte de mi aplicación de muestra Idealmente, ya deberías tener un proyecto que quieras aplicar e implementar. Ahora, esencialmente, una vez que tengas este proyecto configurado, entonces vas a sincronizarlo a través del escritorio de GitHub para que puedas empujarlo a tu repositorio GitHub Después de lo cual luego vas a crear una cuenta de páginas de CloudFlare a la que luego vas a seguir adelante y asegurarte de que se construye y luego se va a implementar Después de lo cual podrás acceder a él a través de un nombre de dominio autogenerado, cual es gratuito, que luego podrás visitar para acceder a tu sitio web. Como pueden ver aquí, tengo un sitio web muy muestra aquí por adelantado Entonces eso es esencialmente lo que vas a aprender en este curso, y las páginas de CloudFlare son notorias por ser excepcionalmente rápidas Entonces va a ser un proceso muy fácil si solo quieres algo para armarte y ponerte en marcha rápidamente. Entonces eso es todo en lo que nos vamos a centrar en este curso, y espero verte en este curso. Adiós. 2. Configura una cuenta en GitHub: Hola a todos, y bienvenidos a la siguiente actividad práctica, que va a estar enfocada en crear una cuenta de Github y asegurar que todo esté configurado correctamente. Lo primero que quieres hacer es ingresar en Github en tu buscador. Aquí estoy en Google y voy a decir búsqueda de Google. Entonces quieres seleccionar aquí este enlace que dice Github. Bien. Ahora, una vez que estemos en la página web de GitHub, entonces queremos seguir adelante y hacer clic en Registrarse en la esquina superior derecha. Y luego, como puedes ver, podemos crear nuestra cuenta gratuita, y podemos hacerlo registrándote Github continuando con una cuenta de Google, con una cuenta de Apple, o puedes escribir manualmente tu correo electrónico, tu contraseña, tu nombre de usuario, tu región. Y por supuesto, puedes consultar las siguientes opciones aquí abajo antes de decir crear tu cuenta. Entonces lo que te recomendaría hacer ahora es seguir adelante y hacer precisamente eso. Entonces decide cómo quieres registrarte en tu cuenta de Github y regístrate. Es posible que tengas que seguir adelante y completar un rompecabezas de verificación y luego verificar tu correo electrónico también. Entonces, hay algunas formas en las que puede que necesites hacerlo. Pero después de que lo hayas hecho, entonces al final, serás redirigido a tu página de tablero de Github, y ahí es donde nos vamos a volver a conectar Entonces, mientras tanto, adelante y configura tu cuenta de Github en consecuencia, como ahora estoy mostrando en mi pantalla. Bien, así que bienvenido de nuevo. Entonces enhorabuena si llegaste a este paso aquí. Entonces como puedes ver ahora, ahora estamos en el escalón donde estamos en nuestro tablero de Github. Entonces, si ves esta página aquí mismo, bien hecho, has seguido adelante y configuraste tu cuenta de GitHub. Ha sido creado, y está completamente listo para funcionar. Y sigamos adelante y comencemos en la siguiente lección. 3. Crea un repositorio de GitHub: Todo bien. Continuemos ahora y creamos nuestro primer repositorio Github. Probablemente te estés preguntando qué es un repositorio. Un repositorio Github es esencialmente una ubicación centralizada para almacenar el código fuente de nuestro proyecto. Eso es exactamente lo que vamos a hacer ahora. Vamos a crear un repositorio para hacer precisamente eso. Podemos decir crear repositorio. Como puedes ver ahí, va a mostrar al propietario, así que este va a ser nuestro nombre de usuario asociado a nuestra cuenta Gu, y queremos dar a nuestro nombre de repositorio. Voy a llamarlo muestra de reposo. Puedes darle cualquier nombre que desees y cualquier descripción que desees. Entonces aquí, voy a decir sitio web, lanzamiento. App. Por lo que sólo se le puede dar una descripción. Ahora, bajo la visibilidad, solo para asegurar que el despliegue transcurra sin problemas la primera vez, lo vamos a poner en público. Hay momentos en los que quizás necesites integrar más permisos si decides configurarlo en privado, pero no vamos a entrar tanto en detalle en este curso. Entonces también puedes agregar un archivo léeme, así que asegúrate de configurarlo, y esto esencialmente te permitirá escribir una descripción más larga sobre el proyecto S aquí. Una vez que estés satisfecho con todo, puedes decir crear repositorio. Y eso va a crear nuestro repositorio así como así, y podemos ver toda la estructura aquí, así que estará en la rama principal aquí. Podemos ver en la esquina superior izquierda nuestro nombre asociado con repositorio asociado que acabamos crear y la visibilidad en público. Todo bien. Entonces así es como puedes crear tu repositorio Github. 4. Cómo configurar GitHub para escritorio: Derecha. Entonces, lo siguiente que queremos hacer es esencialmente configurar Github desktop, que es esencialmente una interfaz que nos va a permitir sincronizar nuestro código fuente de nuestra máquina local a nuestro repositorio Github en línea Así que piensa en ello como un puente de nuestro código fuente de local a un entorno más basado en línea. Todo bien. Entonces lo que quieres hacer en tu buscador es escribir en GitHub desktop download, digamos Google Search. Y aquí veremos una opción que dice descargar GitHub Desktop, para mayor claridad, puedes investigar la URL aquí que dice desktop.github.com descargar GitHub Desktop, para mayor claridad, puedes investigar la URL aquí que dice desktop.github.com, forward slash download fordslash. Ahora, estoy en un dispositivo Windows, así que voy a decir descargar para Windows. Sin embargo, si estás en Mac, si te desplazas hacia abajo, podría mostrarte aquí automáticamente o te va a mostrar aquí abajo, Mac para instalarlo para Guacamayos Se puede descargar para Guacamayo justo aquí abajo. Entonces tienes esa opción en juego aquí. Todo bien. Entonces lo que podemos hacer ahora es descargar para Windows, y eso va a descargar el instalador de instalación, se podría decir. Entonces aquí va a tomar unos momentos. Así que solo esperemos eso. Y una vez que se haya descargado, podemos seguir adelante e instalarlo en consecuencia. Así que solo esperemos eso. Y ahí está. Así que aquí está Github Desktop setup EXC para que podamos seleccionar eso Bien. Y luego va a ir en un seto e instalarlo en nuestra máquina Por lo que sí toma unos momentos, así podemos ver que apenas se está cargando actualmente, y solo queremos esperar a que eso se establezca. Bien. Y aquí está. Aquí está la pantalla de animación aquí. Y puedes ver aquí abajo que está instalando actualmente y podemos ver esa Mini barra de progreso. Así que solo esperemos a que esto se instale en nuestra máquina, y luego podemos ir de ahí Bien, así que bienvenidos de nuevo Entonces ahora podemos ver que se ha instalado, y vamos a ver esto, se podría decir interfaz aquí para empezar. Tan bien hecho, has instalado con éxito Github desktop. Ahora, a veces también agrega un acceso directo a tu escritorio también. Entonces, si tuvieras que minimizar todo, entonces puedes ver que tenemos GitHub Desktop aquí también. Tan bien entonces al llegar a este punto. 5. Sincroniza nuestro código fuente: Bien, así que lo siguiente que queremos hacer es sincronizar nuestro proyecto con GitHub Desktop y también nuestro repositorio GitHub Pero lo primero que quieres hacer es que queremos conectar GitHub Desktop a GitHub mismo. Entonces vamos a hacer precisamente eso. Entonces podemos ir a archivo, luego opciones. Después de lo cual quieres decir iniciar sesión en github.com, asegúrate de seleccionar Para que puedas seleccionar esa opción. Entonces quieres iniciar sesión con tu navegador. Adelante y di continuar. Y luego va a verificar la sesión aquí. Así que actualmente estamos iniciados sesión a través de nuestra cuenta de GitHub, como puedes ver aquí. Por lo que queremos seguir verificando esa sesión. Entonces queremos autorizar GitHub desktop para acceder a nuestros repositorios, datos, flujo de trabajo, etcétera, así que quieres autorizar Entonces puedes decir open GitHub desktop, y ahí podemos ver que ahora está vinculado a nuestro repositorio aquí llamado sample repo Así que asegúrate de haber seguido adelante y hecho precisamente eso. Todo bien. Ahora lo siguiente que queremos hacer es que queremos clonar un repositorio desde Internet. Actualmente, echemos un vistazo al espacio de trabajo después de cerrar todo aquí. Actualmente, tengo mi proyecto en mi escritorio en un archivo conocido como mi proyecto y este contiene un índice simple sobre archivos HML, CSS y JavaScript. Esencialmente, lo que quiero hacer es que quiero seguir adelante y asegurarme de que se hayan subido a este repositorio. Ahora este repositorio, podemos clonar en nuestro escritorio, y luego la primera vez, podemos simplemente arrastrar nuestros archivos a esa carpeta aquí, y luego a partir de ese momento, vamos a estar trabajando dentro de ese archivo singular, que irónicamente tiene el mismo nombre que nuestro Esto va a tener sentido cuando lo demuestre. Entonces para hacerlo, queremos seguir adelante y abrir GitHub desktop. Entonces queremos decir clonar un repositorio desde Internet. Queremos seleccionar nuestro repositorio aquí y decir Clonar. Bien. Entonces hemos seguido adelante y clonamos nuestro repositorio. Entonces ahora si tuviéramos que minimizar, podemos ver que lo tenemos aquí en nuestro escritorio ahora conocido como sample dash repo Entonces lo que quiero hacer es visualizar eso en el código de Visual Studio. Entonces voy a dar click en el icono de la parte superior izquierda, ir a Archivo, Abrir carpeta. Escritorio, y voy a seleccionar Repo de muestra. Y como podemos ver, por defecto, va a tener un archivo léeme, y este es el archivo que seguimos adelante y creamos por defecto. Entonces esto es una confirmación aquí. Ahora, lo siguiente que queremos hacer es simplemente mover todos nuestros archivos. Así que idealmente ya deberías tener un proyecto con el que quieras trabajar. Para que puedas abrir esa carpeta de proyectos con la que estás trabajando. Entonces aquí estoy abriendo mi proyecto. Y aquí tengo mis archivos índice, guión y estilo. Voy a destacar eso y moverlo al repositorio de muestra. Sólo tenemos que hacer esto una vez. Y ahora vamos a trabajar permanentemente con Sample Repo ahora porque está conectado y sincronizado con GitHub Desktop y Github Justo ahora necesitamos subir nuestro código fuente. Pero ahora si vamos a GitHub Desktop, podemos ver todos estos archivos en su lugar. Index HML Script JS y CSS de inicio ahora están todos en este particular como podemos ver carpeta y está siendo recogido por GitHub Desktop, esta interfaz Podemos ver si abrimos código de Visual Studio, ya están esos archivos en su lugar. Perfecto. Ahora lo que queremos hacer es que solo queremos hacer la sincronización ahora. Así que queremos seguir adelante y empujar todos estos archivos aquí y subirlos a nuestro repositorio Github para que sea accesible a través de Github. Entonces aquí tenemos que darle un nombre para un resumen. Entonces aquí voy a decir proyecto, sube. Y puedes agregar una descripción aquí, y quieres comprometer tus tres archivos a la rama principal. Y por supuesto, eso se correlaciona con rama principal de nuestro repositorio aquí también Va a aparecer aquí. Y luego quieres decir push origin, así que esto va a empujar todos nuestros archivos a nuestra rama principal, que va a aparecer dentro nuestro repositorio conocido como repositorio de muestra Y si tuviéramos que refrescar nuestro repositorio aquí, aquí podemos ver que aquí tenemos todo en su lugar. Tenemos todos nuestros archivos, así que ahora estamos completamente sincronizados. 6. Configura una cuenta de Cloudflare Pages y lanza tu sitio web: Ahora lo siguiente que queremos hacer es configurar nuestra cuenta de CloudFlare y esencialmente, lanzar nuestro sitio web En primer lugar, quieres ir a Google y escribir en las páginas de CloudFlare Entonces puedes decir Google Search y aquí quieres seleccionar las páginas de CloudFlare Bien. Y lo siguiente que quieres hacer es decir que te registres. Y luego podrás decidir, nuevo, cómo quieres inscribirte en tu cuenta. Si quieres ir a Google, Apple, Github, o si quieres ingresar tu correo electrónico y contraseña directamente como está, realmente depende de ti. Entonces para mayor claridad aquí, te voy a decir lo que voy a hacer para que puedas ver aproximadamente el mismo tipo de marcado al final después de que verifiques tu correo electrónico y tal como voy a poner manualmente en mi correo electrónico y voy a poner mi contraseña y verificar que soy humano y me voy a inscribir porque quiero mostrarte cómo puedes configurar con Github En lugar de hacerlo de la manera más fácil aquí, sí quiero mostrarte el formato por defecto podrías decir en cuanto a cómo hacerlo. Entonces ese es el razonamiento detrás de eso. Entonces voy a ir al correo electrónico y pasar por Drew. Te recomiendo hacer lo mismo, realizar la verificación e inscribirte. Entonces tendrías que ir a tu correo electrónico y también verificar tu correo electrónico, hacer clic en un enlace ahí para verificar y te va a llevar a la página que te voy a mostrar después de que todo eso haya sido completado. Entonces, por primera vez, te recomendaría simplemente hacerlo de la manera manual y luego cuando estés más cómodo, puedes ir directamente a la ruta Github, pero esa es la razón por la que voy a estar haciéndolo de manera más larga. Así que sigamos adelante y comencemos. Bien, bienvenido de nuevo. Confío después de haber hecho clic en el botón de verificación o en el enlace de tu correo electrónico, eventualmente serás redirigido a una página que se ve así Ahora bien, esto es a lo que me refiero antes haciendo de la manera manual. Entonces aquí podemos decir conectar Github, y eso va a seguir adelante y nos incitará a instalar un CloudFlare autorizado y los trabajadores y páginas, y podrás decidir si lo deseas para todos los repositorios o solo seleccionar repositorios y seleccionarlo. Entonces, realmente depende de ti. Así que aquí, sólo voy a decir seleccionar repositorio. Entonces voy a decir instalar y autorizar. Entonces eso sólo va a llevar un momento. Aquí se va a mostrar verde ahora y después podemos proceder a continuar con Github ahora. Entonces podemos ver que ha seleccionado nuestro repositorio aquí, por supuesto, puede simplemente dar click sobre eso y decir siguiente. Entonces podemos simplemente desplazarnos hacia abajo y ver todo como se dice aquí. El nombre del proyecto, el repositorio. Adicionalmente, puedes agregar comandos de compilación y ajustarlos aquí, pero vamos a dejar todo por defecto y decir deploy. Esto es esencialmente para lanzar nuestra aplicación, solo quieres seguir adelante y es posible que necesites agregar algo aquí. Vamos a comprobarlo. Uh, si, eso se ve bien. Así que solo quieres seguir adelante e implementar tu aplicación aquí. Entonces podría estar incitándonos a ajustar el nombre del proyecto si no dice desplegar, así que solo voy a decir aquí app Después desplácese hacia abajo. Ahora, en el evento, como podemos ver aquí, lo cual es una buena lección de que la opción de despliegue o botón aquí no responde, lo que puedes hacer es simplemente refrescar tu página aquí. Bien. Simplemente puedes seguir adelante y ver conectar con Github nuevamente. Solo tienes que seleccionar tu repositorio, pasar a la siguiente etapa, y solo quieres dejar todo como está y ver desplegar. A veces ese error ocurre a veces y es bueno que lo estemos viendo por primera vez aquí. Eso es sólo algo que quiero mencionar que puede ocurrir. Como puedes ver ahora, solo está configurando nuestro repositorio y solo va a tomar unos momentos. Téngalo en mente si sucede. Pero desgraciadamente, en mi caso, pasó a ser que no me correspondía. Aquí podemos ver que todo ha sido inicializado en el entorno de compilación Stalling y nuestra aplicación está a punto de ser Todo lo que tenemos que hacer es esperar unos momentos. Creo que tardará quizá 20 segundos. Si no pausa el video y luego podemos ir a un seto y esperar a que se complete, pero no debería tomar vamos 20 segundos. Ahí vamos la construcción ha sido terminada. Se ha desplegado nuestra aplicación. Ahora lo que podemos hacer es ir a dominios aquí. Puedes hacer clic derecho y abrirlo en un nuevo chat y esencialmente CloudFlare nos va a proporcionar un valor predeterminado Se podría decir ¿cómo puedo decir aquí un nombre de dominio predeterminado? Como puedes ver, se le conoce como la URL del trabajador. Es público, y en realidad puedes visitarlo. Entonces si hago clic derecho y abro el Enlace en una Nueva Pestaña, aquí lo tenemos. Aquí está mi cartera en funcionamiento y accesible con un nombre de dominio predeterminado que me ha sido asignado. Entonces eso es todo, para que puedas crear una cuenta de CloudFlare y cómo puedes implementar esencialmente tu aplicación desde un repositorio Github Bien, chicos, así que eso es todo para esta lección. 7. Cómo gestionar las actualizaciones del código fuente: Todo bien. Ahora, en esta siguiente lección, nos vamos a centrar en administrar nuestra actualización del código fuente. Entonces digamos que hay un cambio que queremos hacer en nuestra aplicación, y queremos redesplegar Así que todo se va a integrar automáticamente ahora un Cloudflare Así que en realidad no tienes que hacer nada. Se va a automatizar. Ahora, sólo voy a mostrarte una prueba aquí. Entonces digamos que ajusto esto, solo di hola, soy Ono como ejemplo. Entonces voy a ir a mi código fuente aquí, y solo voy a hacer este cambio mínimo aquí, y solo voy a saludar, soy ono. Así como así. Y podemos ver que ha sido modificada. Entonces si miramos en nuestro directorio modificado, si vamos a GitHub Desktop, va a recoger esto. Entonces el rojo aquí, por supuesto, era el código antiguo y el verde es el código de reemplazo. Entonces va a decir actualizar el índice a HML. Entonces a veces el hitle aquí será dinámico y actualizado. Así que cometamos esto y empujemos este código fuente ahora. Bien. Y si volvemos a nuestro repositorio, solo digamos despedir esto y podemos ver que va a empujar este ajuste aquí, actualizar index dot HML a Cloud Entonces, si podemos ver aquí, podemos hacer clic en Build in progress, y podemos ver que esto es perteneciente a Update index dot HTML, que se está empujando ahora y se va a desplegar en cualquier momento ahora, y luego podremos actualizar nuestra aplicación y luego ver este cambio que se ha actualizado. Entonces, si me acabo de desplazar hacia arriba aquí, indexar en HML, esa compilación en particular se ha completado, actualicemos esta página Y podemos ver que dice hueco soy honor. Que puedas administrar cualquier actualización de código a tu aplicación. Como puedes ver, es muy fluida en toda tu aplicación, como podemos ver aquí con Get up Desktop, tu repositorio y CloudFller. Entonces eso es todo para esta lección. Y si tuvieras que actualizar tu repositorio, ahora podemos ver que esa actualización en particular ha sido todo un éxito. 8. Creación de tu propio proyecto: Hola a todos, y bienvenidos a la siguiente lección, que va a estar enfocada en crear tu propio proyecto. Bien, crea tu propio proyecto. Ahora que tienes todas estas nuevas habilidades que has adquirido, ahora es el momento de que pongas todo eso uso y crees tu propio proyecto. Lo que puedes hacer ahora es amable dirigirte a la sección de proyectos y recursos de este curso para obtener más información sobre cómo puedes seguir adelante y asegurarte de seguir el proyecto y luego también cómo puedes seguir adelante y compartirlo también para que pueda echar un vistazo y dejar mis comentarios. Bien, chicos. Eso es todo para esta lección. 9. ¡Gracias!: Hola a todos. Y sólo una nota final por mi parte, y eso es sólo gracias por decidirse a tomar este curso. Realmente espero que te haya ayudado a obtener algunos conocimientos perspicaces Así que muchas gracias de nuevo, y es muy apreciado que decidieras inscribirte conmigo en este viaje. Otra cosa que quería mencionar es por favor considere dejar una reseña para esta clase. Se agradecería profundamente. No tienes que hacerlo si no quieres, pero siempre es útil en mi caso tratar de entender los comentarios que me están dando y cómo mejorar mejor mis clases. Gracias de nuevo y buena suerte en tu viaje.