Transcripciones
1. Introducción: Hola. Mi nombre es Aga. Yo también soy Diseñadora de Codificación y Docente. Me encantan los dinosaurios, los teclados viejos, color
rosa, las plantas, y el Internet. En estas clases vamos a aprender a
publicar fácilmente tu sitio web en la World Wide Web. Es genial tener tu sitio web en línea porque puedes compartir fácilmente el enlace con tus amigos,
familiares, o tal vez un futuro empleador. Vamos a utilizar las páginas de GitHub para que tu sitio web esté listo y viva en Internet. ¿ Qué tiene de genial estas clases? En primer lugar, son dulces y cortos. El segundo, vas a aprender GitHub Pages, que es gratis. En tercer lugar, tendrás tu sitio web en la web funcionando para que todos puedan verlo, verlo, enviarlo a otras personas. ¿ Es difícil? Estás preguntando. No, no lo es. ¿ Hay algún prerrequisito o cosas que necesito tener? Sólo el sitio web que codificaste. Pero, ¿y si no he codificado ya mi página web? No te preocupes, preparé varias clases sobre HTML y CSS para principiantes. Así que ponte a disposición en la web mediante una publicación de tu sitio web con mi pequeña ayuda en este curso. Feliz aprendizaje y publicación. Nos vemos en las próximas clases.
2. Lo que necesitas para prepararte: Lo que necesitas para preparar. En primer lugar, la página web que has codificado, la segunda cosa, la aplicación de escritorio GitHub que puedes descargar de forma gratuita, y la tercera, tu navegador web favorito. Si aún no has codificado tu página web, no te preocupes, preparé varios cursos sobre aprender HTML y CSS desde cero. Gracias a ellos, podrás codificar el sitio web desde el principio hasta el final para que tu sitio web esté listo para publicarlo. Puedes consultar Codifique Tu Propia Portafolio o Impulsar Tu Marca Personal.
3. Registra la cuenta de GitHub: Lección número uno. El primero que tenemos que hacer es crear una cuenta de GitHub. Lo hacemos en GitHub.com y configurar tu cuenta puede ser gratis y esto es lo que hacemos. Por supuesto, si quieres actualizar tu plan, hay un camino abierto. Pero para nuestros propósitos, la cuenta gratuita es totalmente suficiente. Tenemos que llegar con el nombre de usuario. Este punto es súper importante porque una parte de este nombre de usuario va a estar en la dirección de nuestra página web. Tienes que pensar, ¿cuál es el propósito de tu página web? ¿ Se lo vas a enviar a tu futuro empleador? En caso afirmativo, tal vez sea mejor tenerlo tu nombre y apellido en lugar de apodo. Todo depende de qué vas a hacer con esta dirección y con quién vas a compartirla. Mi nombre de usuario sería awwwesome-website, y este está disponible. El creador de direcciones por páginas de GitHub para mi sitio web será éste, awwwesome-website.github.io. Es importante elegir el nombre de usuario correcto. Tengo awwwesome-website, necesito rellenar correo electrónico y contraseña, y luego necesito verificar mi cuenta. Te estoy dando un minuto para terminarlo y estaremos de vuelta para los próximos pasos.
4. ¿Qué es Git y GitHub?: Lección número 2. Entonces registraste tu cuenta en GitHub, pero hay una pregunta que te viene a la mente y es ¿qué es Git? Cuéntanos más al respecto. A pesar de que nuestras clases están enfocadas en publicar el sitio web, no el GitHub y Git él mismos, voy a decirte brevemente de qué se trata. Por lo que Git es un sistema de control de versiones. Significa que presenta el historial de cambios en sus archivos. Versiones significa hacer un seguimiento de todos los cambios que ocurren en los archivos y su repositorio. ¿ Qué es el repositorio? puede pensar en ello justo como una carpeta, la colección de archivos más antiguos. Al pensar en el sistema de control de versiones, podemos echar un vistazo a las herramientas que utilizamos en nuestra vida cotidiana. Por ejemplo, te puedes imaginar escribir un texto en Google Docs y Google Docs guardar el historial de todos tus cambios. No sabía si te enteraste de ello. Se puede revisar lo que estaba sucediendo, se
puede volver fácilmente a la versión anterior, también se
puede nombrar esta versión. Por lo que Git juega este papel también para el código y todos los archivos que construyen el sitio web, las aplicaciones, todo lo que está conectado con el desarrollo de las herramientas. Este es Git. Pero, ¿qué es GitHub? ¿ Es lo mismo? En realidad no porque GitHub es el proveedor de servicios. Por lo que GitHub brinda servicio de Git. Es una solución que podemos usar y en parte es gratis. Por supuesto si te gustaría tener más características, necesitas actualizarlo a la cuenta de pago. Git es ampliamente utilizado en el mundo de las TI. Vamos a utilizar sólo algunas funcionalidades de la misma. Entonces es por eso que no quiero elaborar más sobre algunos temas, pero si tienes alguna pregunta, siéntete libre de avisarme en los comentarios. Estaré encantado de preparar nuevas clases para ti centradas únicamente en los comandos de Git. Hay un par de palabras que voy a usar cuáles son GitHub Desktop que es el software que nos ayuda a conectar nuestros archivos localmente en nuestro equipo con los repositorios remotos en servidores GitHub. Voy a mencionar commit, voy a mencionar repo, que ya se enteró. También voy a mencionar git push, pero esto es algo que se puede dar por sentado. Nuevamente, no te preocupes por los detalles, nuestro objetivo es publicar nuestro sitio web, no en explorar cada rincón y crujía de GitHub y sistema de control de versiones.
5. ¿Qué es GitHub Desktop y GitHub Pages?: Lección número 3. GitHub Desktop es la aplicación gratuita que te permite conectar repositorios locales, por lo que tus archivos locales con el remoto que está alojado en servidores GitHub. Es útil usar GitHub Desktop porque no
necesitamos aprender comandos de Git ni usar terminal, lo cual podría ser aterrador para algunas personas. GitHub Pages nos vamos a alojar el sitio web que creamos. Significa que podemos publicar el sitio web que
actualmente se encuentra en el repo remoto en un GitHub. Para hacerlo en vivo en la World Wide Web, significa que todo es gratis, y dentro de varios clics. Para ser honesto, creo que es un método
muy alcanzable de publicar tu sitio web a la web. Si tienes ganas de cavar más en GitHub Pages y por ejemplo, usa tu dominio personalizado que ya compraste, puedes ir al sitio web de GitHub Pages y saber más. Vamos a revisar la configuración básica. Configurar el repo de GitHub con el nombre apropiado, y luego revisar nuestra dirección, que es su nombre de usuario.github.io, para ver nuestro sitio web listo y en línea.
6. Crear el primer repositorio: Lección número 4. Mi cuenta está verificada, por lo que ahora puedo proceder. En el siguiente paso, vamos a crear nuestro primer repositorio. Te puedes imaginar como esta es una carpeta en nuestro equipo, y esta carpeta es monitoreada por Git. Se comprueba si hay algunos cambios nuevos con nuestra modificación,
todo, lo que está sucediendo dentro de esta carpeta, dentro de este repositorio está en el radar. Ahora puedo hacer clic en “Crear Repositorio” desde esta página de bienvenida o puedo ir a mi cuenta, clic en “Repositorios”, y dar clic en el botón “Nuevo”. Ahora es el momento de escribir el nombre del repositorio y esto es muy importante porque necesitamos primero escribir el nombre de usuario. Entonces mi nombre de usuario es awwwesome-website y la parte adicional que es que.github.io. Básicamente, puedes nombrar repositorio lo que quieras pero por ponerlo disponible para que las páginas de GitHub lo publiquen en línea, tenemos que escribir el nombre de usuario y luego github.io porque esta va a ser dirección de nuestro sitio web. El segundo es la descripción. Podemos escribir que este es mi sitio web personal. Es opcional por lo que puedes dejarlo en blanco si lo deseas. Tenemos que hacer público nuestro repositorio para que esté disponible para todos, y podemos inicializar la creación del repositorio con archivo README. El archivo README es sólo un archivo que dice lo que en realidad hay dentro. Por lo que podemos agregar algo de información sobre las tecnologías, si el proyecto es más complicado, por caso, si estás trabajando en desarrollar una aplicación móvil o un software serio, generalmente los desarrolladores proporcionan su información cómo compilar el proyectos. Pero se trata de información muy técnica. README puede estar en blanco así que no te preocupes por ahora. Creo que para nuestro propósito, solo
es bueno saber qué es el archivo README, pero podemos tenerlo vacío. Ahora es el momento de hacer clic en “Crear Repositorio” y ya está casi listo. Sí, lo es. Por lo que estamos teniendo nuestro repositorio creado. Este es nuestro primero, muy emocionado por esto. Ahora está casi vacío. Te digo que está casi vacío porque tiene un archivo el cual es README, pero no hay archivos conectados con nuestro sitio web por lo que no tenemos índice, html ni ningún estilo o imágenes, así que tenemos que poner nuestros archivos al repositorio remoto y a hacer esto, vamos a usar el escritorio de GitHub. Ahora puedes abrir desktop.github.com y descargar la aplicación. En el siguiente paso, te voy a mostrar cómo conectar nuestro repositorio remoto que creamos en GitHub con nuestros archivos locales.
7. Configurar GitHub Desktop y el primer compromiso: Lección número 5. Tengo mi app instalada. Se trata de GitHub Desktop. Simplemente lo inicias haciendo doble clic en el icono de GitHub Desktop, o puedes encontrarlo con Spotlight en Mac o con encontrar los archivos en Windows. Por ahora, necesito iniciar sesión en mi aplicación GitHub Desktop. Puedo hacer click para “Clonar un Repositorio desde Internet”. Esto es exactamente lo que queremos hacer. Tengo marcado a Github.com, y necesitamos iniciar sesión con nuestras credenciales que utilizamos para el registro de GitHub. Para mí, mi nombre de usuario es awwwesome-website, y la contraseña. Ahora ya estoy inscrito. Se puede ver que actualmente estamos teniendo un repositorio, que es el que acabo de crear. Puedo dar click en él. Tengo botón azul en la parte inferior, lo que le dice a clon este repositorio, esto es bastante largo. Quiero clonarlo desde el repositorio remoto a mi computadora. Sólo estoy haciendo clic en él. Esto es algo lo que dejamos, y esta es la dirección predeterminada. Este es el camino local en nuestra computadora donde nos gustaría tener guardado nuestro repositorio. Podemos elegir si va a ser en un escritorio o en una subcarpeta, lo que sea más fácil para ti y donde quieras guardar esos archivos. Para mí, ya he elegido el camino y estoy dando click en “Clonar”. Mi repositorio es clonado con éxito. No te preocupes y no te aterrorices con todos estos nombres y mesas. Te voy a mostrar lo que realmente necesitamos porque no
estamos aprendiendo Git en estas clases. Nuestro objetivo es publicar nuestra página web. Déjame mostrarte la carpeta con mi repositorio. Se trata de una carpeta llamada página web. Aquí, estoy teniendo los archivos para mi sitio web que ya está codificado. Podemos poner aquí tu sitio web, tu index.html, tus imágenes,
CSS, lo que sea que hayas creado. Aquí tengo la carpeta llamada exactamente como mi repositorio en GitHub. Tiene solo archivo README, pero queremos poner aquí nuestra página web. Lo que hago es que acabo de marcar todos estos archivos que están construyendo mi sitio web en realidad y arrastrando a la carpeta. Mi repositorio tiene más archivos ahora. Sólo voy a mostrarte rápidamente el sitio web que he codificado para mostrarte que esto funciona. Este es el sitio web que he creado. Si te gustaría tener algo similar, recomiendo encarecidamente que asistas a mis clases. titulan Código tu propio portafolio, y en un plazo de tres horas puedes codificar dicho sitio web. Pero volvamos a la carpeta. Aquí están los expedientes. Déjame revisar nuestro GitHub Desktop, está actualizado con estos nuevos archivos y están marcados en verde. Significa que estas cosas son nuevas en nuestro repositorio. En realidad, cada archivo es nuevo. Toda línea de código habría sido marcada en verde. Lo que necesito hacer, necesito marcar todos estos archivos y comprometerlos. ¿ Qué significa realmente comprometerse? Comprometer guarda nuestros cambios en el repositorio local, por lo que significa que son seguros. Aunque hagamos algo mientras tanto, no
necesitamos preocuparnos porque están en compromiso. Casi se guardan en nuestro repositorio remoto también. Déjenme comprometerlos. Con cada commit, escribimos el resumen de lo que está sucediendo en estos cambios. Aquí podemos escribir, por ejemplo, primera versión de mi sitio web, y puedo comprometerme a dominar. El maestro es una rama por defecto. No quiero profundizar en los detalles, pero necesitas creerme que master es una rama predeterminada para cada repo, y hago clic en “Comprometerme”. Todos estos nuevos cambios, todos estos nuevos archivos se van a comprometer con nuestro repositorio. Puedo ver que la lista está vacía porque nada ha cambiado. guardan todos los cambios anteriores, por lo que mi repositorio está actualizado. No hay cambios locales como se puede ver aquí. El único que tenemos que hacer es, tenemos que empujar todos los cambios al repositorio remoto, al repositorio que creamos en GitHub. Doy clic en “Empujar origen” en el botón azul, y todos los objetos, todos los archivos están siendo empujados y estamos listos. Comprobemos lo que está pasando en GitHub.com, en mi cuenta. Estoy en Github.com y este es mi repositorio. Si ya cerraste este sitio web, puedes ir fácilmente allí a tus repositorios, abrir el repositorio que acabas de crear. Se puede ver que tenemos este archivo README y tenemos el primer commit de Aga, y este es el resumen, primera versión de mi sitio web. Podemos ver aquí todos estos expedientes. Podemos ver también que el empuje se hizo hace un minuto.
8. Aplicar los cambios y ver el sitio web publicado: Lección número 6. Ahora estamos contentos de que nos comprometamos todo, pero ¿y si queremos cambiar algo en una página web? Imaginemos la situación que me gustaría cambiar el encabezado de
mi sitio web antes de consultarlo en línea. Estoy abriendo escritorio GitHub. Puedo ver la historia. Yo puedo ir por instancia a este expediente. Puedo abrir éste en Atom. Este es el editor de codificación. Imaginemos que aquí quiero escribir soy Aga Doe, ahora es Jane, pero Aga. Vuelvo al escritorio de Github y puedo ver que hay un cambio. Cambio a la pestaña Cambios, y Jane está en rojo. Significa que se ha ido, y en verde veo Aga. Github desktop ve mis cambios. Al instante sabe lo que está pasando en mis archivos. Por ejemplar aquí hay un tenedor de plaza, hay una pista. Puedo escribir actualizando index.html, pero también puedo escribir cambiando el nombre del autor. Doy clic en “Comprometerme a dominar”. Lo mismo, nos comprometimos los archivos, pero para ponerlos a disposición en el repo remoto necesitamos hacer clic en “Push origin”. Vamos a comprobar si mi commit está registrado en GitHub.com. Sí, lo es. Si hago clic en el nombre de este commit, veo que Jane se ha ido y se agrega Aga. Te dije que en realidad esto va a ser URL, la dirección de nuestro sitio web. Copiemos esto, péguelo en el navegador web y veamos qué podemos ver. Nuestro sitio web es vida y está listo. ¿No es genial? Yo lo hice en realidad un tiempo muy corto. Puedo ver que hay Aga, por lo que mi sitio está actualizado. Puedo copiar este enlace y enviarlo a todos los que quiera. Eso es tan guay. Eso es tan emocionante. Imaginemos la situación que me gustaría volver a cambiar algunas cosas en la página web. Estoy en Atom y por ejemplar quiero escribir soy impresionante Aga. Yo estoy guardando este. Por supuesto, si refresco esto no voy a ver los cambios porque
los cambios no se comprometen y no se empujan a nuestro repo remoto. Estos cambios se realizan sólo a nivel local. Lo que necesito hacer, ¿te acuerdas? Tenemos que revisar los cambios, puedo ver que este rubro está actualizado. Necesito volver a agregar la descripción para mi commit, cambiando el título otra vez, y lo estoy comprometiendo a dominar. Mis cambios locales se guardan. Yo estoy bien para ir a publicarlos al repo remoto. Parece que están comprometidos y empujados. Permítanme refrescar el sitio web. Aquí tenemos hola, soy Aga Doe, y ahora deberíamos tener, soy impresionante Aga. Puedo ver que mi rubro está actualizado. A pesar de que es demasiado largo, eso no importa. Yo solo quería mostrarles que en realidad podemos hacer los cambios y ustedes los pueden ver al instante. A veces tu caché en el navegador web podría estar lleno, por lo que es bueno abrir tus herramientas de desarrollador haciendo clic derecho en “Inspeccionar”. Aquí vamos a tener disponible caché vacía y recarga dura. Se despejará el caché y volverá a cargar el sitio web. Si tienes algún problema con ver los cambios, puedes hacerlo. Esto es todo. Nuestro sitio web está en línea. Podemos cambiarlo. Puedes enviar un enlace a todos. Creo que eso es genial porque en serio no tardó mucho en hacerlo funcionar. Lo importante es que es gratis. Se puede agregar fácilmente en el contenido. También puedes tener un control sobre tus cambios en un sitio web.
9. Proyecto: La lección final. Después de terminar mis clases, tu tarea es súper sencilla. Está pegando el enlace a nuestra sección de proyectos. Me encantaría ver tus páginas y tengo súper curiosidad por cómo fue todo. Existen muchas otras herramientas que puedes usar para conectar GitHub con tu repositorio local. Por lo que estaba recomendando escritorio GitHub, pero hay árbol de fuentes. También puedes usar la línea común, que es entonces otro nivel de avance. Estoy manteniendo los dedos cruzados para todos tus comentarios y todos tus sitios web publicados. Me puedes encontrar en Instagram, en Twitter, o simplemente puedes enviar un enlace usando tu correo electrónico.
10. Extra: Metidas de pata: Así que haz tu venta. En primer lugar, aprender todo el proceso con esto, porque va a ser un gran regalo. No.
Aga Naplocha, Creative coder & designer
