Inicia tu sitio web gratis con GitHub Pages

1. Introducción: Bienvenido a la clase donde te enseño sobre cómo puedes alojar tu sitio web con Páginas GitHub de forma gratuita, con su.com o cualquier dominio. Pero hay una pequeña captura. Solo puede alojar sitios web estáticos basados en HTML, React, Angular o tecnologías similares. Sin embargo, también puedes hacer llamadas API para mostrar si gráficos bursátiles, etc. Esencialmente, no puedes alojar sitios web dinámicos que usen bases de datos como MySQL o tecnologías como PHP, WordPress, larvas, Ahora, ¿necesitas tener Git instalado en tu sistema para que esto funcione? Y la respuesta corta es no. ¿ Solo necesitas listos los archivos estáticos de tu sitio web? Un dominio que es totalmente opcional, URL de tu sitio web se verá así. Si no tienes un nombre de usuario de dominio.. io, y se verá así si lo haces. Y una cuenta de GitHub, eso es todo. Mi nombre es Shelby se presumirá que soy un desarrollador full-stack, profesor de productividad y un ex fundador de startup. Tengo muchos otros cursos aquí en Skillshare. Asegúrate de echarles un vistazo. Y también puedes visitar mi página web, refugio, hemos punto com para encontrar más de mí. Ahora saltemos directamente al curso y alojemos tu sitio web en Páginas de GitHub. 2. Git vs Github: ¿ Cuál es la diferencia entre Git y GitHub lo obtendrá ya que el software que descargues en tu computadora para rastrear los cambios en tu código, si estás desarrollando un sitio web, software o aplicación, el las carpetas que quieres que rastree se denominan repositorios de Git. Github, por otro lado, es un sitio web que puedes usar para alojar esas poses o carpetas libres de armas en su sitio web para trabajar con otros desarrolladores en el mismo proyecto. Para esta clase, no necesitamos instalar Git. Solo necesitamos una cuenta GitHub. 3. Cómo inscribirse y crear una reposición en Github: De acuerdo, así que para poder alojar tu sitio web en páginas de GitHub, necesitas tener una cuenta de GitHub.com. Y para eso inicia sesión en GitHub.com, ingresa tu dirección de correo electrónico, y haz clic en Regístrate en GitHub, lo cual voy a hacer muy rápido aquí. Y da clic en Regístrate para GitHub. De acuerdo, así te muestra una animación muy chula que dice, Bienvenidos a levantarte, comencemos la aventura. Y tu correo electrónico. Se toma el correo automáticamente. Por lo que voy a dar clic en Continuar. Ahora necesitamos crear una contraseña aquí. Por lo que voy a crear una contraseña y dar clic en Continuar. Ahora dice ingresar un nombre de usuario. Así que ten en cuenta que cualquier nombre de usuario irrigado entra aquí será la dirección de tu sitio web de GitHub Pages. Lo que quiero decir con eso es, así que por ejemplo, si escribo Skillshare GHP, bien, Skillshare GHP es un no disponible. Entonces voy a probar con Skillshare GitHub. Muy bien. Por lo que skillshare GitHub está disponible. Por lo que mi URL de Páginas de GitHub será Skillshare, GitHub, GitHub, io. De acuerdo, así que sea cual sea el nombre de usuario que lo pongas aquí será tu URL de Páginas GitHub, ¿de acuerdo? A menos que por supuesto registres a.com o cualquier dominio. Por lo que voy a dar clic en Continuar aquí. Y dice, ¿Te gustaría recibir actualizaciones de productos y anuncios vía correo electrónico por y para sí o N para no. Por lo que voy a escribir N y dar clic en Continuar. Ahora dice que para poder verificar tu cuenta, necesitas resolver este rompecabezas. Da clic en Comenzar rompecabezas aquí. La galaxia espiral. De acuerdo, una vez más, y terminamos. Por lo que da clic en Crear cuenta aquí. De acuerdo, así que ya casi terminaste. Enviamos un código de lanzamiento para cerrar el Leap dot skillshare en bro, Don't mail.com. Entonces voy a ir a mi macho de protones en marcas. De acuerdo, por lo que hemos recibido el e-mail de GitHub con el código de lanzamiento. Y el código de lanzamiento es este. Entonces solo voy a copiar esto desde aquí y pegarlo aquí. De acuerdo, eso es todo. Sólo voy a dar click en Saltar personalización. Sí, eso es todo. De acuerdo, así que terminamos de crear nuestra cuenta de GitHub.com. Ahora necesitamos crear un repositorio donde vamos a subir los archivos de nuestro sitio web. Así que da clic en Crear Repositorio aquí. De acuerdo, Entonces al crear un repositorio para alojar tu sitio web en páginas de GitHub, hay algunas configuraciones que debes tener en cuenta. Lo primero y lo más importante que hay que tener en cuenta aquí es el nombre del repositorio. Por lo que el nombre del repositorio será tu nombre de usuario.github.io. Entonces mi nombre de usuario que he creado aquí es Skillshare get up, que se muestra aquí mismo. Entonces yo sólo voy a escribir lo mismo. Skillshare, github.github.io. De acuerdo, así que esto está disponible y necesitas escribir una descripción aquí, que de nuevo es opcional. Pero voy a escribir Skillshare, obtener un sitio web de demostración del curso ages. Y voy a dar clic en Crear Repositorio y asegurarme de que éste sea público, no privado, lo cual también es algo importante a tener en cuenta. Puedes crear un archivo léeme, pero esto es totalmente opcional. Ahora solo nos falta dar click en Crear Repositorio aquí. De acuerdo, por lo que hemos creado con éxito nuestro repositorio Skillshare, github.github.io. Y en la siguiente lección subiremos aquí los archivos del sitio web. De acuerdo, así que nos vemos en la siguiente. 4. Cómo subir archivos de sitio web: De acuerdo, ahora necesitamos subir los archivos de nuestro sitio web en GitHub.com. Entonces he creado aquí este pequeño sitio web, que te voy a mostrar muy rápido. Entonces este es solo un sitio web estático que dice que este sitio web está alojado en GitHub Pages de forma gratuita de por vida. Vas a alojar el tamaño de agarre ID y obtener ayuda para saber más. Huevo este curso de Skillshare por disparo en él. De acuerdo, un poco de marketing. Y también puedes hacer llamadas APA desde aquí así. Entonces esta es una API meteorológica llamadas que voy a hacer desde aquí. Entonces tal vez escribas un nombre de ciudad, por ejemplo, San José, y haces clic en Buscar. Y te va a mostrar el clima para San José. De acuerdo, así que esta es una llamada API que estoy haciendo para abrir API de clima. Y esto se basa en un tema gratuito de Bootstrap que Dios firme inicio bootstrap.com, este sitio web aquí mismo. Y este es el tema que he usado. Entonces he editado algún código y he hecho que se vea así. Y la API que he creado aquí. Por lo que vamos a subir este sitio web en GitHub. Entonces volvamos a GitHub y haga clic en subir un archivo existente aquí. Ahora necesitamos arrastrar archivos aquí para agregarlos a tu repo. Entonces lo que vamos a hacer aquí es que sólo vamos a hacerlo a pantalla completa. Y aquí estoy. Esta es la carpeta que tiene todos los archivos de mi sitio web. Entonces solo voy a seleccionar todo y arrastrarlo a esta ubicación en GitHub.com. De acuerdo, así como pueden ver, ahora se están subiendo los archivos. Entonces voy a volver a hacerlo a pantalla completa. De acuerdo, entonces todo ahora está subido. Ahora necesitamos hacer un comentario aquí. Es necesario escribir un mensaje de commit aquí. Entonces voy a escribir primera versión. De acuerdo, y haga clic en Comprometerse cambios. De acuerdo, entonces github ahora está precediendo nuestros archivos. Puede tardar unos segundos. Sí, terminamos. De acuerdo, así que todos los archivos de nuestro sitio web ya están subidos y estamos listos para lanzar nuestro sitio web de Páginas GitHub. Entonces nos vemos en la siguiente. 5. Cómo lanzar el sitio web github.io: De acuerdo, así que todos los archivos de nuestro sitio web ahora están subidos a GitHub. Y estamos listos para lanzar nuestro sitio web de Páginas GitHub. Para ello, necesitamos hacer clic en Configuración aquí y llegar a las páginas. De acuerdo, dice que tu sitio está publicado en Skillshare GitHub, github dot IO. Por lo que si haces clic aquí, se lanza nuestro sitio web. Este sitio web está alojado en GitHub de forma gratuita, y también puedes hacer llamadas API desde aquí. Y tal y como les he mostrado en mi página web local, que era este San José. Entonces probemos algo más aquí. Probemos Londres. Y da clic en buscar. Sí, funciona. Nuestras llamadas API están funcionando desde este sitio web de Páginas GitHub. Como he totalmente anterior, que tu nombre de usuario.github.io será tu sitio web de Páginas GitHub como estás viendo aquí es kinship github.github.io. De acuerdo, así que déjame dar clic en este botón de atrás aquí. De acuerdo, por lo que hemos lanzado con éxito nuestro sitio web. Eso es bueno. Claro, github.github.io. Y siempre quedará así. Por lo que si tienes un sitio web estático de sitio web de negocios, puedes hospedar en páginas de GitHub, tal como te he mostrado aquí. De acuerdo, así que en la siguiente lección, vamos a crear un nombre de dominio personalizado para nuestro sitio web. Entonces no quiero que se vea como Skillshare, github.github.io. Por lo tanto, usaremos un dominio personalizado para nuestro sitio web de Páginas GitHub. Entonces eso viene para arriba en la siguiente lección. 6. Configuración de dominio a medida: De acuerdo, por lo que hemos lanzado con éxito nuestro sitio web en Skillshare, github dot github dot IO. Y ahora estamos listos para configurar o dominio personalizado. De acuerdo, entonces voy a ir a mi cuenta de GoDaddy aquí, y he comprado este dominio de GitHub Pages dot live para esta clase. Y yo sólo voy a copiar este nombre de dominio desde aquí. Y lo voy a pegar aquí y dar click en Guardar. De acuerdo, ahora podemos ver que tenemos un error que dice que la comprobación de DNS no tuvo éxito porque los registros DNS no se disminuyen dentro de nuestro dominio. Entonces, ¿qué vamos a hacer aquí? Vamos a abatir los registros DNS. Entonces lo primero que vamos a hacer es dar clic en Learn More. Por lo que sólo voy a hacer clic derecho en Más información y hacer clic en abrir enlace en nueva pestaña. Y ven a esta página que dice Maneja tu dominio personalizado. Desplácese todo el camino hacia abajo hasta aquí que dice un registros. Ahora copia uno de estos y ven a tu GoDaddy o cualquier cuenta de proveedor de dominio que tengas. Yo sólo voy a dar clic en estos tres puntos aquí y dar clic en administrar DNS. Por lo que el mismo proceso se aplica a todos los proveedores de dominio. Para que no tengas que preocuparte por ello. Sólo tienes que ir a administrar DNS dentro de tu proveedor de dominio. Y ahora necesitamos actualizar los registros aquí, que dice registros DNS. Por lo que sólo voy a dar clic en Agregar. Elija un tipo en el que va a estar un nombre. Y el valor va a ser la dirección IP que he copiado del sitio web de GitHub Pages y dar clic en Agregar registro. De acuerdo, entonces el registro ya está actualizado. Tenemos que hacer un cambio más aquí. Por lo que puedes ver aquí que tenemos páginas de GitHub registro CNAME en vivo. Necesitamos actualizar el registro CNAME. Por lo que basta con hacer clic en Editar y este valor será la URL de tu sitio web de Páginas GitHub, lo cual es crucial. GitHub.github.io. Entonces he copiado eso y lo voy a pegar aquí y dar clic en Guardar. Por lo que el tipo va a ser C nombre, nombre es www valores pueden compartir github.github.io y simplemente haga clic en Guardar. De acuerdo, entonces está actualizado, pero no va a funcionar de inmediato. Se tarda en cualquier lugar entre unos minutos y 24 horas. Por lo que tenemos que esperar un poco a que estos cambios ocurran. De acuerdo, así que intentemos abrir nuestro sitio web, GitHub Pages dot live. Y en la configuración de GitHub espacial para que puedas ver que tu sitio está listo para ser publicado en GitHub Pages dot live. De acuerdo, así que sólo voy a hacer clic derecho aquí y hacer clic en abrir enlace en nueva pestaña. De acuerdo, por lo que nuestro sitio web está en vivo en GitHub Pages dot live. ¿ Qué tan guay es eso? Ahora tenemos un dominio personalizado para nuestro sitio web de Páginas GitHub. Y también podemos acceder a este sitio web desde Skillshare github dot github dot IO. Pero cuando entré en la URL del sitio web, cambia automáticamente para obtener una vida base. De acuerdo, así que intentemos hacer algunas llamadas API desde este sitio web. Entonces solo voy a dar clic en llamadas APA y escribir el nombre de la ciudad para ver si funciona o no. Entonces me quedo en Calcuta. Por lo que sólo voy a escribir Kolkata y dar click en Buscar. Funciona chicos. Por lo que como puedes ver, todo está funcionando perfección y hemos creado con éxito nuestro sitio web de Páginas GitHub y configuramos un dominio personalizado. ¿ Qué tan guay es eso? Ahora bien, si estuviéramos atrapados en alguna parte, siempre puedes volver y volver a ver esta clase. De acuerdo, así que nos vemos en la siguiente lección, que será la lección final de este curso. 7. Consejos, ventajas y desventajas: En esta lección, te compartiré algunos consejos para administrar mejor tu sitio web de Páginas GitHub. Entonces, si estás buscando hacer cambios tu sitio web en el futuro, ¿cómo lo harás? Ahora hay un par de maneras de hacerlo. Simplemente puedes ir a tu repo de GitHub y hacer clic en el archivo que deseas editar. Entonces si quiero editar este archivo index.html, sólo voy a dar clic aquí. Y me llevará a esta página de editor de código index.html. Ahora, puedes dar click en este lápiz. Puedo hacer editar este archivo, o también puedes presionar E en tu teclado, E para editar. Entonces sólo voy a presionar E. Y eso me deja editar este archivo. Entonces por ejemplo, si vuelvo a mi página web y solo quiero borrar esto de por vida aquí. Entonces sólo voy a volver a mi editor de código aquí y buscar para toda la vida. Sí, aquí está. Yo sólo voy a seleccionar esto. Eliminar. Sí, eso es. Entonces sólo voy a cometer los cambios. Por lo que sólo escribiré eliminado por vida y dar clic en Confirmar cambios. De acuerdo, así se ha hecho nuestro compromiso. Ahora, si vuelvo a mi sitio web de Páginas GitHub y hago clic en este ícono de refrescar aquí. Y sigue siendo lo mismo porque no lleva a cabo los cambios al instante. Se necesita un poco de tiempo para que los cambios ocurran. Por lo que vamos a esperar un rato y dar clic en Refrescar de nuevo. Muy bien. Ahora como puedes ver, los cambios que se actualizan y apenas tardaron un minuto más o menos. Ahora déjame volver a GitHub y dar clic en mi repo. También puedes subir un archivo actualizado aquí. Entonces sólo voy a volver a mi carpeta donde he creado este sitio web y editar este archivo index.html. Entonces sólo voy a abrir con Sublime Text. Y bien, así que levántate páginas. Solo voy a cambiar el título de las páginas de GitHub para alojar tu sitio web con una cuadrícula de Las Vegas. Y desplázate hacia abajo aquí. Y yo sólo voy a agregar un smiley aquí. Sí, eso es todo. Y eso es todo. Sólo voy a dar click en Guardar Comando S para mi caso. Y sólo voy a salir a pantalla completa. Y sólo puedo hacer clic en él y arrastrarlo hasta aquí. Muy bien. Entonces tal vez voy a escribir la versión 2 y dar clic en Commitar cambios. De acuerdo, ahora como puedes ver, está mostrando la versión 2 al lado de nuestro archivo index.html. Ahora, si vuelvo a mi sitio web de Páginas GitHub y presiono Refrescar. De acuerdo, de nuevo, tardará unos momentos en actualizar los cambios. Por lo que esperaremos un rato y volvemos a pulsar Refresh. Vamos a golpear refrescar. Muy bien, nuestros cambios están actualizados. Ahora, dice el título, aloja tu sitio web con Páginas de GitHub. Y aquí también se agrega nuestro smiley. Entonces, así es como puedes hacer cambios en tu sitio web de Páginas de GitHub. Ahora déjame volver a mi repo de GitHub. Ahora en caso de que quieras revisar las versiones anteriores o cambios que has realizado hasta ahora. Simplemente puedes hacer clic en este ícono del reloj que dice commits. Te mostrará todos los comentarios anteriores que se hicieron. Simplemente puedo hacer clic en este Ver ven y garabatos aquí. Y me mostrará qué línea se ha eliminado que tiene un fondo rojizo y qué líneas se han agregado que tiene este fondo verde. ¿ De acuerdo? Por lo que si vuelves, también puedes consultar los comentarios anteriores y ver los cambios. Ahora hablemos de algunas ventajas y desventajas de usar páginas de GitHub para alojar tu sitio web. Las ventajas son, es gratis. No tienes que gastar ni un solo diez centavos para alojar tu sitio web aquí. Puedes configurar tu dominio personalizado para que la URL de tu sitio web luzca profesional y ordenada. Te da un certificado SSL gratuito. Se está aligerando rápido. Tu sitio web se carga en un abrir y cerrar de ojos. Hacer cambios en tu página web es muy fácil, como ya te he mostrado aquí. Y también puedes hacer llamadas APA, pero solo puedes alojar sitios web estáticos en Páginas GitHub. 8. Proyecto de clase y conclusión: Oye, espero que te guste la clase. Ahora es el momento de que alojes tu propio sitio web en GitHub Pages y compartas capturas de pantalla con la clase. Tengo muchas ganas de echarles un vistazo si estás enfrentando algún reto, directamente a mí aquí en la sección de discusión sobre Skillshare. Y yo te ayudaré. O también puedes volver y ver esta lección de nuevo aquí en skillshare. Espero que hayan disfrutado de la clase. Echa un vistazo a mis otros cursos aquí en Skillshare. Y muchas gracias por tomar esta clase.